Article directory
(1) Know
The front-end engineering system is a kind of service, with the front-end development in the project iteration process as the main service object, involving development, construction, deployment and other links.
Front-end engineering is not a framework or a tool. It does not focus on a certain vertical research field or a special type of business, but an evolvable and scalable service. The goal of the service is to solve the front-end development and front-end collaborative development Difficulties and pain points, covering project initiation, development, testing, and deployment. Tools are the implementation medium of front-end engineering, specifications are the guidelines for engineering, and workflows are the external manifestations of engineering and the carrier of constraints and specifications.
A technical stack reference that a qualified front-end engineer should master.
The front-end engineer is the resource producer who carries all the functions of the user layer, not only the finished HTML/CSS/JavaScript and other resource products that the client finally presents to the user, but also the production pipeline of these resources from scratch to final output. all links.
(2) Two freshmen at the front end
Brendan Eich (the inventor of JavaScript) may not have thought that JavaScript, a scripting language whose first version was designed in only 10 days, would be so popular today. At present, JavaScript can not only develop traditional Web sites, but also span the development fields of mobile apps, small programs, and the Internet of Things. JavaScript has experienced two revolutionary breakthroughs, and these two breakthroughs have also brought two new births to the front end.
[1] The first freshman: AJAX
AJAX technology can realize asynchronous request and partial refresh, which has completely changed the interactive mode of traditional Web sites. The Web is not only a website for static display, but also an application program displayed by a browser and resources stored on the Internet. Taking this as an opportunity, Web developers began to explore and develop richer functions and elegant user experience based on AJAX technology. At the same time, users' demand for web applications is also increasing, which indirectly promotes the development of web technology.
[2] The second freshman: Node.js
The revolution brought about by Node.js is not only to allow JavaScript to enter the field of server-side development,More importantly, it enriches the ecology of JavaScript. JavaScript can do more and more things, and there is a wave of JavaScript learning in the industry, which accelerates the iteration of the ECMAScript specification to a certain extent.
(3) SPA (Single Page Application, single page application)
With the continuous improvement of the performance of personal terminal devices and browsers, web developers try to hand over the rendering and routing work to the client, and the server-side RESTFul API only provides the JSON data required to render HTML. This form of Web application is called SPA (Single Page Application, single page application)
【advantage】
·Reduce the resource consumption of the server. ·Compared with HTML documents, the volume of JSON data is much smaller, which reduces the time consumption of network requests. ·Fast and flexible page routing control. · Can be used offline.
【shortcoming】
The browser needs to wait for the JavaScript file to be loaded before it can render the subsequent HTML document content. While the user is waiting, the page is blank. This is the "white screen time" we often talk about when evaluating the performance of web products; secondly , due to the different programming languages of the client and server, there may be some differences such as data format differences, and even routing logic conflicts, such as the routing of vue-router history mode, these problems increase the difficulty of maintenance; finally, SPA is not conducive to conventional SEO .
(4) Separation of front and rear ends
From traditional websites to SPAs to isomorphic JavaScript, the work content of front-end engineers continues to increase, and the client-side logic continues to become more complicated. The original serial development process of front-end and back-end coupling can no longer meet the rapid iteration needs of web products, and web developers have begun to try to find more efficient ways of collaboration in all aspects of development, testing, and deployment. The separation of front and back ends seems to be the "silver bullet" to solve this problem.
As the name suggests, the so-called front-end and back-end separation refers to improving work efficiency through clear and reasonable division of labor between front-end engineers and back-end engineers, improving front-end and back-end collaboration that slow down development progress. The core of front-end and back-end separation is decoupling. From the three perspectives of development, testing, and deployment, the separation of front and back ends improves work efficiency as follows.
[1] From a development perspective, the purpose of separating the front and back ends is to achieve parallel development and shorten the development cycle.
[2] From the perspective of testing, the separation of front-end and back-end enables front-end engineers and back-end engineers to locate problems more quickly and accurately.
[3] From the perspective of deployment, the separation of front and back ends separates the deployment of static files and dynamic files and combines the rollback strategy, which simplifies the deployment process and enhances the robustness of the application.
(5) Front-end engineering
Metrics for front-end engineering
The main goal of front-end engineering is to liberate productivity and improve production efficiency. Through the formulation of a series of specifications, tools and frameworks are used to solve the pain points and difficulties in the process of front-end development and front-end and back-end collaborative development.
We analyzed the efficiency improvement of front-end and back-end separation from the three perspectives of development, testing and deployment. Since front-end and back-end separation are the guidelines for front-end engineering solutions, these three become important factors to measure whether the front-end engineering solution is qualified . The specific measurement standard is the three words we often say: fast, accurate, and stable.
Development speed is the most urgent improvement in Web product iteration, and it is also the main factor that creates conflicts between developers, product managers, project managers, and testers. Naturally, it is also the most intuitive and obvious standard for measuring front-end engineering solutions.One of the core goals of the engineering solution is to increase the speed of product development as much as possible under the premise of ensuring quality。
The "fastness" of testing is reflected in the integration testing stage after the parallel development of front-end engineers and server-side engineers is completed.
Deployment is the final phase of a full iteration cycle. After a long period of development and testing, all members of the team hope that their products can appear in front of users flawlessly at the first time. Deployment is not simply "putting" files online. It is also necessary to consider whether the cache of the user's client affects the display of the new version, consider the crisis handling when the test cases do not cover 100%, and consider the openness of different regions. version etc. If you want to steadily present web products to users, the last and most critical step must be taken care of in the deployment process.
Evolution of front-end engineering
Chaotic Form
We might as well putThis development mode of "writing demos on the front end, writing logic on the back end, and setting templates" is called "chaotic form".The background of this form is that the logic and interaction of web products are generally relatively simple. The professional position of front-end engineer has just emerged, but the work in charge is only the style and some animation logic. The collaboration between front-end engineers and back-end engineers is serial.
Separation of front-end and back-end forms
The key technology driving the first evolution of front-end development is AJAX. The advent of AJAX technology not only changed the interaction mode of Web pages, but also indirectly increased users' demand for Web products, thus promoting the continuous complexity of front-end logic. The chaotic form of server-side engineers responsible for front-end logic development has been broken, because server-side logic itself has a high degree of complexity, coupled with complex front-end logic, it is naturally overwhelmed. Therefore, engineers began to think about changing the original division of labor: front-end logic, style and HTML are all developed by front-end engineers. This is a key step in giving birth to the germination of front-end engineering.
【Problems in the current situation】
The ES specification at the development level
is inconsistent with browser compatibility.
Weak programming ability of CSS.
Resource location.
Image compression/base64 embedding/CSS Sprites.
Module dependency analysis and compression packaging.
Part of the JavaScript logic at the collaboration level
depends on the interface API.
Deployment level
Some resources need to be deployed with the help of back-end engineers.
One word is mentioned repeatedly in the description of development-level problems-tools. Developers use a variety of professional tools to solve corresponding needs, such as using Babel to translate ES specifications, using LESS/SASS compilation tools to perform precompiled syntax translation, and using r.js to solve AMD module compression and packaging, etc. Integrate and unify the functions of all tools into a standardized tool stack (please note that it is not the integration of tools, but the integration of functions), which is the first step in front-end engineering: construction.
The addition of the construction process has improved the unilateral work efficiency of the front-end engineers. The next step is to think about how to improve the efficiency of the overall team, that is, the problems encountered in the process of front-end and back-end collaborative development. The most typical is that the front-end logic depends on the implementation progress of the back-end interface. This serial workflow has a great impact on the development progress. Therefore, the first thing to bear the brunt is to solve the problem of parallel development by front-end and back-end engineers.
The local development server is not a tool, but a real web service. The most typical application of the local server is the Mock service, which solves the front-end JavaScript’s dependence on the data API by providing mock interfaces and data, thereby realizing parallel development of the front-end and back-end. specification.
also,The combination of local server and build function can provide functions such as dynamic build and automatic browser refresh, which further improves the work efficiency of front-end engineers. At this stage of front-end engineering development, we have solved the problems at the development and collaboration levels, leaving only deployment at the end.
Let's imagine this scenario: there is a bug in the front-end code, and the front-end engineer still needs to trouble the back-end engineer to deploy it after fixing it. Front-end bugs can sometimes be as small as the pixel level, and even the smallest bugs need to be fixed by front-end and back-end engineers, which is very inefficient.Therefore, the basic principle of optimizing deployment is to ensure that the repair of unilateral problems does not require the mobilization of resources from multiple parties. The specific solution is to separate the deployment of static resources and dynamic resources. The separate deployment of dynamic and static resources can decouple the deployment behavior of front-end and front-end engineers, and the two can independently deploy their own output. Reducing coupling work improves iteration and maintenance efficiency. At the same time, separate deployment of dynamic and static resources is also a necessary strategy for web application architecture optimization.