Summary
Front-end engineering can be divided into four aspects, namely modularization, componentization, standardization and automation.
Modular
Modularization refers to splitting a file into multiple interdependent files, and finally performing unified packaging and loading, which can ensure efficient multi-person collaboration. Which contains
JS modularity: CommonJS, AMD, CMD and ES6 Module.
CSS modularization: Sass, Less, Stylus, BEM, CSS Modules, etc. One of the problems that both the preprocessor and BEM have is style coverage. And CSS Modules manage dependencies through JS, which maximizes the combination of JS modularity and CSS ecology, such as the style scoped in Vue.
Resource modularity: Any resource can be loaded in the form of a module. At present, most of the files, CSS, images, etc. in the project can be directly processed through JS for a unified dependency relationship.
Componentization
Different from modularization, modularization is the separation of files, code and resources, and componentization is the separation of the UI level.
Usually, we will need to split the page, split it into parts one by one, and then realize the parts one by one, and finally assemble it.
In our actual business development, we need to consider the splitting of components to different degrees, including the two considerations of fine-grainedness and versatility.
For business components, what you need to consider more is the suitability of the business line you are responsible for, that is, whether the business components you design become the "universal" components of your current business.
Normalization
As the saying goes, there is no rule without rules, and some good specifications can help us to carry out good development management of the project. Standardization refers to the series of specifications that we formulated in the early stage of project development and during development, which also includes
- Project directory structure
- Coding standards: For the constraints of coding, we generally adopt some mandatory measures, such as ESLint, StyleLint, etc.
- Joint Commissioning Specifications
- File naming convention
- Style management specifications: currently popular style management methods include BEM, Sass, Less, Stylus, CSS Modules, etc.
- git flow workflow: including branch naming conventions, code merging conventions, etc.
- Regular code review
... etc.
automation
From the earliest grunt, gulp, etc., to the current webpack, parcel. These automated tools can save us a lot of work in automating merging, building, and packaging. And these are only part of front-end automation, front-end automation also includes continuous integration, automated testing and other aspects.