An advanced guide for a qualified front-end engineer! Come take a closer look

1. Front-end engineering is a necessary skill for modern front-end

The rapid evolution of the web front-end in recent years has been staggering, and many front-end engineers can't help saying that they can't learn.

This is no longer an era where HTML, CSS, and JS front-end three swordsmen take the world by the sword.

Taking personal experience as an example, I entered the front-end field around 2011. At that time, the main content of the work was to convert the design draft into a static page, and then use the jQuery plug-in to achieve some page carousel, marquee and other interactive effects.

Finally, use the back-end template languages ​​such as Smart and Velocity to add page logic to the static page, and the code is handed over to the server classmates to complete the online. Throughout the process, the JS framework is mainly jQuery, CSS at most use Less.

Let's take a look at today's front-end working methods, taking the Kuaigou taxi front-end team as an example. The front-end development framework is mainly Vue, and uses Webpack to solve the entire process of interface mocking, code inspection, code compilation, construction, compression, version number addition, and deployment.

The technical points involved are Vue, Vuex, ESlint, stylelint, Mock, Webpack, Sass, PostCSS, etc. The requirements for the front end have changed from pure JS and CSS issues to more engineering-based issues than a few years ago.

Front-end engineering is a big topic, and even now there is no accurate definition. Personal understanding of front-end engineering is: "All means and tools that can improve the efficiency of front-end development and improve the quality of front-end applications are front-end engineering."

2. What problems does front-end engineering solve?

In the front-end field is becoming more and more prosperous, more and more complex today, what benefits can we learn from front-end engineering?

1. Greatly improve development efficiency

The evolution of front-end engineering can greatly improve development efficiency. Since the development of the front end, a large number of excellent frameworks and tools have emerged in the community, which can free the front-end engineers from the heavy work.

For example, to bind a click event to a dom element, using pure JS may do this:

With the introduction of jQuery, it's a lot simpler:

If in Vue, it is simple and clear:

If there are a large number of event bindings, but there is no support for development tools, there will be a lot of repetitive code to be written, and it will be a headache to think about it, and its low efficiency is evident.

2. Reduce the development difficulty of large projects

First, modularization and componentization are advocated in front-end engineering.

The idea of ​​modularization breaks down the functions of large projects and splits them into individual modules. The development difficulty of each module has plummeted. At the same time, based on the version control tool Git, multiple developers can develop in parallel to improve development efficiency. During the later iteration of the project, because each module is relatively independent and the coupling is extremely low, the adjustment of a function often only needs to modify one of the modules, and the risk is controllable. There will be no situation where a code change will cause a global problem.

Second, front-end engineering advocates the use of perfect process specifications and code specifications to ensure the quality and maintainability of large-scale applications.

For example, through ESlint, stylelint to automatically verify the code, through the review, detailed design, development, joint debugging, testing, on-line control and other links to ensure the high quality of the project and timely delivery. Merge code into the main branch must go through code review. Process specifications ensure the quality and maintainability of large projects while being delivered on time.

Therefore, the application of front-end engineering projects can often better avoid risks, spread process pressure, and reduce development difficulty.

 

3. Easier to be favored by interviewers

The front-end job skills have undergone profound changes. Some people even joked about being a front-end engineer as a front-end configuration engineer.

Fouber once said in his blog post: "The front end is a software development field with fewer technical problems and more engineering problems."

I vaguely remember that the front-end interview questions six or seven years ago were probably this style: "How to achieve horizontal and vertical centering?" "What is the principle of js event delegation?" "What are the common CSS hacks?", "$ (Function ( ) {}) What is the difference with window.onload? "

The interview questions encountered today are probably in this style: "Can you explain the principle of Vue's two-way data binding?", "How to configure Babel in Webpack?", "What is the difference between promise and await / async?"

The level of attention to interview questions has been very different.

If you want to work in a large company, front-end engineering is the basic quality you need to have. The business of large companies is often very complex and requires extremely high stability. The corresponding front-end engineering degree is very high, and various supporting infrastructures are very mature.

For example, Meituan reviews systematic engineering solution, mobile component library Vix, automated testing tool Freekite, Hybrid functional experience solution Titans, etc.

To be favored by large companies, candidates need to have a deep accumulation in the field of front-end engineering. I am a front-end engineer who has been working for five years. I have compiled a most comprehensive front-end learning material. From the most basic HTML + CSS + JS to HTML5 project practical learning materials are organized and sent to every front-end partner. For those who want to learn the web front-end, or change careers, or university students, and those who want to improve their abilities at work, they are learning partners who need to be able to chat with me privately. Three] [Nine Eight Five] [Nine Nine Three], download directly in the group, you can ask me any questions (learning methods, learning efficiency, how to find employment) for learning the web front end,

3. Who needs front-end engineering?

Junior and Intermediate Front-end Engineer

Junior middle-level front-end engineers have less work experience, and the breadth and breadth of the technology are not enough. It is certainly difficult to master front-end engineering as a whole. So for this group of students, the first thing to learn is to "use" and understand the principles step by step.

For example, in addition to development, learn how to implement a simple scaffolding tool by yourself, understand how the scaffolding necessary for daily development is realized, and learn the technical points used in it in a point-by-face manner.

Front-end engineer looking forward to promotion

Front-end engineering capability is also a must-have skill for a senior front-end. I have been working for many years. If I do n’t know much about front-end engineering or even a basic scaffolding, how can I lead the team? If you go to participate in the promotion of the company, it is not convincing.

If you want to improve T, you must have a profound accumulation and contribution in efficiency and performance optimization.

So no matter what stage you are in, it is extremely necessary to have a deep understanding of front-end engineering.

Published 20 original articles · Likes2 · Visits 596

Guess you like

Origin blog.csdn.net/jinmu520/article/details/105406638