Big front-end engineering experience

Preface

The concept of a big front end has been out a long time ago, but there has been no standard definition of what a big front end is. Some say that the big front-end is the collective name of all front-ends, such as Android, iOS, web, Watch, etc. The layer closest to the user is the UI layer. Unifying it is the big front-end. In fact, I think that there is still something missing. What is expressed here should be more cross-terminal and cross-platform features. And front-end engineering is a very important link to meet cross-end and cross-platform

Front-end engineering

Engineering content

The front-end business is becoming more and more complex and diversified. From the original web PC business to the current cross-end business, once the business is complicated, a series of problems will arise, including multi-person collaboration, code quality, project maintenance, project risks, etc. Wait. The front-end engineering is the use of software engineering technology and methods to standardize and standardize the front-end development process, technology, tools, experience, etc., so as to improve the development efficiency in the development process and ensure the quality of the front-end application.

From the web front-end architecture development practice, see how engineering is achieved.

• Standardization: Everyone's technical level, technology stack, and code style are different, so a unified standard is an inevitable first step. Create a project framework (icejs, a React-based incremental R&D framework) through scaffolding, unify standards, converge technology, and standardize the code developed by developers, thereby ensuring cross-business and cross-team R&D quality and collaboration efficiency.

• Development:

  • Modular
  • Componentization
  • scaffold
  • Framework ( icejs , ice-scriptes2.x)
  • R&D model upgrade, same warehouse, same dependency, same command

• Construct:

  • webpack
  • vite

• deploy:

  • Deploy the front and back ends together

• performance:

  • Caching strategy
  • Load on demand
  • First screen rendering speed

Performance monitoring

An important part of performance is not mentioned above, that is, performance monitoring. how to implement performance monitoring from how 16108952160ebb conducts the observation of front-end performance.

• Three pillars of observability: indicators, logs, links
• Indicators: formulate indicators (performance, error information, operation records), collect indicators, combine with the chart library, and visualize indicator data
• Logs: Collect application services and system logs to realize log aggregation and analysis
• Link: Security inspection, cloud dial test

Summarize

Front-end engineering can be divided into five parts: development, construction, deployment, performance, and standardization. Each module is large and can do many things. Do engineering well, improve work efficiency, improve product quality, and make engineering more Significant. The above summary is not very comprehensive. If there is something wrong, please point it out.

This article participated in the SegmentFault D-Day , welcome to join if you are reading.