【青训营】- 前端工程化基础笔记

571 阅读4分钟

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

理论

软件工程

软件工程就是要想尽一切办法规避软件项目的风险,并能更快、更好的完成软件项目的交付和维护。最终目的是多快好省,快速、高质量完成软件工程的交付。

演进过程:瀑布开发 --> 敏捷开发 --> DevOp

image.png

交付周期越长,变化的可能性就越大,项目可能面临的风险概率就越高。因此要追求反复迭代、交付。

前端工程化

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

前端工程化是一种通过规范化、模块化、自动化的手段,提高前端项目在研发、运维阶段的效率、质量。

stateDiagram-v2
前端工程化 --> 规范化
前端工程化 --> 模块化
前端工程化 --> 自动化

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

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

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

CI/CD

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

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

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

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

因为自动化和持久化的特性,CI/CD能实现高效率、高质量的交付目标。

DevOps

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

image.png

前端工程化的好处

  • 提高效率(通过模块/组件化复用各项能力,以及自动化工具提高效率)
  • 保障质量(规范化避免犯错,通过引入准入检测、监控、自动化测试等手段保障研发和运维期间的质量)
  • 降低成本((提高质量、保障质量,以及自动化带来的开发难度的降低变相的就降低的整个软件开发的成本)

实战

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

围绕规范化、模块化、自动化这三个维度,以提高效率,保证质量为目标展开。 整体架构如图所示: image.png

  1. 定义研发流程和规范
  • 参考业界规范,形成自己的规范
  • 利用prettier、lint、git hook在代码提交和CI过程中强制落地
  1. 打造工程脚手架 使用脚手架创建、运行项目,比如create-react-app

代码检测&前置检测:配置lint(比如eslint、prettier、commitlint),比如定制化规则plugins

利用githook在commit之前执行相关检测逻辑,比如husky lint-staged 保证代码质量,提高多人协作效率,代码风格统一。

  1. CI/CD 项目集成构建和交付 不同的 CI/CD 工具适合于不同的场景,比较常用的比如jenkins,CI/CD工具可以方便我们简化流程快速部署。

如何部署具备多台设备的集群?

蓝绿部署策略

比如100台机器,分为蓝组绿组。发布时50台上线,50台机器下线部署,这种方式简单快速,但是会降低服务稳定性。

滚动升级策略

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

灰度策略(金丝雀)

类似金丝雀放到矿井里查看有毒气体的意思,利用较小的代价测试产品安全性。 按照流量的百分比,导入到新版本。这个时候新旧版本是同时跑的 ,比较考验数据协同的问题。