【青训营】- 前端工程化

207 阅读4分钟

软件工程

定义

想尽一切办法规避软件项目的风险,并能更快、更好的完成软件项目的交付和维护

软件工程是研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件,以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来。

理论

演进过程

软件工程的演进的最终目的:多快好省-快速、高质量的完成软件工程的交付

image.png

前端工程化

软件工程+前端=前端工程化

是一种通过规范化是、模块化、自动化等手段

  • 规范化

规范化过程:沉淀研发流程的各个环节标准规范,统一研发流程和规范,为模块和自动化提供可能性。

  • 模块化

复用模块:将各项功能基于独立的模块去拆分开发,尽可能的做到模块级别的复用,从而大大提高整体效率和降低研发成本。

  • 自动化

自动化处理:基于定义的研发流程,建立一套自动化流水线,当特定动作发生(定期触发、Git Push)时,自动触发流水线执行CI/CD任务。

image.png

CI/CD

Continuous Integration/Continuous Delivery(Deployment)持续集成/持续交付(部署)它是一种工程化方法论,即通过自动化的手段、实现能持续的对项目进行构建、交付、部署,从而达成高效率、高质量的交付目标。

image.png

  • 持续集成

自动构建:当有新的变更代码提交(上传到代码仓库git push)之后,通过自动化的方式自动完成项目工程的构建、集成、测试等工作,并生成最终的发布产物。

  • 持续交付

自动存储:能够将每次持续集成的构建记录、集成记录、测试记录、发布产物记录并保存下来,方便后续的追踪、监控、部署。

  • 持续部署

自动部署:将指定(某一个持续集成的产物)的最终产物自动部署到生产环境中。

DevOps

DevOps是一组过程、方法与系统的统称,用于促进开发、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

image.png

为什么要做?

『降本提效,保障质量J

1.提高效率(通过模块/组件化复用各项能力,以及自动化工具提高效率)

3.保障质量(规范化避免犯错,通过引入准入检测、监控、自动化测试等手段保障研发和运维期间的质量)

2.降低成本((提高质量、保障质量,以及自动化带来的开发难度的降低变相的就降低的整个软件开发的成本)

实战

如何做一个前端工程化方案?

围绕规范化、模块化、自动化这个三个纬度,以提高效率,保证质量为目标展开。

  • 规范化(建立规范)

    • 建立符合实际需求的规范
    • 确保规范被落地执行
  • 模块化(沉淀(使用)模块)

    • 通过可复用模块提升效率和质量(工具、平台、组件、函数库等)
  • 自动化(自动化执行)

    • 将研发流程中涉及到的工作自动化完成

整体架构:

image.png

打造一个前端工程化方案需要做什么呢?

  • 定义研发流程和规范
  • 打造工程脚手架
  • 打造自动化CI/CD

image.png

准备工作

服务器: Docker:https : //www.docker.com/get一started

Docker lmage:

Gitlab: https:/ / docs.gitlab.com/ee/ install/ docker.html

Jenkins: www.jenkins.io/zh/doc/book…

Nginx: www.runooh0850com/docker/dock…

开发机:

Git: git-scm.com

Node: nodejs.org/en/

image.png

指定和落地规范

制定和落地规范

1.参考业界规范,形成自己的规范

2.利用prettier、lint、git hook在代码提交和CI过程中强制落地规范

脚手架

创建项目

image.png

创建项目&运行

image.png

image.png

image.png

代码提交&前置检测

image.png

配置Lint +利用GitHook(在commit之前执行指定函数)实现

配置各种Lint

image.png

image.png

利用GitHook在commit之前执行相关检测逻辑

  • husky:操作Git hook钩子
  • lint-staged:针对git提交的文件进行一些操作

image.png

image.png

CI/CD

项目集成构建和交付

image.png

CI/CD:项目集成构建和交付

SCM(源代码管理)→构建→打包→部署

image.png

深入

构建方案-NoBundle

简介:

基于浏览器支持的Native Module (

优点:

  • 构建速度快
  • 加载性能好

缺点:

  • 有兼容性问题

image.png

业界方案:vite

image.png

部署方案

蓝绿部署策略

image.png

滚动升级策略

滚动启用新的,暂停老的,直到升级完成

image.png

灰度策略(金色雀)

按照流量的百分比,将指定百分比的流量导入到新版本中

image.png

总结

前端工程化方案的演进路劲是什么?

image.png

  • 脚手架
  • 研发平台
  • Docker + k8s
  • WebIDE
  • D2C
  • 代码智能生成
  • CI/CD
  • 物料平台
  • Serverless