The rise of the front end
The front end really rose and began to appear frequently in everyone's sight, probably ten years ago. At that time, Web development was basically dominated by the back-end, and all the front-end could do was verify the data and manipulate the DOM. (The data verification is the root cause of JS: the network was too slow at the time, and the data was verified on the server side and fed back to the user to let the user know about input errors. This process was too long and the response was too slow, so the first step was completed on the user side through a script. Step-by-step verification not only facilitates users, but also reduces the pressure on bandwidth.) Even though jQuery was released in 2006 and swept the world, and XMLHttpRequest was included in the W3C standard, this situation has not changed. The reason that restricts its progress is simple, because many things can't be done or can't be done well. With the passage of time, in recent years, frameworks such as Angular, Backbone, React, and Vue have been released one after another, making the front-end more and more formal and systematic. At this time, although there are still many things that the front-end can't do or can't do well, the front-end position has become hotter than ever. So, what is driving the front-end development to such a large scale and fiery degree?
Perhaps, you can list many and various reasons, but to sum it up, the "user experience" is because everyone pays attention to the user experience, which makes the front-end develop so fast and rise so quickly. Here, you may want to thank Apple, iPhone, and Jobs. The release of the first iPhone in 2007 has officially aroused almost everyone’s attention to user experience, from "As long as it can be used" to "I should use it well. Pay the bill. However, front-end pioneers and browser developers have also followed this trend, adding a series of important capabilities to the browser and the front-end.
The most important one is XMLHttpRequest, which is Ajax, which is the foundation of rich Web applications. It allows the front end to be out of the control of the back end, and data interaction can be realized without jumping. Thanks to Microsoft and IE. Although it has been abused countless times by IE 6~8, it introduced XMLHttpRequest and Ajax, which opened the era of rich Web applications and greatly improved the user experience.
In recent years, with the development of the mobile Internet, there is an increasing demand for multiple terminals and multiple platforms, and the separation of product form and data is the trend of the situation. At the same time, the mobile era requires cross-end, cross-platform, and diversified user experience for product forms, which has made the front-end technology with cross-platform characteristics really popular again. It allows developers to have more time and Focus on user experience, and it is easy to maintain the unity of multi-platform user experience (different platforms are implemented with different technologies, although it is possible, but the cost is too high); in addition to the above reasons, the front-end technology comes with hot release and hot update features , Which can quickly fix the problems encountered by users while updating business requirements in time, which is also one of the reasons why everyone chooses it. Although there are also a lot of zero-zero totals and various reasons that make the front-end one of the most popular positions at present, the most fundamental reason is still everyone's requirements for user experience.
As can be seen from the above, the rise of everyone from the front of the user experience seriously, and more popular due to the owner of a wide range of user experience concerns. Of course, the user experience is more than just a beautiful and beautiful UI, it has many aspects, such as the loading speed and smoothness of the view, which depend on many factors such as the coding volume and operating efficiency of the technology you choose. To put it plainly, the purpose of the front end is so users must be cool , so the user experience must be a top priority.
Having said that, there is actually one very important point that is not mentioned, and that is CSS. Pay attention to user experience. First of all, you have to use the interface to have a UI. HTML + CSS as the simplest way to build UI, make the front-end UI development cost unparalleled, and low development cost will have more time and energy to focus on users Experience. At the same time, CSS now has corresponding frameworks, such as PostCss, Sass, etc., which further reduce development costs and free up developers' time and energy.
The ten years of the rise of the front end is also a decade of rapid growth in user experience. Regardless of the technological sophistication or the number of employees, the front-end direction has attracted the attention of enough technicians, and at the same time it has also been valued by enough companies. After the continuous efforts of front-end people, what is the current situation?
The current state of the front end
Mentioned situation, we must refer to a concept large front-end . Due to the development of the Internet in recent years, especially the development of the mobile Internet, some big front-end concepts put Native in the front-end category, and some big front-end concepts put Node or even PHP that only renders pages into the front-end category, but anyway , I believe that a large front-end is a trend in the future, the ultimate goal (improving user experience) technology consistent grouped together, let developers know what their ultimate goal is, how to do it. Of course, because of this, as a front-end engineer, if you want to develop better, you should have a broader knowledge, including mobile knowledge and server knowledge. Combining this knowledge with your front-end technology can better achieve an excellent user experience.
Putting aside the big front-end, just talk about the front-end, from the front-end architecture level, there are four popular recently: the veteran powerhouse jQuery, the recently popular React, the Google boutique Angular and the MVVM framework Vue. Almost all projects now choose one of these four architecture schemes as the basis for business development. Four frameworks and four different ideas. Simply put: jQuery Dom-driven ideas are deeply rooted in the hearts of the people; React promotes componentization and everything is a component; Angular promotes MVC in the front-end field; and Vue is based on data-driven core MVVM architecture. As a front-end newcomer, it is impossible to quickly understand all knowledge and ideas. You can only take a step by step, first thoroughly understand the framework you use in your work, and then think and learn other things. To be honest, there is a big gap between knowing how to use and understanding.
Here, there may be a question. The above four architectures are very popular, but where does the user experience involve? Yes, none of these architectures are directly related to the UI. But just like football, without diligent training and excellent tactics, no matter how good 11 people can play a good game, these architectures reduce the difficulty of developer coding and maintenance in terms of development cost and development experience. Paying for the UI user experience is twice the result with half the effort. Of course, the framework affects the final user experience in many aspects such as coding volume and operating efficiency.
What I said above is that the current front-end situation-the framework is rampant , now there are very few companies and engineers writing code in a purely primitive way. The other big current situation of the front-end is- mobile first . The reason is simple. With the skyrocketing number of mobile Internet users, the products of various companies are mobile-first, and technology follows the pace of products, and mobile-first must also be mobile. At this time, in order to solve the problem of multiple platforms, the Hybrid solution stands out, including a series of technical solutions such as the traditional Hybrid solution based on WebView (such as Cordova) and React-Native. I won't say much here. Recently, the content of mobile front-end is flooded with various technical forums, exchange groups, and public accounts. For details, you can find out for yourself.
Finally, regarding the status quo, I think what everyone is most concerned about is actually the professional situation. Due to the rise of the front-end, the front-end talent market is quite active, and the average salary level is also among the best. At the same time, it is relatively easy to get started with front-end technology, causing another extreme situation: overwhelming staff and scarce talents. In this situation, on the one hand, due to the rapid development of the front-end, it is difficult to master all the knowledge in a short time; on the other hand, colleges and universities have not set up special front-end majors. The so-called heroes in troubled times, such a front-end environment may be more beneficial to a new student. Of course, in such "turbulent times", a good career plan can avoid "going astray" and ensure that oneself grows smoothly.
How to make a career plan
The above describes how the front-end emerged and the status quo of the front-end. Based on the above two points, the following will provide you with some perspectives on career planning in several aspects, and I hope it will be helpful to you.
Determine the direction
The purpose of career planning is to avoid confusion, and the most effective way to avoid confusion is to determine a clear direction and goal.
For any technical positions, there are two fixed direction: technical experts (architects) and development manager . The former focuses on technology and requires you to study deeply in the current field; the latter focuses on management and requires you to have a deep grasp of technology while leading the team to complete project development. Of course, the two are not the relationship between fish and bear's paw, you can become a technical expert and development manager at the same time.
The choice between technical experts and development managers depends more on your own dopamine secretion at work. When you specialize in technology, you will secrete more dopamine and feel more excited. Perhaps you will easily become a technical expert. Conversely, when you do business with a team, you will secrete more dopamine and feel more rewarding. You can try to develop in the direction of a development manager.
Of course, you may not secrete too much dopamine in anything, so you can change to other professions, such as product manager, after trying for a while. The front end is the core of the user experience. The engineer who is closest to the user and the transformation product manager will have less obstacles. Moreover, Zhang Kejun, head of Douban Frontend, a literary front-end evangelist, believes that front-end engineers are slowly evolving into product engineers , and the front-end and products are indeed very close.
After you choose a direction, you have to move in that direction step by step. In "Ten Thousand Hours of Genius Theory", Daniel proposed the ten thousand hours law, that is, to become an expert in a certain field, one needs to accumulate ten thousand hours. Of course, this is just an estimate, but it is definitely the most effective to spend more time on learning and practice every day. Here, in the process of becoming a technical expert and a development manager, the points of concern are slightly different. To grow as a technical expert, you must pay more attention to the realization of the technology itself, including logic, architecture, design patterns, methodology, etc.; while growing as a technical manager, you must pay more attention to the process of technology development and consider how to improve development efficiency and reduce development costs , Optimize development quality, etc. Different people have limited energy, and selective attention to some necessary aspects is necessary for their own rapid growth.
Do business or do architecture
Do business, time requirements are relatively tight, code quality requirements are high, there are more codes that can be referenced, business knowledge needs to be learned. Doing the architecture requires a little free time, requires relatively high experience, no reference code, and a deep understanding of professional basic knowledge; the most important thing is that you are both a developer, a user, or a PM, only 80%-90% of the architecture Clarify the goal, and continuously fine-tune the final goal during the development process.
For a newcomer, in fact, do not tangle, doing business is a good choice , but to do high-tech , using the popular technique of business is the best. The reason is simple. The ultimate goal of the architecture is to solve the problems in the business. If you have not done business before, how can you know where the business problems are? You don't know what problems you want to solve and how to do a good job of the architecture. Therefore, starting from business is the best choice for newcomers and the only viable choice. The reason for choosing a business with technical content and using popular technology is more about growth, so that your growth may be faster and your growth path may be straighter. Of course, this is only "possible", different people for different business, so do not insist on certain "high-tech, using the popular technique" of business, but more change themselves to adapt to the team , to adapt to the business , so as to more Grow fast .
In fact, many times, you will encounter a situation where the business is very heavy and there is no extra time to study. And how to grow faster in such an environment? It means "copy" No, it is a reference . Integrating learning into work is the best way. For new projects, refer to the code of the old project; for new requirements, refer to the code of the old requirement; if there is no code of the same type, refer to the code of other businesses. With reference to the experience of predecessors, growth will only become faster on the shoulders of giants. At the same time, your mentor and your partner will also give you pointers in the business and help you quickly solve the problems on the road to growth.
Here, to sum up, the rapid growth in the heavy business environment, you need a very good learning ability , very durable patience and a good mentor and partner , in order to do more with less in the way technology growth.
Technical learning
After talking for a long time, the most important question is, how to learn technology for a newcomer? The advice given by the author is: don’t swallow the dates, first learn the current technology thoroughly and use it thoroughly, which is the most important thing ; don’t learn new things before you fully understand the current technology, regardless of the new How popular is this thing. As mentioned above, different frameworks have different cores and different ideas. The ideas of the similarities between the two framework codes are not necessarily similar. For example, Angular and Vue both have two-way binding. Although the effects are similar, the implementation ideas and internal implementation methods are completely different. As you are still in the introductory stage, your mind will be flooded with all kinds of thoughts, but you will be less clear.
After some time, when you thoroughly understand a system architecture, you can analogy to see more architecture system. At this time, you will find that many things in different architectures have reached the same goal by different paths, and they are understood very quickly.
Of course, to understand an architecture system thoroughly, some people need a year, some people need three years, and some people may take longer. Why is there such a big difference? Because some people don’t think it’s enough to complete during development, they will pursue the beauty of the code during development, and will continue to optimize their code to make their code performance better and more readable. accumulation, reaching quantitative cause qualitative level. Even a particularly smart person cannot be "qualitatively changed" without "quantity", but his quantity may be less than other people.
One thing to remind is that to learn technology, you must combine the technology stack of your company and team. For example, Qunar's front-end fresh graduates will have 3 months of off-the-job training before entering the business line. The technologies involved in the 2017 front-end training course are mainly React and React Native, and the technology stack of Qunar's business is mostly React, then as a front-end freshman of Qunar, you can give priority to learning React's technical system to get twice the result with half the effort, both predecessors can ask, and there are projects to practice.
Of course, while studying architecture, do not ignore different from the most basic things, one is the technical foundation , it is a development specification .
Technical foundation is the prerequisite for all development and architecture. Without a good foundation, it is impossible to make your own technical level reach a high enough dimension. For example, you do not have a thorough understanding of inheritance, and it is difficult for you to understand clearly the internal implementation of React.
Regarding the development specifications, the author pays special attention to let them comply with the new students. Code specifications are everywhere, but few people strictly follow them. The reason is that before the code specification is formulated, you already have your own set of coding habits, and it is difficult to change your habits in a short time. For fresh graduates, generally speaking, there is not much code, and they have not formed their own coding habits. At this time, starting to comply with certain norms will encourage them to develop a better coding habit and lay a solid foundation for subsequent growth. Below, I will list some of the advantages of developing specifications to let everyone understand the importance of code specifications:
standardized code can promote teamwork.
Standardized code can reduce bug handling.
Standardized code can reduce maintenance costs.
Standardized code facilitates code review.
Develop the habit of coding standards, which helps programmers grow up.
If you are self-taught web front-end, give the following suggestions:
1. According to your own situation, plan a reasonable study plan, study time, study content, and practice time.
2. System web front-end learning tutorial
3. More practical, more hands-on, more practice
4. Review the knowledge points a week. If you don’t review and deepen your memory, I promise you will continue to forget the previous ones.
5. Find a professional person for guidance. Don’t be whimsical and think that you can learn by yourself without a teacher. This is unrealistic and irresponsible to yourself.
6. Persist in uninterrupted learning every day, and be prepared to spend half a year learning the front end. Now the competition is big, and it is difficult to get a job if you do not learn well.
7. Ask someone who knows better about the pitfalls in the front-end of learning, avoid too many detours, and master the learning methods
Self-study route:
Basics
HTML, Css, JavaScript, jQuery are a basic front-end must be mastered, relatively simple, but also entry-level technology.
Advanced
Bootstrap, TypeScript, JSON, jQuery EasyUI, jQuery UI and other third-party js libraries. Slightly difficult, you can get a basic understanding in the early stage, which is convenient for interviews, and then you can use it at work to study.
Advanced
Vue, React, and Angular are the three main front-end frameworks, familiar with one and understanding two. Learn about server language node.js, version management tools, git, svn.
Main battlefield-mobile hybrid development
With the rise of the mobile wave, business demand for mobile apps has rapidly expanded, and the frequency of iterative updates of applications has also risen rapidly. At the same time, the development and update costs of pure Native have become an insurmountable bottleneck for business growth. Therefore, it is imperative to introduce a solution that develops more efficient and lower cost.
In the current mobile Internet environment, the App on iOS and Android has become the standard configuration of every Internet product. If a client product does not provide the corresponding App version, it will almost directly be defined as an incomplete product. And the "fast but not breaking" that is respected by Internet people as the iron law-rapid development, high-speed iteration, low-cost launch, is also the goal pursued by every development team in the mobile era. Based on the above two reasons, the Hybrid development model of "Native builds a platform, Web sings a play" has won everyone's favor with its "fast" characteristics, and a lot of development efforts have been invested in making this development model quickly popular. There are currently three most common technical architecture solutions:
Web-based Hybrid solutions: such as WeChat browsers and 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 is
based on Web UI, but in order to pursue operational efficiency, display logic and business to the UI Logical JavaScript is an isolated solution: WeChat applet
For a front-end, I feel that everyone must understand the implementation methods, advantages and disadvantages of these three common solutions, so that they can be more aware of what they need to pay attention to and learn when developing mobile-end services. Of course, it is not enough to just understand the implementation method, you need an environment to practice what you have learned. Take Qunar as an example. Qunar now has most of its services on mobile terminals, and both Hybrid and RN solutions are being used. Therefore, as a freshman, you are likely to do some Hybrid or RN projects. When doing Hybrid projects, you have to consider "how to efficiently operate Dom"; on the contrary, when doing RN projects, you have to consider more "how to reduce communication with Native". These two points will ultimately be reflected in the user experience of the project.
Here, there will be a question, I am just a front-end, do I need to learn Node? The author's answer is required . The front end has risen for many years, and it has gradually changed from the stage of guerrilla shooting and shooting into an era of scale and engineering. In this era, especially in terms of tools and processes, Node has played a big role and played a very important role. Tools such as Webpack, Gulp, and NPM are used in various front-end projects of various companies. Learning Node is actually to learn front-end tools and front-end engineering.
I am currently working in front-end development. If you want to learn front-end development technology now, and you encounter any questions about learning methods, learning routes, learning efficiency, etc. during the process of getting started learning front-end, you can apply to join my front-end Learning exchange skirt: front: 42137 back: 4697 . It gathers some beginners who are self-learning front-end, changers, and beginners. There are also some front-end book PDFs, front-end interview questions, front-end development source code tutorials and other PDF documents and book tutorials that I have compiled. .