Original article: Weishanshan

It was the best of times, it was the worst of times; It was the age of wisdom, it was the age of foolishness; This is a time of trust, this is a time of doubt.


It was the season of light, it was the season of darkness; It was the spring of hope, it was the winter of despair. They have everything before them, they have nothing before them; People are going to heaven, people are going to hell.

— Charles Dickens, A Tale of Two Cities

Nowadays, it is no longer an era when only HTML, JavaScript and CSS can take the world by sword. Increasingly complex Web applications, frequently developed by dozens of people, and endless front-end technology stacks promote the deepening of front-end engineering step by step.

Front-end engineering in the final analysis is to improve the quality of all means or tools to improve the efficiency of the establishment of a complete front-end system. Of course, there is no absolute standard for this system. After all, what suits your team is the best.

Next, we will mainly introduce the front-end engineering practice of our team at the current stage.

The first step is to understand the three essential phases of front-end development.

Requirements Preparation > Development Implementation > Deployment onlineCopy the code

No more nonsense, first a system architecture map town building.

If you have any questions about this chart, please contact the author.

In short, the three main characteristics of front-end engineering are reusability, standardization, and automaticity.

reusability

The most obvious forms of reusability are modularity and componentization.

The name of the Pay attention to the point purpose
modular Emphasis on code logic Reuse, decoupling
componentization Emphasis on the differentiation of UI interface Angle Isolation and encapsulation

  

normative

Standardization refers to a series of standards formulated to ensure code quality, reduce individual differences and later maintenance costs, and improve the efficiency of collaborative development.

1. The git – flow specification

Lables: Tags provide an easy way to categorize problems, or based on descriptive headings (such as bugs, features, documents, or any other text). They can have different colors, descriptions, and can be seen throughout the issue tracker. Renamed: Milestones are a valuable tool for tracking the progress of achieving this goal. From milestones, you can view the status of issues, merge requests, contributors, and open and closed issues for each TAB. Branch: when there is a new requirement, a requirement branch is sent out from the master branch. The branch naming rule is p_# ID. Note: ID is the ID of the Issue created for the requirement. Commit: label and associate issue. Git commit -m [type][#id] CodereView: Create mergeRequest and assign it to code ReviewerCopy the code

2. Project structure specification

Cz-chanelog: Git commit to submit format build folder: package configuration mock folder: use mockjs mock data repository SRC: assets: picture, style, and so on the unified repository components: the public component repository directives: Mixins store: vuex utils: Public methods store: views: vue page app.vue: HTML: template file index.js: mount routes.js: route configuration fileCopy the code

3. Design specifications

4. Interface specifications

5. Coding specifications

JS coding specification ->ESlint specification, CSS coding specification, image specification etcCopy the code

6. Single test specification

7. CodeReview specification

Code specification classes, syntax usage classes, and so onCopy the code

automaticity

Any repetitive work done by a simple machine should be done by a machine.

1. Project construction stage

One-click project scaffolding. (Support vue/ React + Webpack, SSR template, TS template, Mock, etc.)Copy the code

2. Construction phase

Code translation: that is, precompilation, refers to the automatic conversion of high order JS syntax ES6+, TS, etc. Less/SASS syntax automatically compiled into CSS, etc. Performance optimization: module merge: Analyze dependency files and merge synchronized dependent code. File Splitting: Reducing file size. Common examples are Code Splitting and Code Splitting. Chunkhash fingerprint: Resolves static resource update problems caused by browser cache and all file cache invalidation problems. Happypack multithreaded packaging and other file monitoring: automatic browser refresh, etc.Copy the code

3. com MIT stage

Code inspection: automatic inspection and standard code; Unit test: automate single test cases to ensure functional reliability.Copy the code

4. Deployment phase

Project deployment: One-click deployment platform. (Automatic allocation of machines, one-click deployment of projects.)Copy the code

In general, front-end engineering is an idea. Any architecture, any strategy, are only aimed at the current engineering practice. With the development of The Times and the maturity of the technical framework, front-end engineering is bound to penetrate deeper.

If you have any questions about this article, please contact the author.