Preface: Software engineering

background

In the early years, when the software system became more and more complex, software development without certain methods, certain standards for project management, so it is easy to delay the project, or even cause the whole project can not be online. Therefore, predecessors put forward software engineering to avoid the risks of software projects, and to complete the delivery and maintenance of software projects faster and better.

define

Software engineering is the study and application of how to develop and maintain software in a systematic, standardized, quantitative and procedural way, and how to combine the time-tested and proven correct management techniques with the best available techniques and methods.

The evolution process

Front-end engineering

1. What is front-end engineering?

Software engineering + front-end = Front-end engineering

Front-end engineering is to improve the efficiency and quality of front-end projects in the stage of R&D, operation and maintenance by means of standardization, modularization and automation.

The canonical

Standardized process: precipitation of standards and specifications for each link of the R&D process, unified r&d process and specifications, providing possibilities for modules and automation.

modular

Module reuse: divide and develop each function based on independent modules, so as to achieve module level reuse as much as possible, thus greatly improving the overall efficiency and reducing the research and development cost.

automation

Automatic processing: Based on the defined R&D process, an automatic pipeline is established. When a specific action occurs (periodic trigger, Git Push), the pipeline is automatically triggered to execute CI/CD tasks.

CI/CD

CI/CDContinuous Integration/Continuous Delivery (Deployment)Continuous integration/Continuous delivery(The deployment of) It is an engineering methodology, that is, through automated means, can continuously build, deliver, deploy projects to achieve high efficiency, high quality delivery goals. 1) Continuous integration

When new code changes are submitted (uploaded to a repository git push), the project is automatically constructed, integrated, tested, and produced as a final release.

2) Continuous delivery can record and save the construction record, integration record, test record and release product of each continuous integration, which is convenient for follow-up tracking, monitoring and deployment. For example, a zip package will be generated after the front-end project is packaged and built. CI/CD will save the products of each build. In case of online failure, it is convenient to roll back to the last version.

3) Continuous deployment Automatically deploys the end product of a specified (one of the products of continuous integration) into production.

Devops

DevOpsIs a group of processes, methods, and systems used to facilitate communication, collaboration, and integration among development, technical operations, and quality assurance (QA) departments.

2. Why do front-end engineering?

Reduce cost and improve efficiency to ensure quality

1. Improved efficiency (through modular/componentized reuse capabilities and automated tools)

2. Quality assurance (standardization to avoid mistakes, ensure quality during R&D, operation and maintenance by introducing access testing, monitoring, automated testing and other means)

3. Cost reduction (improved quality, guaranteed quality, and reduced development difficulty through automation translates into reduced overall software development costs)

3, actual combat: how to do a front-end engineering program?

Centering on standardization, modularization and automation, it aims to improve efficiency and ensure quality.

The canonical

• Establish specifications that meet actual requirements
• Ensure specifications are implemented

modular

Improve efficiency and quality by using reusable modules (tools, platforms, components, libraries, etc.).

automation

Automate all the work involved in the r&d process.

The overall architecture

4, actual combat: what do you need to do to create a front-end engineering plan?

• Define r&d processes and specifications
• Construction scaffolding
• Build automated CI/CD

Develop and implement specifications

2) Use Prettier, Lint, git hook to enforce implementation specifications during code submission and CI

npm install -D prettier
npm install -D eslint
npm install -D husky
npm install -D lint-staged
Copy the code

Scaffolding: Create project

React Scaffolding: Create project & Run

Install install create-react-app

npm install -g create-react-app
Copy the code

2) Create the template project

create-react-app qingxunying-example
Copy the code

The initialized project directory looks like this:

3) Start and run the project

cd qingxunying-example
npm start
Copy the code

Scaffolding: Code submission & pre-inspection

Configure Lint + to use GitHook(execute specified functions before commit) implementations

Configuration Lint

Use GitHook to perform the related detection logic before the commit

(1) Husky: Manipulating Git hook hooks 2) Lint-staged: Manipulating Git submitted files

CI/CD: Project integration build and delivery

5, deep

Build solution: NoBundle

Introduction to the

Native Module based on browser support (

The advantages and disadvantages

1) Advantages:

• Fast build speed
• Good loading performance

2) Disadvantages:

• Compatibility issues

Industry solution: Vite

Deployment solution: How do I deploy a cluster with multiple devices?

Blue and green release strategy

Release the new, new and old versions in parallel, and then browse to the new version.

Rolling Upgrade Policy

The most popular strategy used today. Scroll to enable the new one at a time and pause the old one until the upgrade is complete.

Gray Strategy (Canary)

Import the specified percentage of traffic to the new version. In this local mass deployment, we will first observe whether there is any problem with the mass machine, and then continue to mass. This scheme is relatively perfect, which can ensure that the new version running on the line is no problem at last.

conclusion

The above mainly introduces the concept of front-end engineering, why front-end engineering is needed, and how to do front-end engineering. In recent years, front-end engineering has been constantly evolving and updating in order to achieve stable development of front-end projects, reduce errors and agile construction and deployment. The evolution path is as follows: