Frontend Engineering System from a Process-Oriented Perspective

1. What is Frontend Engineering?

A similar term is Software Engineering (Software Engineering):

Software engineering is the systematic application of engineering approaches to the development of software.

Systematically applying engineering approaches to software development is called software engineering. Then, there are two follow-up questions:

What are engineering approaches?
How to understand systematically?

Engineering refers to using scientific principles to design and manufacture machines, structures, etc., such as building bridges, laying roads, constructing tunnels, making cars, building houses:

Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.

Specifically in the software field, it refers to developing, operating, and maintaining software with systematic, rigorous, and quantifiable methods, software engineering includes the application and study of these approaches:

Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.

The so-called systematization can be understood as these engineering methods used in the software lifecycle being complementary, each solving part of the problems, working together to ensure software quality, delivery speed, etc.

In summary, frontend engineering can be defined as systematically applying engineering approaches to frontend development, to develop, operate, and maintain frontend application programs with systematic, rigorous, and quantifiable methods.

2. Evolution History of Frontend Engineering

Looking at software engineering first, its development history has experienced these key points:

Abstracting computer hardware into Von Neumann architecture, thus having the distinction between software and hardware
With the rise of software complexity, the concepts of modularity and information hiding were proposed
To understand and manage the software development process, software engineering became a professional field
To evaluate the capabilities of software development teams, maturity measurement standards (CMMI-DEV) were formed
Based on modern software engineering best practices, a generally accepted software engineering knowledge system was established

Frontend engineering has also experienced a similar process:

B/S architecture rose, thus having the distinction between frontend and backend
With the rise of frontend complexity, module reuse and [practice standards](/articles/前端优化：雅虎 35 条/) became increasingly important
To manage and simplify the frontend development process, frontend frameworks, [automation](/articles/js 自动化/), [build systems](/articles/grunt 教程/) emerged and developed rapidly
Based on industry best practices, out-of-the-box frameworks (such as dva), tool systems, etc. were gradually established

Frontend is becoming heavier, complexity is getting higher, and the supporting frontend engineering system is also continuously developing and improving, which can be simply divided into 3 main lines: development, build, and release:

Frontend frameworks: plugin-based (jQuery) -> modular (RequireJS) -> component-based (React)
Build tools: task-based (grunt/gulp) -> systematic (webpack)
CI/CD: tool-based (Jenkins) -> automated (Web Hook)

The three main lines support the frontend engineering system, systematically covering the main process of frontend development, and the engineering methods therein are also complementary and influence each other, reflected in:

Build tools allow the diverse frontend frameworks and libraries to work together seamlessly
Frontend frameworks and libraries also influence build tools to some extent (such as module loading, CSS preprocessing), and even CI/CD (such as SSR)

3. Frontend Engineering System from a Process-Oriented Perspective

[caption id="attachment_2277" align="alignnone" width="625"] dev workflow[/caption]

(From Book of Modern Front-end Tooling)

Typical frontend workflow is divided into 5 steps:

Development
Testing
Build
Deployment
Monitoring

From scaffolding to monitoring systems, the supporting frontend engineering system has integrated into every link of the frontend workflow, largely determining frontend production efficiency

P.S. The analysis and design stages before the development stage are not expanded here, because traditional software engineering methods are equally applicable, and frontend projects don't have much particularity at this stage

Development Stage

The primary task of the development stage is to create a scaffold project (and select frontend frameworks, libraries), then start the modify-verify main loop, mainly involving these engineering facilities:

Scaffolding: Create directory structure of frontend applications and generate scaffold code
Public libraries: Maintain reusable UI components, tool modules, and other public resources
Package managers: Introduce third-party libraries/components and track and manage these dependencies
Editors: Provide syntax highlighting, intelligent prompts, reference jumping, and other functions to improve development experience
Build tools: Provide syntax validation, compilation, packaging, DevServer, and other functions to simplify workflow
Debugging suites: Provide preview, DevTools, Mock, performance analysis and diagnosis, and other debugging functions to accelerate the modify-verify main loop

Testing Stage

After development is complete, enter the testing stage, first fully self-test the overall functionality, then hand over to professional testers for verification, engineering facilities needed in the process include:

Unit testing frameworks: Provide testing support for components and logic
Static scanning tools: Perform static checks from multiple dimensions such as code quality, build product quality, best practices/development conventions
Automated testing tools: Provide testing support for UI effects and business processes
Performance testing tools: Monitor and calculate relatively accurate performance data

Build Stage

Different from the development stage, in the build stage, more extreme optimizations and process linkages need to be done, involving:

Packaging scripts: On the basis of syntax validation, compilation, and packaging, perform merging, compression, code splitting, image processing, SSR, and other extreme optimizations
Build services: Support multi-task parallel packaging and notifications

Deployment Stage

Finally, deploy the fully tested frontend application to the production environment, needing these engineering tools:

Release platforms: Upload frontend resources to CDN or SSR rendering services, or integrate into mobile clients in the form of offline packages
Iteration management platforms: Provide CI/CD support

Monitoring Stage

After the frontend application goes online, it also needs to continuously pay attention to the actual effects and abnormal situations online, relying on these engineering facilities:

Tracking platforms: Statistics and analyze business data, track performance metrics
Monitoring platforms: Observe online exception information, including errors, white screens, traffic anomalies, etc.

4. Connection Between Processes

Besides the engineering facilities of each workflow stage, another part of frontend engineering is the connection between processes. The former aims to improve production efficiency, the latter is to solve experience problems

Overall, the evolution of frontend engineering is reflected in 2 aspects:

Collaboration mode: Mostly manifested as new concepts, new architectures, such as BFF/SFF
Development mode: Reflected in new abstraction layers, new workflows, such as [Sass](/articles/我们一起学 sass/), React, webpack, even Cloud IDE

Whether it's changes in responsibility division or specific work content, for developers, it means more learning and understanding costs, and ultimately manifests in development experience. And the engineering facilities oriented towards process connection are precisely to alleviate the upgrade adaptation costs brought by these changes, and more smoothly walk through the transition period

For example:

codemod: Connects old and new frontend frameworks, reduces upgrade adaptation costs
dva: Connects various excellent concepts in the React ecosystem (redux, redux-saga, etc.), reduces learning costs
[IDE](/articles/定制化 ide 的核心价值/): On one hand packages complete engineering facilities, reduces getting started costs, on the other hand connects various stages of the workflow, improves development experience

Ideally, frontend engineering should not only continuously optimize collaboration modes and improve development efficiency, but should also guarantee out-of-the-box getting started experience, seamless connection experience, and seamless switching upgrade experience

5. Summary

From a process-oriented perspective, frontend engineering is a series of engineering facilities throughout the frontend application lifecycle, used to ensure the development experience, quality, and delivery speed of frontend applications

Specifically, frontend engineering revolves around 3 main lines: development, build, and release, using tooling, automation, and other means to solve problems encountered in each link. On one hand, control the complexity of frontend development and improve frontend production efficiency, on the other hand, reduce migration and adaptation costs brought by architecture upgrades, collaboration mode changes, etc., and improve development experience