What do you need to learn to become a good front-end engineer?

What is a front-end engineer

Front-end engineers are an indispensable professional R&D role in software product development in the Internet era. In a narrow sense, front-end engineers use HTML, CSS, JavaScript and other professional skills and tools to implement product UI design drafts into website products, covering the user PC side , mobile web pages, dealing with visual and interaction issues. Broadly speaking, all parts of user terminal products related to vision and interaction are the professional areas of front-end engineers.

In 2005, most web pages looked like this:

The current web page generally looks like this:

What are the development paths and prospects of front-end engineers?

Front-end is a relatively new industry. In the early days of the development of the Internet (1995~2005), there were no professional front-end engineers. With the development of the Internet, starting from about 2005, the role of formal front-end engineers was recognized by the industry. By 2010, the Internet began to fully enter the mobile era. The status of front-end engineers became more and more important, and the technical development in the front-end field also became more and more important. Fast, various new ideas, design patterns, tools and platforms are developing rapidly, and the skill requirements for front-end engineers are getting higher and higher.

There are some data that illustrate the rapid development of the front-end industry.

● Quite a few of the most popular new programming languages ​​after 2010 are related to the front end, such as Dart, Clojure, CoffeeScript and TypeScript.

● As the most important front-end programming language, JavaScript has been firmly on the list of popular programming languages ​​on the Github platform in terms of code volume and attention in recent years.

● The demand for front-end in the industry continues to increase, and the salary of front-end programmers is in a leading position in the industry.

Many of the most popular programming languages ​​in recent years are JavaScript alternative languages

JavaScript is in the TOP10 of the hottest programming languages

##Internet companies in recent years The front-end team doubles every year

The average salary of JavaScript engineers ranks in the top 10 of programming language engineers

What kind of knowledge and skills do front-end engineers need?

Some people say that the technology stack of a front-end engineer is like this:

Others say this:

In fact, the core skills of front-end engineers are:

In the product development process of a typical Internet company, the relationship between front-end engineers and other roles is roughly like this:

The front-end is the engineer closest to the product and design, and plays a role in connecting products and technology. The front-end is responsible for the parts that users can see, so it is also the engineer closest to the user.

In the era of multi-terminals, if a product supports both PC and mobile terminals, front-end engineers need to deal with more roles:

JavaScript For the front-end, it is the most important skill, so an excellent front-end engineer must have solid basic JavaScript skills. The JavaScript programming language is also a hot favorite in the field of programming. Today it is not only used to develop the Web, but can also be used in various aspects. （JavaScript video tutorial）

##JavaScript can be used on "Raspberry Pi" Development of this type of smart hardware chip

Front-end engineers are also software engineers, so the basic knowledge of software engineers is also very important. These basic knowledge include:

● Mathematics

● Computer system

● Operating system

● Data structures and algorithms

● Compilation principle

HTML and CSS are also very important basic skills for front-end engineers. Many students, especially those who like to write code, tend to ignore Markup Language. In fact, ML is also a very important content in UI-related fields and should not be ignored.

● HTML: The Living Standard (

HTML video tutorial)

● HTML & CSS (

CSS video tutorial)

Some students asked: "There are many demands for front-end work, and there are always changes and changes. There are not many actual technical points. The product determines the business logic. Will working on the underlying basic services be more challenging and have a better career future?"

Indeed, the closer it is to the work at the business and product level, the greater the difference in demand and the more frequent the changes may be. It’s not just the front-end that changes over and over again, students doing business on the PHP server also face this problem, and the business logic changes over and over again. The lower the layer, the more versatile it is, and there are relatively few changes.

However, everything has two sides. First of all, you can think about whether the market for underlying basic services is bigger or the market for Internet businesses and products is bigger. Secondly, the universality of basic services is easy to achieve, but how to universalize it at the product level and how to use engineering and tooling to improve development efficiency in business-driven product development is actually a difficult problem. Rich Internet products have changed and are changing our lives. However, as product creators, how engineers can make themselves better off is an area worth studying.

In addition, don’t think that there are not many actual technical points. Here are a few examples: implementing curve and surface animation, calculating the shortest path of the map, making png static pictures perform local movements similar to gif pictures, lottery games, and HTML5 games with physical effects. , 3D charts, augmented reality WebGL video stream processing, etc., these are all practical problems encountered in the front-end field.

As far as JavaScript is concerned, designing the most appropriate model to efficiently solve real-world problems in actual projects is very challenging in itself. As a typical new-generation programming language, JavaScript is rich in features, flexible in use, and has excellent performance. Object-oriented, functional programming, various design patterns, MVC and MVVM are attractive enough in their own right.

The front end must solve interface and interaction problems. In fact, problems at the UI level have always been a difficult problem in software engineering because the UI is constantly changing. The compatibility of various browser versions, Web standards, mobile devices, and multi-terminal adaptation have given front-end engineers great challenges and also have high requirements on the capabilities of front-end engineers. Many UI problems have more than one solution, and many problems have very clever ideas and wonderful solutions. Front-end is a very creative group among engineers, because this industry requires rich creativity and imagination.

Front-end engineers are also the setters, practitioners and promoters of Web standards, and the current W3C standards are not limited to browsers, but also include various handheld smart devices, vehicle-mounted devices, smart homes, etc. In the future era of the Internet of Everything, front-end engineers will not only be engineers on web pages, but engineers in all fields of human-machine interaction.

Learning and growth of front-end engineers

The front-end field is developing rapidly, and various new technologies and new ideas are constantly emerging. This is a good phenomenon. However, the rapid development of the front-end also brings some problems. For example, a classmate asked me what exactly I should learn,

Angular.js, React, Node.js, ES6, ES7, CoffeeScript, TypeScript... It seems that there are always too many things to learn, and some things seem to be replaced by other new technologies and become "outdated" before they are fully understood.

In fact, it is still the same sentence, Front-end engineers are first and foremost software engineers, and the foundation is the most important. If the foundation is not solid, all application skills will be "clouds". What are the foundations of the front end? Basic skills in HTML, CSS, JavaScript, basic skills in mathematics, algorithms, data structures, operating systems, and compilation principles.

An excellent front-end engineer must have a field that he is good at and delve into it deeply enough. At the same time, he must have a vision and be able to "cross-border". You can take front-end as a career, but don't limit your skills to the front-end field, because there are many things that can only be seen more clearly and thoroughly by standing outside the front-end.

When learning something, don’t blindly follow the trend. When everyone is talking about AngularJS, you will immediately go to learn it. After a few days, everyone will be talking about React, so you will put down AngularJS and go to learn React. There are many knowledge points in the front-end field, and there are many things worth learning. Smart students know how to spend time learning systematic knowledge and study it deeply enough, because only in this way can we summarize the rules and form a methodology, so as to maximize the value of learning.

knowledgeable Correct usage - A master in one field will never be a rookie in another similar field

During the interview, the interviewer asked how to optimize front-end performance. Some students were able to answer clearly using Yahoo's military rules for performance optimization. They repeatedly emphasized the use of tools to compress static resources, but the nginx service of the blog they built did not enable gzip. . Everyone knows that static resources should be merged and HTTP requests should be reduced. However, why should HTTP requests be reduced? How much performance is expected to be improved and how much benefits can be obtained after reducing requests? You need to understand these issues, and you also need to have a deep understanding of the HTTP protocol itself.

There is a more interesting question. Everyone says that the key to writing HTML is semantics, so what exactly is semantics? This problem stumped many students. Tags must be semantic. This answer seems simple and standard, but what kind of tags are semantic? Emphasis on using strong instead of b? So if there is an alien civilization, and in their language strong is equivalent to earth's bold, and bold is equivalent to earth's strong, then should they use strong or b? We say that the i tag means italics, so why does fontawesome.io use it as the icon font tag? Is this "anti-semantic"?

In the past, there was a kind of folk dyeing workshop in rural areas in many places to make dyes for dyeing cloth. There is a large iron vat in this kind of dyeing room. Usually a very strong worker takes a long iron rod and hits it hard inside the dye vat. The louder the knocking, the darker the color of the dye produced. Bright. Why does the dye get better the harder you hit the iron vat? People in the dyehouse say that this is an experience passed down from generation to generation, and in fact it is true. The color of the real dye has a lot to do with the force of the knocking. Until one day, a college student who went out to study chemistry from the village figured out that just adding an appropriate proportion of iron filings to the dye could cause a chemical reaction between the dye and iron-containing oxides to make the dye more vivid. It turns out that the "rituals" passed down from generation to generation are actually just a kind of belief and religion in the face of real principles. Likewise, if we don’t understand the nature of technology and stop at its application, then we are just followers of the religion of technology. Therefore, in "Li Yanhui Javascript Video Tutorial", it is said that computer language is like a magic staff in the hand of a priest. If the magic staff is changed, the priest is still a priest, and the world will still knock its head like a mountain. The priests mastered the method of communicating with God, but the world only saw the staff.

Select the front end by interest

When I first learned programming, I learned the C language. However, this entire book did not only teach me how to output Hello World and various other characters on a black console, or input something on the keyboard and still output characters. , there is nothing else. After studying for a period of time, my heart collapsed for a while, because I felt that this was different from what I thought. After learning so much knowledge, I didn’t know whether I had “learned” the C language, because in my It seems that there is obviously a huge gap between those colorful operating systems and various application software and the black hole consoles.

In retrospect, my idea at the time was of course naive and ridiculous. At that time, I didn't know the difference between programming languages ​​and running environments, and I had no idea about operating systems, user APIs, hardware interfaces, network services, etc. However, this cannot be blamed on me, because the C language tutorial does not tell me this in a single word, and I do not know what else I should learn next after learning the grammar of C language.

Relatively speaking, Web development is more attractive to me, because you don’t need to install any environment. You only need to enter some characters in the text editor, save it and open the browser, and you can immediately see the rich visual effects. This is the advantage of the front end. Your efforts are immediately visible.

Compared with rigid input and output, Web development is much more colorful on the visible layer of the interface, which attracts me. If this also attracts and fascinates you, then you are suitable for learning front-end.

Before choosing front-end as a career, you must clearly determine that you are indeed interested in front-end development. Choosing to be a front-end should be to confirm that you like and are suitable for front-end, not for a job that looks decent and pays well. If you are not interested in, or even bored with, building colorful interfaces and dealing with various interaction logics, then the wisest choice is to give up the idea of ​​becoming a front-end engineer - because you choose a career you don't like and endure it for decades until Retirement is really a sad thing.

What abilities do we value for school students?

Some students asked whether front-end students must have practical experience. Here I can answer: no.

For students, interviewers are more concerned about:

● Basics: including mastery of mathematics, algorithms, data structures, and computer-related basics.

● Learning ability and learning methods: how to learn the front-end, how long you have studied, to what extent you have learned, what problems you have encountered, and how you tried to solve these problems.

● Interest: How interested you are in the front-end. This can be reflected in many details. There is a common negative example. Generally speaking, I will ask students what new front-end knowledge they are paying attention to recently. Some students will say that I pay attention to so-and-so. But when I ask him again to what extent he pays attention, I will find that he actually pays attention to it. Not much time was spent on this new knowledge at all. If you don't spend time on the issues you are interested in, how can you prove your "interest" in the front end.

● Problem-solving ability: How to solve difficult problems, how to think about and finally solve problems that you have never encountered before. From here you can judge whether students have front-end thinking. There are no standard answers to these questions. We do not pursue certain "official ideas" and value the process rather than the results.

Regarding resumes, some students mentioned that many companies now seem to hope that students can learn Node.js and React, but I don’t know what to do myself.

What I want to say is that we do not require students to know these. On the contrary, I personally encourage students to use their time to lay a solid foundation. Just write what you are really good at on your resume. We won't ignore you just because you don't see Node.js or React on your resume. As long as you really love front-end and learn it carefully, you should understand how to impress me with front-end basics. Some students like to pile up vocabulary on their resumes. In fact, this is not necessarily a good thing, because if you write something that you know only a little about, and you are finally interviewed during the interview, you will definitely get negative marks.

The technology itself is in-depth. Student A said, "I know React but have never done anything with it." Student B said, "I have used AngularJS to write some small personal projects." Student C said, "I used elastic layout last month. I wrote my blog based on the idea, but a display bug appeared in the Webkit browser of version 4.1 of the Android system. In the end, I solved it like this." You think among the three students A, B, and C, which one will we choose?

The interview is a process of mutual communication. We hope to see everyone's ability and potential in the front-end field. "Knowing" one thing is not a valuable ability, especially in the Internet era where knowledge is cheap. Our students must not memorize something by rote like memorizing it, but should really study it with their heart. Our colleges and universities not only teach people knowledge, but also how to actually study and do research, don't they?

If you are really interested in front-end and have potential, you should know how to learn it with a little care.

Finally, I wish everyone can become an excellent front-end engineer.

Related links:
Web front-end learning route: Quick introduction to WEB front-end development