introduction
Although I have only worked for 3 or 4 years since graduation, I have done everything: front-end Web, mobile Android, back-end .NET, and even embedded. But what I like most is the Web front end. I like graphics, animation, interaction, and the ability to render quickly given by HTML, CSS, and Javascript. I like that the front-end of the web allows me to realize my own needs, and I like the ability of the front-end of the web to be closer to the visual and artistic aspects, so that I can make some animations, games, etc. that I like.
I think I still have a little research on the front end of the web, from the initial native HTML, CSS, Javascript, to the framework React, Vue, Angular, to the drawing technology Canvas, SVG, to the back-end node and so on. I also have fun while I'm working, and writing web pages doesn't tire me out. But some recent events and realities make me doubt whether what I'm doing is worthwhile.
One is the slowdown of personal growth. Basically, I already have the skills required for work, and I don't have any problems with general work. But I just do some work that most front-end web engineers can do: call interfaces, render data, fill out forms, and send requests. One of the few jobs that excites me is data visualization, but relatively few.
The second is that there are a lot of voices that "the front end is dead" in the market. Due to the economic downturn, many companies have laid off employees. The web front-end is easy to be replaced because of the low threshold, and a large number of web front-end programmers are unemployed. So I thought, although I am currently not at risk of being laid off in the company, my irreplaceability is actually very low. If there is any trouble in the future, will I be the first to be fired.
The third is the explosive development of AI technology. The emergence of models such as GPT makes it possible for AI to replace people in certain positions, and GPT-4 can directly generate web page code from design drawings. Many people have doubts about whether their positions will be replaced, and I can't help it. Although I think the upper limit of the web front end is high, not all companies need such cutting-edge web front-end technology. If it comes to the day when AI replaces human beings, where will I go.
These are some of my recent concerns that got me thinking:
What is the value of the web front end?
Am I a qualified web front-end engineer?
If I am no longer working on the front end of the web, what can I take from it and bring it to a new field?
I wanted to clarify these issues, so I did some thinking and summarizing, and wrote some articles.
I like the web front end and I love programming. Even if one day I have to give up being a Web front-end engineer, I hope that I leave because the environment does not accommodate me, not because I am not a qualified Web front-end engineer. I hope that when the market no longer needs Web front-end engineers, what I have learned in this field will allow me to better enter another field.
Like JQuery, usage has been declining, but its ideas have led to an era of programming methods that have subtly influenced Web standards. It is not eliminated, but retired after success.
What is a Web front-end engineer
What is a web front-end engineer? In layman's terms, it is the person who writes the web page.
But before becoming a Web front-end engineer, you must first be an engineer, then a software engineer, and then a Web front-end engineer.
engineer
Wikipedia defines engineers as follows: Engineers are those in the professional field of engineering who use scientific knowledge to harness technology to solve practical problems and make a career out of it [1].
Engineering is usually a series of work to achieve a certain requirement, and the word "problem" reveals the essence of an engineer very well. Because generally speaking, projects are not easy to complete, often accompanied by a series of problems. At this time, engineers are required to try their best to solve the problem and complete the project with limited resources.
So, in layman's terms, an engineer is a problem solver .
software engineer
Following the above definition, it can be deduced that a software engineer is a person who realizes software engineering. Generally speaking, a software engineer is a person who solves problems in the software field .
In traditional projects (such as civil engineering), the engineer is usually not the specific operator of the project (the real operator is the construction worker), but the designer and planner. In the software field, software engineering can also be divided into engineers and programmers, that is, software engineers understand requirements, build frameworks, and define systems, and programmers do specific programming work. In large projects, it might be true. However, because the software field is light in size and requires few fixed resources, especially for the Internet software industry, a company may not have many people, usually a small team for software development. Therefore, in these projects and teams, there is no distinction between engineers and programmers, that is, the designer and programmer of the software are one and the same.
At the same time, for this generation of programmers, the ability to cross jobs and disciplines is almost indispensable. A programmer must also learn engineering, system and other knowledge in order to develop better. Therefore this article does not distinguish between software engineers and programmers.
Software is not only the goal of software engineers, but also the means of software engineers . Therefore, the programming ability, system knowledge, and thinking methods necessary to complete software are the core skills of software engineers.
Web front-end engineer
A web front-end engineer is a type of software engineer. The Web in the traditional sense usually refers to software running on a browser (such as Chrome). The characteristics of this software are:
The resource is fetched from the server
run in a sandbox
Rendering relies on the browser instead of directly using the operating system's API
These characteristics make the Web have many limitations, such as running in a networked environment and not being able to access local files, etc., but it also creates its greatest inherent advantage: cross-platform. As long as there is a browser, the web page can be run. In the early years there may have been issues of differences between browsers, but with Blink and Webkit almost dominating the browser market and IE's entry into the soil, Web standardization (W3C) has become more and more popular (at least for now). Therefore, front-end engineers only need to focus on the browser most of the time. Compared with other software (such as mobile terminals), the trouble caused by the differences in the underlying system is much smaller. On the non-desktop side, cross-platform development methods such as Hybrid and Electron have also emerged.
Therefore, a Web front-end development engineer is a person who solves problems with software running in a browser according to Web standards .
Front-end engineer
So far, I have got a popular saying of a Web front-end engineer.
Now expand the concept a bit, remove the Web, what is a front-end engineer? The "front-end" here is relative to the back-end server. In the past, there was no distinction between front-end and back-end. A request starts from the browser, goes to the back-end server, and returns data to the browser. It is all completed by the back-end program. But as demand grows, the complexity of Web pages increases, and browser performance improvements lead to the emergence of single-page applications (SPA), back-end programmers are quickly overwhelmed. So the front-end and back-end separations appeared. Of course, the benefits of front-end and back-end separation [2] are not only to reduce the load on the back-end programmers, but this is not the scope of this article, so it will not be described.
With the development of the front-end, the requirements for front-end engineers are getting higher and higher, and there are more skill requirements for front-end engineers. That is to say, compared with the back-end, the technology and thinking of front-end engineers are beginning to be more and more different from those of the back-end. mainly reflects in:
Good art aesthetics and user interaction experience
Compatible with different device display methods (desktop, tablet, mobile phone)
Data-aware (data visualization, audio and video playback)
From these perspectives, engineers who develop desktop, mobile, and embedded software should also belong to front-end engineers, and the current trend is moving in this direction. Many cross-platform tools have emerged, such as Flutter and Reactive Native. In other words, the interface that directly deals with users may be the work of front-end engineers .
From the content point of view, the current front-end is no longer simple text and pictures, and it is not just audio and video and other media, but is developing in a multi-dimensional interactive direction, such as games, VR, and complex applications on the web. (such as Office), 3D, etc.
The role of a web front-end engineer
The job of a web front-end engineer is to write web pages. From an engineering perspective, this work includes:
Understand the requirements and build the system framework
Organize the resources needed by the system (such as UI resources, interface resources, deployment resources)
Write program source code, translate or compile the code into a program usable by the browser
Guarantee program compatibility and performance requirements in browsers
Deploy the web program to the server
Monitor and collect logs, optimize web pages, and fix errors
The front end is constantly evolving, and the requirements for engineers are getting higher and higher. The trend of front-end engineering in the last 10 years has made Web programming more mature and perfect, and various tools and frameworks are emerging in an endless stream. Therefore, web front-end engineers should not only be satisfied with outputting web pages, but also care about the tools they use to develop web pages. It is also the old saying: If a worker wants to do a good job, he must first sharpen his tools. including but not limited to:
Source code transcompilation and packaging tools (such as Webpack)
Web standards and browser compatibility plugins (like Babel)
Code editors and related plugins (such as VSCode)
Browser and related plug-ins
Web application deployment server (such as Nginx)
Analyze requirements feasibility and development resources
Web front-end engineers need to understand requirements. Of course, understanding requirements is not the job of front-end engineers alone. Product managers and other programmers work together. In this step, front-end programmers play a very important role in judging the feasibility of requirements, that is, judging whether a function point can be implemented in the browser and whether it can meet the performance requirements .
This is important for both products and projects. If a certain function cannot be realized, then the product manager needs to consider whether to modify or abandon this function, or find another way to realize the function indirectly through a detour. If the function can be implemented, but requires a lot of R&D investment or development time, then the project manager needs to take this risk into consideration.
If the requirement can be realized, then it is necessary to evaluate the time required to complete the requirement, point out the resources necessary to realize the requirement, and then further communicate with the colleagues of the specific work. If there is a risk in the realization of the requirements, it should be raised in time to facilitate the project manager to adjust the arrangement, or discuss with colleagues to explore possible solutions.
In order to do this well, Web front-end engineers are required to have these abilities:
Communication skills: Grasp the key points, refine the main points, listen to the needs of the other party, and put forward your own needs.
Follow the development of Web standards and learn new knowledge and technologies.
Fully understand the functions of browsers, know what browsers can and cannot do, and the limits of what browsers can achieve.
Understand the limitations of browsers in different environments (for example, browsers in mobile phones may have performance and network speed problems).
Abstracting requirements into code structures translates concepts from the real world and the UI domain into concepts from the programming domain. Can subconsciously think of how the requirements should be realized, and what existing solutions and existing codes can be referred to.
Produce requirements-fulfilling, performant, and user-friendly web pages
The output of Web front-end engineers generally includes the following:
Single-page application: The page content is generated by Javascript at runtime and the state is managed by itself, and the data is obtained from the background.
Server-side rendering application: The page content is directly generated by the server and sent to the browser along with the document, usually designed for SEO[3].
Progressive Web Application (Progressive Web Application, PWA[4]): An application that resides in the browser and can be used offline.
If it is promoted to front-end engineers, then desktop GUI software and mobile applications may also be the work of front-end engineers. For front-end engineers, these software are usually implemented with web-based cross-platform construction tools, such as Electron and Webview. Of course, you can also use self-contained tools, such as Flutter.
Realizing functions and reducing errors are the most basic requirements for web pages, and then we will talk about performance and experience.
performance
The performance of web pages mainly refers to the fluency of web browsing, including:
The time between jumping from the page to displaying the main content is short.
The time it takes for a web page to react after a user click or other interaction is short.
When the content of the webpage changes, it does not change abruptly (that is, it does not freeze in general).
For a detailed study of these indicators, you can refer to Google's Web development website [1] .
To do this, engineers need to be aware of codes and operations that may consume a lot of time, and find ways to reduce redundant operations and improve efficiency. Generally speaking, the computing-intensive work is usually done by the background server, but with the development of Web Application, more and more products regard the Web as a platform that can complete work independently , which brings more benefits to Web front-end engineers. Many challenges.
Available methods are:
Use browser development tools [5] to check and optimize performance-intensive code.
Cache large data (stored in memory, LocalStorage, IndexDB, etc.).
Use Web Worker to run high-consumption programs concurrently.
Reduce the size of resource files and reduce packaging redundancy.
to experience
A web page is an interface for people to browse, so the operation method of the web page should conform to human cognitive logic, the style should conform to human aesthetics (except for artistic innovation), and the interaction method should respect human feelings .
To meet these requirements, a web page needs to:
The page needs a certain focus control, that is, it should highlight the key parts, and at the same time guide the user's focus to flow in different parts, there are trade-offs, and it should not be too complicated.
All operations performed by the user (such as clicking, hovering, scrolling, loading, etc.) should have feedback, and the feedback methods include but are not limited to: normal processes, notifications, style changes, etc.
For large-scale content changes (such as pop-up boxes), there should be animations for transition.
Elements that recur on a page, have the same meaning and are always consistent.
Save the user's current operating state, and when the page jumps back or performs other operations that change the state, the state that should be saved (such as list position, form filling) can be automatically reproduced.
Although Web front-end engineers belong to programmers, they are more of ideal thinking, but they should be on par with UI designers, have a certain level of aesthetics and design thinking, and understand basic colors, composition, etc. For this aspect of knowledge, you can refer to the "Design Book for Everyone" [6].
Furthermore, front-end engineers can learn software commonly used by preliminary UI/UX designers (such as Photoshop, Figma, etc.) to better control art resources.
Well-written code and continuous optimization of web pages
After implementing the requirements, engineers need to care about the attributes of the code beyond functionality and performance. In these respects, good code should have the following characteristics:
Good readability: In order to communicate with colleagues, and to be able to understand it by yourself in the future.
Extensible and easy to modify: in response to the rapidly changing needs of the Web.
The expression here is based on programming habits and multi-person collaboration in actual work, rather than code specifications and design patterns in the traditional sense. There are many books you can refer to for good code specifications and design patterns, such as "Design Patterns: The Foundation of Reusable Object-Oriented Software" [7] and "Refactoring" [8]. Because the content is very large, it will not be expanded here.
Writing a web page is not a one-time job, even after the web page has been published, there is still a lot or more work to be done:
Fix bugs reported by users or actively detected
Optimize web page performance
Improve code structure
Upgrade technology stack
build infrastructure
Although there are not many tools needed to write a web page, a computer will do. But in order to work more efficiently, Web front-end engineers need some infrastructure , just like the real highway, with which goods can be transported to various places.
In order to work efficiently, software engineers have thought of many methods. Don't forget that software is both an end and a means.
frame
Modern web applications usually don't write Javascript from scratch, but use frameworks and tools (such as React, Vue, Angular, etc.). These tools have greatly improved work efficiency, but on top of these frameworks, Web front-end engineers also need a framework based on the company and their own business. Based on React, Vue or Angular, this framework adds common UI building libraries, including common business codes or libraries, as well as packaging and deployment codes suitable for business. The purpose of doing this is to save the time of repeatedly building projects and packaging and deploying. The business of some companies may require web front-end engineers to continuously create projects as the work progresses. If the above-mentioned content can be generated with "one-click" at this time, it will save a lot of time and avoid repeating the previous mistakes. Mistakes and pitfalls.
Such a framework can also be said to be a template, put it in the Git repository, and fork it when using it. Or put it in a private NPM warehouse and use npm init <executor>the command [9] to create it.
CI/CD
The Web usually needs to be updated frequently, and the newly modified code packaged files are placed on the server, that is, deployment. For example, the general update process is as follows:
modify the code
packaging code
transfer code to server
restart server
In the past, steps 2, 3, and 4 were all done manually, that is, packaging on the developer's computer, manually copying to the server, and manually entering commands to restart the server. Doing so is not only tedious, but also error-prone. Hence, Continuous Integration/Continuous Deployment (CI/CD) [10] emerged. It automates the steps from packaging code to restarting the server, and it is all done on the server. All the developer needs to do is push the code.
This part of the work usually requires the help of operation and maintenance engineers, but as a software engineer, this part just needs to be understood, and it is best to try it yourself.
Private NPM
As mentioned earlier, web front-end engineers often need to share code between different projects. One method is to use Git submodule (Submodule), that is, to store a sub-warehouse in a Git warehouse, and the sub-warehouse is managed by its own Git, which is independent of this warehouse. But this method is actually not suitable for large-scale code sharing, because it needs to coordinate the version relationship between various projects, and Git is actually not good at this matter. It is more common to use NPM. If the company has security concerns, it can build a private NPM server on the company's intranet.
For creating and uploading NPM packages, you can refer to the official NPM documentation [2] .
surveillance system
Even the top web front-end engineers will inevitably have errors and performance problems in the web pages written. These problems or negligence that are difficult to detect during development may appear in various environments of actual users. Therefore, web front-end engineers need to collect logs from the user side, including:
page error message
Performance information (load time, first screen rendering time, interface latency, etc.)
Interface call information
Page running environment (device, browser, network conditions, etc.)
User Info
These logs can not only analyze and debug errors after users report errors, but also optimize pages with poor performance.
This set of systems includes two aspects, the monitoring program running on the client browser, and the collection and analysis program running on the server. There are mature solutions on the market, such as Alibaba Cloud ARMS, or you can build them yourself. For example, after writing a program [11] to collect information at the front end, use the free Elasticsearch + Logstash + Kibana [12] solution or Loki + Grafana [13] solution in the background.
A Web Front-End Engineer's Toolkit
If a worker wants to do a good job, he must first sharpen his tools. As an engineer, a web front-end developer needs a lot of tools, preferably the ones he is familiar with and commonly used, and at the same time, he can configure the ones that are most suitable for him. Such a set of tools forms an environment that engineers have at hand in the studio.
code editor
There are not many software tools needed to develop web pages, a code editor and a browser are enough. But with the development of web front-end content forms and programming methods, and in order to work more efficiently, a good code editor can often achieve twice the result with half the effort.
Every programmer has his own favorite editor, but in order to achieve the above-mentioned effects of "suitable for himself" and "ready to use", it is best for the editor to be able to install plug-ins and synchronize configurations.
Taking VSCode as an example, it can install various plug-ins, ranging from language Lint, debugging tools, code beautification, resource preview, etc. At the same time, it supports logging in to Github or Microsoft accounts to synchronize plug-ins and settings between different devices . In this way, programmers can use their most comfortable editor to program in different working environments.
If some functional code editors are not implemented, and there are no ready-made plug-ins, you can try to write plug-ins by yourself [14].
browser extension
When web front-end engineers debug web pages, the available methods are breakpoint debugging and console log output, in addition to browser extensions.
Modern web development frameworks (React, Vue, Angular), etc. all provide browser extensions to display the status of components, member variable values, routing information, etc. in the current page, which is very intuitive. Some tools can also set the value of variables in real time, and the page can immediately respond to changes, which is very convenient.
In addition to frameworks, some well-known libraries also provide development extensions, such as Three.js. On the mobile side, if there is no extension, you can rely on NPM libraries such as vConsole[16] to simulate a development console like a desktop browser on the mobile side.
Similarly, if the off-the-shelf extensions do not meet the requirements, you can also develop your own.
personal notes
The Web front-end is an interdisciplinary field that involves a wide range of knowledge. No matter how good a person's memory is, there are always situations where he suddenly can't remember a certain knowledge point. Especially in the era of rapid technological development, knowing something is more important than remembering its details. Because we can record the details in notes and look them up when needed.
For example, NPM has many useful libraries, and programmers can tag and take notes on used and useful libraries. When needed, query the notes and use the corresponding library.
There are many software that can take notes, such as Evernote and Youdao Cloud Note, and their free functions are enough. If you feel that it is not safe to put it on the manufacturer's server (the manufacturer has the risk of running away), you can also record it on your own computer, and then use Git to synchronize to the remote warehouse. When you are working in the company, you can browse the notes on the web .
Furthermore, since we are web front-end engineers, we can develop a web page by ourselves and store it in a place such as OSS to meet our requirements for browsing and editing notes.
About this article
Author: Hydrogen Lingzi
https://juejin.cn/post/7214512376669372453