【 Preface 】 For more than a year, the author has acted as a series of mentor roles in the company, such as mentor for graduates, mentor for interns and mentor for graduates’ projects. During this period, the author found that some students who were about to become front-end siege lions did not know the real core and positioning of front-end, nor did they make a learning and development direction for themselves. At the beginning, I chose this career just to find a job. Based on my years of work experience, THE author would like to share my career plan for front-end engineers with the graduates, so that everyone can have a more clear understanding of themselves and avoid confusion in the future growth process. Of course, the author has only worked for five years in fact, can reach the current technical level and rank, it should be a relatively fast development and rise, some experience has a certain reference value.
The rise of the front-end
It was about a decade ago that the front end really took off and started popping up a lot. Back then, Web development was dominated by the back end, where all the front end could do was check the data and manipulate the DOM. (Data verification is the root cause of JS: the network was too slow at that time, so the process of checking data at the server side and feeding back to the user to let the user know about the input error was too long and slow. Therefore, the first step verification at the client side was completed by script, which was convenient for the user and reduced the pressure of bandwidth.) Even the release of jQuery in 2006 and its worldwide popularity and the inclusion of XMLHttpRequest into the W3C standard haven’t changed that. The reason for limiting its progress is simple, because there are many things that the front end can’t do or can’t do well. As time goes by, frameworks such as Angular, Backbone, React and Vue have been released in recent years, making the front end more and more standardized and systematic. Although there are still a lot of things, the front end can not do or do not do well, but the front end of the post has become unprecedented hot. So what’s driving the front end to such scale and heat?
You could probably list a lot of different reasons, but one of them is “user experience,” and it’s because of all the emphasis on user experience that the front end is growing so fast, so fast. Here, I may want to thank Apple, iPhone and Jobs. The release of the first generation of iPhone in 2007 officially triggered almost everyone’s attention to user experience, from “as long as it can be used” to “I will pay if it can be used” psychology. And the pioneers of the front end, the developers of the browser, have followed this trend and added a series of important capabilities to the browser, to the front end.
One of the most important is XMLHttpRequest, or Ajax, which is the foundation of rich Web applications. It allows the front end to take control of the back end and interact with data without having to jump to it. Thanks to Microsoft, thanks to IE, although it has been abused countless times by IE 6~8, but it is the introduction of XMLHttpRequest, the introduction of Ajax, the era of rich Web applications, let the user experience greatly improved.
In recent years, with the development of mobile Internet, the demand for multi-terminal and multi-platform is increasing, and the separation of product form and data is the trend of the situation. And at the same time, the mobile era on the product shape, cross-platform, diversified across the end user experience, let alone a cross-platform features of front-end technology really fire again, it lets developers have more time and energy to focus on the user experience, and it is easy to maintain the unity of the platform, the user experience more (different platforms with different technical implementation, while it is possible, but the cost is too high). In addition to the above reasons, the hot release and hot update features of the front-end technology can update the business requirements in time and quickly fix the problems encountered by users, which is another reason why people choose it. There are many other reasons why the front end is one of the hottest jobs, but the root cause is the need for user experience.
As can be seen from the above, the rise of front-end comes from everyone’s attention to user experience, and the popularity is due to everyone’s attention to diversified user experience. Of course, the user experience is more than just a pretty and pretty UI. It’s multifaceted, such as how fast the view loads and how smooth it is, depending on the size of the code, the efficiency of the technology you choose, and so on. To put it bluntly, the purpose of the front end is to make the user feel good, so the user experience must be a top priority.
With all this said, there is one important point that has not been mentioned, and that is CSS. Pay attention to user experience, first of all, you need to use the interface to have UI, HTML + CSS as the simplest UI construction way, so that the front-end UI development cost is unparalleled, and low development cost will have more time and energy to pay attention to user experience. At the same time, there are corresponding CSS frameworks, such as PostCss and Sass, which further reduce the development cost and release developers’ time and energy.
The decade of the front-end has also been a decade of rapid growth in user experience. Whether it is the technical perfection or the number of employees, the front end has attracted the attention of enough technical personnel, as well as the attention of enough enterprises. After the front end of the continuous efforts, and now how?
Status of the front end
To mention the current situation, we must first mention a concept of the big front end. Due to the development of the Internet in recent years, especially the development of mobile Internet, some big front-end concepts put Native into the category of front-end, and some big front-end concepts put Node and even PHP that only renders pages into the category of front-end, but anyway, THE author believes that big front-end is a trend in the future. Grouping together technologies that have the same end goal (improving user experience) gives developers a clear idea of what their end goal is and how to do it. Of course, because of this, as a front-end engineer, if you want to do well, you should have a broader knowledge, including mobile knowledge, server knowledge. Combine this knowledge with your front-end technology to create a great user experience.
When it comes to front-end architecture, there are four popular ones: jQuery, React, Angular and Vue. Almost all projects now use one of these four architectural solutions as the basis for business development. Four frameworks, four different ideas, to put it simply: jQuery Dom driven idea is popular; React advocates componentization, where everything has components; Angular takes MVC to the front end; Vue is a data-driven MVVM architecture. As a new person at the front end, you can’t quickly understand all the knowledge and ideas. You have to take it one step at a time, first understanding the framework you are using in your work, and then thinking and learning more. To be honest, there is a big gap between knowing how to use and understanding.
One of the questions here is, these four architectures are all very popular, but where is the user experience involved? Yes, none of these architectures directly address the UI. However, just like football, no matter how good 11 players are without diligent training and excellent tactics, these architectures reduce the difficulty of coding and maintenance for developers in terms of development cost and development experience, so that they can get twice the result with half the effort in UI user experience. Of course, frameworks affect the final user experience in many ways, from coding volume to runtime efficiency.
That said, one of the things about the current front end is that frameworks are rampant, and very few companies, or engineers, now polish code in a pure, raw way. The other big thing about the front end is that it’s mobile first. The reason is simple: with the explosion of mobile Internet users, companies’ products are mobile first, and technology follows the pace of products, and mobile must come first. In order to solve the multi-platform problem, Hybrid solutions stand out, including traditional WebView-based Hybrid solutions (such as Cordova) and A series of technical solutions such as React-Native. Here I will not say more about the mobile front end of the content has been flooded with various technical forums, communication groups, public numbers, specific, you can personally to understand.
Finally, I think what you’re probably most concerned about is the career situation. Due to the rise of the front-end, the front-end talent market is quite active, the average salary level is also among the best. At the same time, it is easy to get into the front end of the technology, resulting in the other extreme situation: personnel overflow, talent scarcity. This situation, on the one hand, because the front-end development is too fast, it is difficult to master all knowledge in a short time; On the other hand, colleges and universities do not set up special front major, people are more self-study, there are many wild ways. The so-called troubled times out of the hero, such a front-end environment may be more beneficial to a new students. Of course, in such a chaotic world, a good career planning can avoid “going astray” and ensure their smooth growth.
How to make a career plan
The above describes how the front-end rise and the current situation of the front-end, the following will be based on the above two points, divided into several aspects to provide you with some views on career planning, I hope to help you.
Determine the direction of
The purpose of career planning is to avoid confusion, and the most effective way to avoid confusion is to set clear direction and goals.
For any technical position, there are two fixed directions: technical specialist (architect) and development manager. The former is technology-heavy and requires you to delve deeply into your current field. The latter is more management oriented, requiring you to have a deep grasp of technology and be able to lead the team to complete the development of the project. Of course, it’s not like you can have your cake and eat it. You can be a technical expert and a development manager at the same time.
Choosing between technologist and development manager depends more on your own dopamine levels at work. When you specialize in technology, you get more dopamine, you feel more excited, and you may easily become a technologist. On the other hand, when you’re working with a team and your dopamine levels are higher and you’re more rewarding, you can try becoming a development manager. Of course, it’s possible that you don’t get too much dopamine out of everything you do, and then you can try something else, like product manager, after a while. The front end as the core is the user experience, with the closest user engineer, transformation product manager, the obstruction will be less. Moreover, zhang Kejun, head of douban front-end evangelist, believes that front-end engineers are slowly evolving into product engineers, and front-end and product are indeed very close.
When you choose a direction, you must take steps in that direction. Daniel put forward the 10,000-hour rule in “The 10,000-hour Genius Theory”, that is, to become an expert in a field, you need to accumulate 10,000 hours. Of course, this is just an estimate, but spending more time learning and practicing every day is definitely the most effective. Here, becoming a technologist and a development manager has a slightly different focus. To become a technical expert, we should pay more attention to the realization of technology itself, including logic, architecture, design pattern, methodology, etc. As a technical manager, more attention should be paid to the process of technical development, considering how to improve development efficiency, reduce development cost, optimize development quality and so on. Different people, energy is limited, selective attention to some necessary aspects, for their rapid growth is very necessary.
Business or architecture
To do business, time requirements are relatively tight, code quality requirements are high, there are more codes for reference, and business knowledge needs to be learned. As an architect, I have a little free time, high requirements for experience, no reference code, and profound understanding of basic professional knowledge; Most importantly, you as an architect, as a developer, as a user, and as a PM, have only 80-90% clear goals and fine-tune them as you go along.
For a newcomer, in fact, there is no need to tangle, doing business is a good choice, and doing high technology, the use of popular technology business is the best. The reason is simple, the ultimate purpose of architecture is to solve the problems in the business, you have not done business, how can you know the problems of the business, you do not know what problems to solve, how to do a good architecture. So, start from the business, is the best choice for new people, but also the only viable choice. The reason to choose a business that is technical and uses popular technology is more about growth, so you can grow faster and have a straighter growth path. Of course, this is only “possible”, different people are suitable for different businesses, so do not insist on a certain “high-tech, using popular technology” business, but more to change yourself, to adapt to the team, adapt to the business, so as to grow faster.
In fact, many times, you will be so busy that you don’t have extra time to study. And how do you grow faster in this environment? To put it bluntly, copy. No, no, reference. Integrating learning into work is the best way. Do new projects, refer to the old project code; Do new requirements, reference old requirements code; There is no code of the same type, refer to other business code. Reference predecessors’ experience, on the shoulders of giants, growth will become faster. At the same time, your mentor and your partner will give you guidance in the business and help you quickly solve problems along the way.
To sum up, to grow fast in a heavy business environment, you need a great ability to learn, a lot of patience, and good mentors and partners to get the most out of your technical growth.
Technical learning
For a long time, to the core of the problem, for a rookie how to learn technology? The author’s advice is: do not be swallowed, first the current use of technology to learn thoroughly with the most important; Never try to learn something new, no matter how popular, without first understanding the technology in use. As mentioned above, different frameworks have different cores and different ideas. For example, Angular and Vue both have bidirectional binding. Although the effect is similar, the implementation philosophy and internal implementation are completely different. When you are still in the beginning stage, your mind will be filled with ideas and you will be even less clear.
Over time, when you understand one architecture, you can look at more architecture by analogy. At this point, you’ll find that a lot of things come together in different architectures, and you’ll understand it quickly.
Of course, understanding an architecture takes one year for some, three years for others, and even longer for others. Why the big difference? Because some people do not think that completion is enough in the development, they will pursue the beauty of the code in the development, and will constantly optimize their own code, so that their code performance is better, more readable, and through a long time of accumulation, to achieve quantitative change leads to qualitative change. Even a very intelligent person cannot be qualitatively changed without quantity, but his quantity may be less than others.
One thing to remember is that when learning technology, it’s important to integrate it with the technology stack of your company and team. For example, the fresh graduates of Qunar will take 3 months of off-job training before entering the business line. The technologies involved in the 2017 front-end training courses are mainly React and React Native, while the technology stack of Qunar business is mostly React. So, as the fresh graduates of Qunar’s front-end business, You can learn React technology system first and get twice the result with half the effort. There are both predecessors to ask and projects to practice.
Of course, while learning architecture, don’t lose sight of the two most basic things, one is the technical foundation and the other is the development specification.
Technical foundation is the premise of all development and architecture. Without a good foundation, it is impossible to make your own technical level reach a high enough dimension. For example, if you don’t understand inheritance very well, you’ll have a hard time understanding the internal implementation of React.
As for the development specifications, I pay special attention to let the fresh graduates abide by them. Code specifications abound, but few are strictly adhered to. The reason is that before the code specification is formulated, they have already had their own code habits, and it is difficult to change their habits in a short time. This year’s students, generally speaking, code is not much, has not formed their own coding habits. At this point, starting to follow certain norms will encourage them to develop a better coding habit, laying a good foundation for subsequent growth. Here are some of the benefits of developing a specification to help you understand the importance of a code specification:
- Disciplined code promotes teamwork.
- Regular code can reduce Bug handling.
- Regular code can reduce maintenance costs.
- Normative code facilitates code review.
- Getting into the habit of code specification helps programmers grow.
At the end of this part, I recommend some good places to learn technology, such as “Front-end Morning Reading Class”, Ali Desert (not Desert Poor autumn) w3Cplus.com, wechat public account “Front-end Circle”, “Front-end top”, “Node Full stack”, and of course, the company’s “Qunar Technology Salon” wechat public account. YMFE’s blog, blog.ymfe.org, is a good place to learn about technology.
Battleground — mobile hybrid development
With the rise of mobile wave, the demand for mobile apps is expanding rapidly, and the frequency of application iteration and update is also rising rapidly. However, at the same time, the development and update cost of pure Native has become an insurpassable bottleneck for business growth. Therefore, it is imperative to introduce a solution that can be developed more efficiently and at lower cost.
In the current mobile Internet environment, apps on iOS and Android have become the standard of every Internet product. If a client product does not provide an App version, it is almost immediately defined as an incomplete product. The “only fast can never be broken”, which is respected by Internet people as the iron rule — fast development, high-speed iteration and low-cost online, is also the goal pursued by every development team in the mobile era. Based on the above two reasons, the Hybrid development mode of “Native platform, Web play” has won the favor of people with the characteristics of “fast”, and a lot of development forces have been invested, making this development mode quickly popular. The most common technical architecture solutions are as follows:
- Web-based Hybrid solutions: for example, wechat browser, Hybrid solutions of various companies
- Solutions that are not Based on Web UI but whose business logic is based on JavaScript: for example, React-Native
- Based on Web UI, but in order to pursue efficiency, the UI display logic and business logic of JavaScript are isolated solution: wechat small program
For a front-end, the author feels that everyone must understand the implementation methods, advantages and disadvantages of these three common solutions, so that when developing mobile terminal business, they can know more about what they should pay attention to and learn. Of course, it’s not enough to just know how to implement it, you have to have the environment to practice what you learn. Take Qunar as an example. Most of qunar’s businesses are mobile terminals, and Hybrid and RN schemes are being used. So, as a recent graduate, you are likely to do some Hybrid or RN programs. With Hybrid projects, you’re more concerned with “how to manipulate the Dom efficiently”; On the other hand, when you’re working on an RN project, you’re more concerned with reducing communication with Native speakers. These two points will ultimately be reflected in the user experience of the project.
The “alternative” in the front end — Node
Node, as a front-end, should be no stranger. Node’s biggest selling point is its fully asynchronous I/O model, which greatly improves Web service concurrency compared to blocking I/O. So the front-end can develop its own server?
So think of the students, the author can only say that you think much. Node can be used to develop servers, but it does not mean that all front-end servers can use Node to develop a large business server. If you go to Zhihu to search for issues related to using Node to develop server, some people will say that Node cannot replace the previous server language, while others will say that nothing can stop Node from developing server. At the same time, many big companies like Paypal and Alibaba are using Node on a large scale, and many companies are falling into the Node pit. Regardless of the debate, I believe that whether Node can write servers depends on whether people who use Node have a server-side mind. Developing the server and developing the front end are completely different ideas. The server pays more attention to efficiency, stability and processing of data in high concurrency. Obviously, it is not possible to develop the server with the front end idea. Of course, in successful cases, Node is also more used in the page rendering layer, with the front-end faster rendering page, improve user experience; And complex data logic, or use the traditional server language for development, after all, mature technology, low operation and maintenance cost.
Here, there is a question, I just front-end, do I need to learn Node? My answer is yes. The rise of the front has been many years, has gradually become a large-scale, engineering era from the stage of guerrilla shooting birds. Node plays an important role in this era, especially in terms of tools and processes. Tools such as Webpack, Gulp, and NPM are used in various companies’ front-end projects. Learning Node is actually to learn the front-end tools, to learn the front-end engineering.
Of course, if you aspire to be full stack, or want to do some server-side work, or want to learn server-side technology and principles through Node, you can learn Node. Trust me, you won’t be disappointed.
The front end is constantly moving forward in “building the wheel”
The meaning of building a wheel is to rerealize existing functions to achieve better results. This term, common in the tech world, especially the front-end, has come to be used pejoratively to “deride” a tool, framework, or solution that reimplements existing functionality. So what exactly is the act of building a wheel?
First of all, I’m not against making wheels. At least one great god made wheels successfully: Linus Torvalds. Minix didn’t work, so they built a Linux; Bitkeeper stops licensing and creates a Git. And two new “wheels” have become two of the best wheels in the world. This creative wheel-building is admirable.
Secondly, it is also a very good idea for different technology systems to learn from each other, refer to each other’s ideas and build their own wheels. In particular, the front end, through learning other languages, the architecture of the system, to enrich itself, just a few years to rise to a very high height. There are many examples: Angular’s MVC + DI + IoC pattern, for example, many people will immediately think of Java Spring, and even Angular includes AOP programming ideas; Another example is the MVVM two-way data flow model, which was first proposed by Microsoft’S WPF. Wheels can be built, just as long as they make sense for development.
In the end, people’s antipathy to building a wheel is actually more antipathy to building a wheel without any innovation, and propagating their products everywhere every day. You can build your own wheel without any innovation, learn the process of building a wheel, and it’s the best way to get inside a wheel. Once you understand the fundamental structure of the current wheel, you can build on it.
Other aspects of learning
As a front end, the two most important areas to learn are product and design. Learning product thinking will help you review your product from the user’s point of view and find out where the user experience is not good and the interaction is not good. Learning design helps you analyze what’s wrong and find a solution. Of course, everyone’s energy is limited, it is impossible to learn these two aspects particularly deep, but it is best to have contact, have a certain depth of learning.
A small summary
The previous article did not directly explain how to do career planning, but from the development direction, technical learning, main business scenarios, NodeJS, wheel building and other aspects, to give you an analysis: as a front, what needs to do, what do not need to do, what must do, what can be done. You can decide what to do, what not to do, what to force yourself to do, what to do when you have free time, and similar decisions based on your own interests, abilities, and other characteristics, combined with your own projects in the company. Here’s an example: My goal is to become a technical expert. Therefore, I will deeply plant myself in the business for one to two years, strictly control my code specifications, deeply understand the React system, and focus on React Native on mobile terminals. Besides, I will have time to look at Node and Babel related tools. The goal is to thoroughly understand the React technical implementation and Web Component development ideas. When you have a goal like this, you can clearly see your purpose and you can clearly see your growth.
It’s important to note that if you’re already employed, your career plans should never be divorced from your current job. Real knowledge comes from practice, and the practical environment brought to you by work is the source of nutrition for your growth.
The future of the front-end
For the future of the front-end, or the future of Internet technology, I agree with teacher Ruan Yifeng’s point of view: in the future, programmers can only be divided into two categories, terminal engineers and cloud engineers. Terminal engineer, face to users, in order to users can better use the product, including traditional front-end, Native, AR/VR, TV terminal development; Cloud engineers, on the other hand, face data directly and transform cold data into products closely related to users, including distribution, big data, machine learning and so on.
The front-end, no matter what it becomes, will always be about the user experience, but with more ends and more ways to develop. As a front-end engineer, I should always pay attention to the industry trends, learn more new technologies, improve my strength, and adapt to greater challenges.
Write in the last
As a newcomer to the front end, you probably don’t understand everything described above, and that’s okay. Do a suitable for their own career planning, is in no hurry to at that time, in fact it is best at work after a period of time, and your leader or partners together to make a evaluation, and according to the front, to develop a suitable for their own situation, conform to their own interest in the career planning, and in accordance with the plan step by step, improve ourselves, to success ahead.
I sincerely hope that this article can be of some help to you. The young and energetic front end has not yet developed as many implementation standards and best practices as the back end, and everyone can think differently and think differently. This article is only the author’s personal views and opinions, there are mistakes or omissions, please forgive. At the same time, you are also welcome to have a deeper discussion with the author in private.
Finally, I would like to send you a message recently updated by PHP core developer “Bird brother” Hui Xinchen on weibo:
