The birth of Nodejs brings a second prosperity to the front end, which enables the front end to go deeper into a broader field (multi-end and back-end). Seeing the front end running has entered a new stage, front-end er is more concerned about how to improve the development experience, so front-end engineering has to be mentioned here.

Engineering in the traditional sense

In a broad sense, engineering refers to a highly systematic, modular and standardized process in the completion of a system. A collection of materials, tools, and methods used to implement a system more efficiently through various tools and specifications. In this sense, engineering involves knowledge and technology in various fields.

Front-end engineering

Every time I interview for a front-end, I always ask “what do you think about front-end engineering? Or what do you understand?”

This may be too general a question to be a good one, but it can lead to deeper thinking about the front end now. First of all, do we just use VUE or React to complete the business logic every day, without thinking about the whole workflow of the front-end and the technologies, tools and methods involved?

  • Why can we divide pages into components?
  • Why does it work when we use modern frameworks for developmentnpm startTo start the development service?
  • Why can we modify a file at development time so the page can be updated immediately after saving it?
  • Why can we use it when we packnpm run buildTo build the code we write and generate front-end packages that can be deployed directly
  • How can we automatically deploy to the development environment or other environments after we package?

Pulling the question back, most interviewees will answer that front-end engineering is Webpack, and then cloud around webpack. Most front-end ER would equate engineering with the build tool WebPack, because WebPack has a lot to offer for development:

  • Provide us with a development service that allows us to see the effect of the page as we develop
  • Providing hot updates allows us to modify the code without restarting the service or refreshing the page to see the changes
  • It allows us to directly introduce static resources like images and so on

Looking back at our initial definition of engineering, WebPack did make our development more efficient and improved our development experience, but it was not enough.

Based on the understanding of engineering mentioned above, the engineering of the whole front-end engineering should be a systematic, modular and standardized tool set. The purpose of these elements is to enable us to efficiently complete front-end development. Then, we take the VUE project created by VUE-CLI as an example:

  • First of all, VUE is a componentized project. Pages and components can be divided into modules one by one. Thanks to ES6, we can use export and default to realize modularization and componentization.
  • In the project we started a development service that could support hot updates
  • CSS preprocessors such as SASS can be introduced, and static resources such as images can be used
  • Operating environments can be distinguished: development environment, test environment, and production environment
  • Package deployment, etc
  • These are all webpack capabilities that allow us to develop and improve performance and focus on development itself
  • There are also development specifications, git commit specifications, that can be constrained by tools (ESLint, stylelint, CommitLint, etc.)
  • After development, we will have other tools to support the test and launch part
  • CI/CD systems for Continuous integration and continuous deployment (Jenkins, GitLab CI et al.)
  • Automatic test system, etc

Through the above analysis, it is found that Webpack is not equal to front-end engineering, which also includes specification formulation, workflow formulation, automatic testing, continuous integration and delivery environment, and these tool sets constitute our front-end engineering.

Engineering is not equal to a tool, can be regarded as a systematic framework, under the rules to improve efficiency, reduce costs, ensure quality.

Engineering scheme

Nodejs makes today’s front-end ecosystem more and more rich. It can not only do Web services, but also support and carrier of front-end tools. The webpack discussed above is based on Nodejs runtime. Engineering is a collection of tools. In fact, it is more commonly understood that all means aimed at improving efficiency, reducing cost and ensuring quality belong to engineering. For example, every time git version information is automatically added to the front-end package, we can write a Webpack plug-in or node script to execute after the package is completed, which is also a manifestation of engineering. To sum up

  • Webpack is a tool for front-end engineering
  • Nodejs and Webpack build the core of front-end engineering solutions
  • The development of ES6 laid the foundation for front-end modularization
  • Optimizing with existing tools (optimizing development experience, optimizing package time, optimizing package results) is also an engineering tool
  • All repetitive things should be considered and solved from an engineering point of view

For a typical front-end engineering scheme, there are roughly the following items:

  • Create scaffolding for your project (VUe-CLI, create-react-app, etc.)
  • Webpack, Vite and other building tools provide me with development experience
  • Use tool constraints for coding style (ESLint, stylelint)
  • Use tool constraints for code management (Husky, CommitLint)
  • Workflow formulation
  • Some libraries even have plug-ins and scripts that automatically generate Changelog and upgrade version information
  • Other configurations
  • CI/CD, etc., are involved in the entire process of software delivery

The last

The above are some of my thoughts, due to personal experience and technical limitations will certainly be biased, I hope we can communicate with each other, at present, the front end has entered a deep water area, do you choose to be an application developer or want to make achievements in a certain aspect? It depends on whether we are able to think more on a daily basis.