Theory: Software engineering

1.1 define

Try every means to avoid the risk of software, and can complete the delivery and maintenance of software projects faster and faster.

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 time-proven management techniques with the best available techniques.

1.2 Evolution Process

The ultimate goal of software engineering evolution: multi-block economy – fast and high quality software engineering (project, system) delivery.

The longer the lead time, the greater the likelihood of change and the higher the probability of risk the project may face.

Theory: front-end engineering

2.1 define

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.

2.2 CI/CD

Definition: Continuous integration/continuous delivery (deployment) Is an engineering methodology that enables continuous construction, delivery, and deployment of projects through automated means to achieve efficient, high-quality delivery goals.

Why does CI/CD achieve the goal of efficient, high-quality delivery?

Because CI/CD has automatic, persistent features.

2.3 the conversation

DevOps is a collective term for a set of processes, methods, and systems that users facilitate communication, collaboration, and integration among development, technical operations, and quality assurance (QA) departments.

2.4 Why front-end engineering?

Reduce cost and improve efficiency to ensure quality

  1. To improve efficiency(Improve efficiency through module/component reuse capabilities and automation tools)
  2. To ensure the quality(Standardization to avoid mistakes, through the introduction of access testing, monitoring, automated testing and other means to ensure the quality of research and development, operation and maintenance)
  3. Reduce the cost(Improved quality, guaranteed quality, and reduced development difficulty due to automation translates into reduced overall software development cost)

Third, in actual combat

How to do a front-end engineering solution?

Centering on the three dimensions of standardization, modularization and automation, it aims to improve efficiency and ensure quality.

3.1 Overall Architecture

The deployment of more projects may be based on oneDockerContainer, and then inDockerDeploy one on top of the containerNginxAnd then the front page can be accessed normally.

What does it take to create a front-end engineering solution?

  1. Define r&d processes and specifications
  2. Construction scaffolding
  3. Build automated CI/CD

3.2 Preparations

You need to install one firstDockerFinish,DockerAnd then you need to install a mirror, and the mirror needs to be usedGitlabTo the platform that stores our code,JenkinsIt’s to finish us offCI/CDA platform,NgnixIs a Web container that can be accessed by users over the HTTP protocol.

3.3 Formulation and implementation of specifications

  1. Develop your own specifications by referring to industry 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

3.4 Scaffolding: Project construction

3.5 Scaffolding: Project creation & operation

npm install -g create-react-app 
Copy the code
create-react-app my-project
cd my-project
npm start
Copy the code

3.6 Scaffolding: Code submission & pre-detection

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

Configuring various Lints

Use GitHook to perform the related detection logic before the commit

  • Husky operates on Git hook
  • Lint-staged actions are performed on Git submitted files

Git commit -m “test” with no canonical code.

CI/CD: Project integration build and delivery

SCM (source code) — > Build — > Package — > Deploy

Fourth, further

4.1 Construction Scheme: No Bundle

Introduction to the

Native Module based on browser support, that is, you don’t need to build modules into bundles to use directly.

Advantages:

  • Good build speed
  • Good loading performance

Disadvantages:

  • Compatibility issues

Industry solution: Vite

4.2 Deployment Scheme

How do I deploy a cluster with multiple devices?

Blue-green deployment strategy:

Rolling upgrade policy:Scroll to enable the new and pause the old until the upgrade is complete

Gray Strategy (Canary)Import the specified percentage of traffic to the new version

Five, the summary

5.1 Front-end Engineering Solution Evolution Path

The last

⚽ this article mainly introduces what front-end engineering is? Why front-end engineering? I believe you must harvest a lot ~ ⚾ if you are interested in this article welcome to praise attention + collection, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript