360 Front-end Star Project-Analysis of Front-end Engineering (Tian Dongdong)

1. Front-end engineering?

1.1 Goal

In the front-end field, various solutions brought by continuous technological advancement and gradual accumulation of experience are used to solve various inefficient and cumbersome problems encountered in the development, testing, and maintenance phases of the project .

1.2 Technology

Engineering is a kind of thinking, and technology is a kind of practice. Technology will continue to evolve and change as the times progress. In different periods, there will be different technologies to carry and practice engineering ideas.
The implementation of ideas cannot be separated from action and practice. Although technology will be outdated, practice must be based on the present.

1.3 Reason

Front-end engineering is to improve efficiency. This improvement is reflected in the development, testing and maintenance phases of the project.

2. Focus on the front end

Focus on the front end: standardized / modularized / componentized / automated

2.1 Normalization

• Version management and development process specification
  -git: version management and code warehouse
  -gitflow: based on git to simplify operation, activity model to standardize behavior
• Writing specifications (script, style, directory structure)

2.2 Modular

Generally, there is CSS modularization / JS modularization.
Generally, logically related code is placed in the same file as the same module. In this way, you only need to pay attention to the internal logic implementation of the module, and consider variable pollution and other issues out of order, and the modules can call each other.

CSS Modular Solution: The core idea is to avoid conflicts through the rules of effective styles.

• scoped: add data-v-version attribute to DOM node
• css in JS: write styles with script modules, even encapsulated style modules can be called directly
• css modules: With pre-compilation, styles are called variables in scripts
• BEM : Block_Element-Modifier, according to the rules, hand-written css, and add the corresponding class in the module (Element follows the BEM specification, can use programmable css)

js modular solution: commonJs, ES module-loader specifications

2.3 Componentization

The core idea of ​​componentization and modularization is divide and conquer. The actual benefit is the improvement of team collaboration efficiency and project maintainability.

What is a component? The UI is mainly encapsulated as a component, such as the page header is encapsulated into a Header component; the logic is mainly, a function is encapsulated into a component.
We can call the highly cohesive and low-coupling package made by specific logic and UI as a component.

• Components that focus on UI packaging are not universal
• Components that focus on logic packaging, with high universality
• Components can contain components, such as partial UI components often contain partial logic components

2.4 Automation

The core idea: things that can be done automatically by machines are never made to be done. Automation is the core of front-end engineering.

• Automatic initialization, such as vue-cli
• Automatic build (packaging), such as webpack
• Automatic testing, such as karma, jet
• Automatic deployment, such as Jenkins

2.4.1 Automated testing

2.4.2 Automated deployment

2.4.3 Automatic initialization

2.4.4 Automated construction

2.4.5 Example: 360 search thematic page development tool

Use the CLI to specialize in project initialization and on-line release; configure the webpack project to meet pre-compilation needs; develop a webpack4-based plug-in to upload static resources to the company CDN.

Use webpack4 to build the project:

module.exports = {
	mode:'develpment',
	entry:{
		main:'./src/main.js'
	},
	output:{
		path:path.resolve(_dirname, '../dist'),
		filename:'[name].js'
	},
	module:{
		rules:[]
	},
	plugins:[]
};

Suggestions for project construction using webpack4:

• Differentiate the configuration of different environments.
  - webpack.base.conf.js
  - webpack.dev.conf.js
  -webpack prod.conf.js
• The plug-in accessories of the integrated tool are placed separately.
  - .babelrc
  - .eslintrc
  -.postcssrc
• The env configuration .browserslistrcfile is placed separately.