introduction
Under the trend of large front-ends, the traditional front-end development model can no longer carry the actual project requirements well. Therefore, we need a series of solutions to make the project canonical, configurable, easy to optimize, etc.
This article will briefly analyze this problem, explain the concept of front-end engineering, implement it, and give a series of solutions.
This article is written by myself to promote the company's internal front-end engineering in 2020. Based on the original text, the details, business scenarios and reasons have been shortened. It can be read for front-end development who do not understand front-end engineering, so as to achieve To understand the purpose of engineering, more detailed content needs to be consulted and studied by yourself.
1. What is front-end engineering
Front-end engineering is a method and tool that applies software engineering-related methods and ideas to front-end development, thereby improving front-end development efficiency, improving product quality, reducing development difficulty, and reducing company costs.
Front-end engineering runs through all stages of the entire front-end project, including code specification, process specification, branch management, program development, front-end and back-end joint debugging, automated testing, application construction, system deployment and monitoring, operation and maintenance, etc.
2. Why use front-end engineering
With the continuous development of front-end technology in recent years, more and more complex services are placed on the front-end, and the front-end is no longer a simple combination of HTML + CSS + JavaScript.
The complexity of the business leads to an increase in the amount of front-end code, so the reliability, maintainability, and scalability of the front-end code, as well as the performance and development efficiency of the front-end application have become important issues. Front-end engineering came into being to solve these problems.
The advantages of front-end engineering include:
- Improve teamwork efficiency and reduce communication costs.
- Achieve better collaboration and reduce duplication of effort for developers and testers.
- Improve code quality and maintainability, and reduce common issues with releases.
3. Separation of front and rear ends
The separate development of front-end and front-end provides soil for the development of front-end engineering. With the ever-changing market demand, front-end development has changed from the traditional Webpage model to the WebApp model, which constantly promotes changes in the work content of front-end engineers. In response to these changes, the company's technical department should design a methodology for front-end development.
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 front-end development and front-end and back-end collaboration.
4. How to implement front-end engineering
The first step in implementing front-end engineering is to clarify the division of labor between front-end and back-end development, laying the foundation for the separation of front-end and back-end.
The front end is mainly responsible for the following:
- Handling of static and dynamic resources
- JavaScript implements front-end business logic
- Output of HTML template files
- Middle-tier web services, generally implemented by Node.js
- Front-end unit tests
- Front-end project deployment
Among them, static resources include js files, css files, pictures in various formats, media files, etc. These files do not depend on the server and only need to be parsed in the browser; dynamic resources refer to HTML templates, if the project is not completed by the server For rendered SPA (Single Page) applications, it is necessary to consider how to implement the rendering of HTML templates. Front-end project deployment refers to the deployment of static resource files on the test server and the deployment of HTML template files on the Node.js middle-tier server.
5. Solutions
Normalization constraints
Canonical constraints are critical for both server-side development and front-end engineering. Formalizing constraints improves teamwork, reduces maintenance costs, and facilitates code reviews. It mainly includes document specification, tool specification, quality specification, code specification, UI specification, project structure specification, git commit specification, etc.
project build
Project construction converts all source code in front-end development into code that the host browser can execute. The content that needs to be compiled includes JS code that cannot be directly recognized by the browser, CSS code that cannot be directly recognized by the browser, HTML template code that cannot be recognized by the browser, etc. The build tool can implement optimizations such as dependency packaging, resource embedding, file compression, and adding hash fingerprints to improve front-end application performance.
javascript compilation
The role of Babel is to convert the ECMAScript specification syntax that is not implemented by the browser into a runnable low-level syntax. In this way, front-end engineers can use the new ECMAScript specification more freely without worrying about compatibility issues.
CSS precompilation
The CSS precompiler provides convenient syntax and features for developers to write source code, and then convert the source code into CSS syntax through compilation tools. In this way, a more efficient and modular style of CSS programming can be used during development.
Modular development
Modular development addresses issues such as naming conflicts, dependency management, performance optimization, maintainability, and code reusability. The ES6 Module specification has gradually replaced the traditional modular specification, and the compilation of the ES6 Module specification is realized through construction tools.
Component development
Component-based development is to split the UI from the design level. Split the UI into components, each component contains HTML templates, CSS styles and JS logic. Through component development, code reuse and modularization can be realized, and code maintainability and scalability can be improved. Each element on the page is regarded as a component, and the page itself is also a large component, composed of multiple small and medium-sized components. This method of splitting and assembling conforms to the "divide and conquer idea" of front-end development.
Development Environment and Mock Service
In order to improve development efficiency, the dynamic construction of front-end code can be realized by combining local server and construction tools. The local server can monitor the modification of the source code, and once there is a modification, it will trigger a dynamic build, eliminating the need for manual build steps and improving development efficiency. In addition, the Mock service can simulate the back-end interface to assist in the writing of front-end logic and the development of functional modules. Front-end engineers can use Mock data for development first, and then switch to real interfaces after the development of back-end interfaces is completed, so as to realize parallel development of front-end and back-end.
Project deployment process
Project deployment is the process of deploying the code package produced by the front-end build to the test server. The deployment process should be simple, clear, and configurable. Taking into account teamwork and security factors, the best practice is to build a deployment platform that can provide strict review, queue control, and simplified operations, and have a dedicated person responsible for the progress of the process.
Front-end engineering support
When implementing front-end engineering, you can choose an appropriate front-end language and framework, such as CSS precompilation solutions such as LESS/SASS/Stylus, and JS modularization solutions such as AMD/CommonJS/ES6 Module. At the same time, front-end UI frameworks (such as Layui, Bootstrap, Element UI, etc.) and MV* frameworks (such as Vue, React, Angular, etc.) can be selected according to project requirements.
optimization
Optimization is an important aspect in the front-end development process. Code optimization includes on-demand loading, lazy loading, code reuse, avoiding global variables, using event delegation, compressing resources, using auto-completion tools, etc. Non-code optimization includes reducing the number of HTTP requests, using CDN, using cache and other measures, which can improve the performance and user experience of front-end applications.
Front-end testing
Testing is an indispensable part of front-end engineering construction. Through unit testing and integration testing, bugs can be found and resolved early and development costs can be reduced. Automated testing tools can be used for unit testing and integration testing, such as Karma + Mocha + Chai, etc.
build, deploy
With the help of tools such as Node and Webpack, the automated construction of the front-end code can be realized. Automated construction can include steps such as code inspection, unit testing, language compilation, dependency analysis, packaging, compression, and replacement to improve development efficiency. Automated deployment can be achieved through tools such as Jenkins and Docker.
Performance and Error Monitoring
Monitoring is the last link of front-end engineering construction. Through the monitoring system, you can understand the operation of the project in the production environment, and the development team can adjust and optimize the project according to the monitoring report.
epilogue
Front-end engineering is the trend of front-end development, which can improve development efficiency, reduce costs, and improve code quality. However, when implementing front-end engineering, it is necessary to carry out customized selection according to the actual situation of the project, and choose tools and frameworks reasonably. Optimization and testing are non-negligible parts of engineering, and they are critical to improving application performance and stability.