preface

With the rise of the Internet, on the one hand, it has changed our life and improved a lot of convenience. With the rise of many professions, the front-end is no exception. The rise of the front-end engineer in 2005, followed by the shift from PC to mobile in 2010, meant the era of the big front end had arrived. And because of Adam Smith’s division of labor, each aggregated position was divided more specifically.

Software engineer

The word we hear a lot is “programmer” or “coder”, but a more technical word is “software engineer”, and they really have changed the world. Software engineers are divided into interaction, system, algorithm, data analysis, testing, operation and maintenance. Interaction is to write page display and interaction, system is to write interface logic, algorithm is intelligent recommendation, data analysis is to guess what you like, big data analysis, testing is to test bugs, operation and maintenance is to manage the server. Take Taobao APP for example. First of all, you will see different tabs (such as “Home page”, “Message” and “mine”). Clicking on each TAB leads to a different interface — users can see it and click on it, which is interaction. Then, when you click TAB, the App sends the request to the server. After receiving the request, the server does the corresponding calculation and sends the result back to your phone. The whole process is supported by the system. Then, algorithms underlie the flow of information you see on the front page, such as specific content recommended by the system. The App will also collect the type and frequency of goods you click and analyze them to guess the content you like, which is data analysis. Unit test, performance test, security test and so on should be done before each App release (new version), which is the testing part. Once the App has a server or network failure, relevant maintenance needs to be done, which is the operation and maintenance part.

Front End engineer

Comparison at home and abroad

In the United States, they don’t think of front-end engineers the same way we think of front-end engineers, they have UI engineers, front-end engineers, middle layer engineers, back-end engineers, yes UI engineers, not UI designers, UI engineers write HTML, CSS, front-end engineers write JavaScript, The middle tier is responsible for linking the front and back ends. At home, front-end engineers write HTML, CSS and Javascript and then handle debugging on the back end. This means that front-end engineers need to have a relatively wide range of knowledge, the ability is also relatively high requirements.

The front-end knowledge

The front end of the update iteration quickly, a lot of knowledge has no time to learn the new content out, let you catch off guard. From the past Jquery and Bootstrap era to the present React, Vue, Angular era, PC side, mobile side, small programs, NPM, webpack, Git, browser, HTTP and so on. It takes a lot of time to understand so many concepts, so how to classify them and organize them according to their own situation? The content of the front end is divided into basic and practical parts. The basic part includes HTML (language, element), CSS (language, function), JavaScript (runtime, grammar, semantics), browser and API (implementation principle, API), while the practical part includes performance, tool chain, continuous integration, building system, architecture and basic library. Then we will introduce each knowledge point according to these classifications and combine with the actual situation of their own body to sort out and learn.

The engineer

Regardless of the front end, we are also engineers, which means we need to have some of the capabilities of engineers. A front-end engineer needs to have three basic skills: programming ability — to solve hard problems, architecture ability — to solve big problems, and engineering ability — to solve people problems. Difficult questions tend to be logically complex, which can be strengthened through logical separation and deliberate practice. So now you know why the interviewer builds a plane and turns the screws in the job interview. The interviewer is to test your potential and programming ability. The big problem is to solve complex system analysis, multiple collaborative management, you may be able to do all the pieces of a large system well, but you can’t put them together, and the architectural capability is there. The human problem is more about code specification, how to reduce cost communication, write clean code, and of course other parts, which are not well understood at this stage.

extension

Whether you are active in the community, whether you introduce new content into your system, and then the best way to learn is to export, whether you often share what you have learned, or whether you teach others what you know within the team, are the embodiment of your own ability.

collaboration

As far as I am concerned, the front end needs to cooperate with the four job lines, including design, product, back end and test. Communication and exchanges are indispensable between them. How to minimize these costs is also a test of your ability. What is your aesthetic situation, interaction do how, to understand how many product logic, considering how much for the back-end logic, the generation of defects is less, the perception of the user experience is a what kind of degree, are indispensable, is often reflected in its efficiency, the ability from the professional and technical ability of concrete, But it also plays a more critical role.

The direction of

Front end engineers are mainly divided into three directions: componentization, tool chain and continuous integration. Componentization, libraries: some reusable code, components: elements of the UI that occur multiple times, modules: blocks that repeat business, such as logins. Toolchains, project initialization, startup, build, test, and release are all customized to meet your company’s requirements. Continuous integration, preview environment (whether the iteration release of each version is compatible in each environment, whether there will be problems, need some management), rule verification, page structure scanning, runtime data collection, code scanning and so on.

The development of

A person’s development also needs certain motivation, achievement, promotion, growth are complementary to each other. Achievements generally fall into three categories: operational achievements, engineering achievements, and technical problems.

Business achievement

Engineering achievement

Technical problems

Write in the last

I hope all of you can write code like poetry and become an excellent front-end engineer. There is a long way to go. I will pursue it up and down.