The article is based on my internal training and sharing in the company. It is more like an outline than an article. If you like, you can follow my Github homepage. If you have any questions, please feel free to comment at the bottom of this article or submit an Issue on Github

What is front-end engineering?

concept

Front-end engineering is a concept that has been put forward in recent years as front-end projects have become more and more complex. This concept is not new in software engineering.

From my personal perspective, front-end engineering is a way of thinking of front-end development, which is a solution to a series of problems encountered in the process of front-end development, such as componentification, software quality, maintainability, teamwork, development efficiency, testing efficiency, construction efficiency, automation, etc.

I suggest that you take a god-like look at the concept of “front-end engineering” and look at every aspect of the front-end team from above, and you’ll see that there is one core that runs through it all: efficiency.

Therefore, front-end engineering can be simplified as the improvement of front-end efficiency.

What is efficiency?

There are two types of efficiency: human efficiency (time latitude) and code efficiency (quality latitude)

  • Human efficiency: development efficiency, construction efficiency, automation level
  • Code efficiency: running efficiency, maintenance efficiency, testing efficiency

The next aspect of front-end engineering will revolve around efficiency.

Why front-end engineering?

To sum up, 👇 can be summed up in a word

Front-end engineering is to solve various efficiency problems in the process of front-end project development

Iii. What kind of capabilities does front-end engineering need?

Due to the many knowledge points involved, the following content is only a primer, all aspects involved can be consulted according to personal needs, not to expand here.

From the Perspective of human efficiency: Time latitude

Human efficiency is mainly affected by development efficiency, construction efficiency and automation level.

1. Development efficiency

Technology selection

Choose front-end frameworks such as React, Vue, Angular, Ember, Svelte, etc.

  • Team maturity, such as speed and ability to solve problems
  • Software maturity
  • Community activity
  • Software scalability
  • Software documentation friendliness
  • Software update speed
  • Some pit predictions (avoiding too new technology adoption? Can be used for experimentation, but not for large projects that are difficult to iterate on)
  • Relevant talent pool

By analogy, the selection of other libraries or software can be judged in the same way.

Code specification
  • Code writing specification
  • Git submission specification
  • Code review specification
The scaffold
  • Being good at evaluating, learning and using scaffolding can save a lot of time in building new projects, such as:create-react-app.vue-cli.taro.ewa ç­‰
Cloud development, low code, and no code development

A sharp tool for reducing cost and increasing efficiency.

  • Cloud development: Services such as Small Program Cloud development and Leancloud can reduce the dependence on back-end development and improve the efficiency of front-end development
  • Low code and no code: such as Baidu’samisLow code framework andnode-redNo code visual programming tool
Debug efficiency
  • Understand front-end debugging methods
  • Use tools such as sourceMap to view the source code
  • Use code checking tools such as Eslint

2. Build efficiency

Build tools
  • Old: Grunt, Gulp
  • Popular: Webpack, Rollup
  • New: Snowpack, Vite
Building efficiency
  • The above build tool configuration, hot update, build speed optimization, plug-in customization, etc., focusing on the hot and new build tools.

3. Automation level

  • Front end automation: Jenkins, Gitlab, Travis-CI, Github Actions
  • Optimize deployment efficiency and deployment process

From code efficiency: Quality latitude

The efficiency of code is mainly influenced by the efficiency of operation, maintenance and testing

1. Operating efficiency

  • Performance optimization: JS/CSS performance, memory consumption
  • Resource loading speed optimization (compression size, Gzip, CDN, lazy loading, on-demand loading, etc.)
  • Browser Rendering optimization

2. Maintain efficiency

  • Code specification
  • The document
  • componentization
  • Stratification, abstraction, decoupling
  • Code versioning

3. Test efficiency

  • Interface data Mock
  • Unit testing, functional testing, automated testing

Two final pieces of half-baked advice

  1. MDN is a good thing, nothing more than turn over the portal 👉
  2. Think more, do more, do not blindly follow (I said, is not necessarily right!

🔗 original address