这是我参与「第五届青训营 」伴学笔记创作活动的第15天

本堂课的主要内容

• 现代前端开发流程

前言

• 软件工程没有绝对对错标准，只有是否合适当下场景(需求复杂度、团队规模、基础设施完备程度等)，是否能够真正提升交付效率与质量之分。多数团队也不是一上来就能推导最优流程模型的，而是日常工作不断发现问题解决问题，不断迭代优化流程最终得到一个最合适的流程框架。

从软件工程视角

• 整体上遵循：需求分析 => 方案设计 => 开发 => 测试 => 验收 => 发布流程
• 这只是主流程，并不使用所有场景(例如：Hotfix、npm发包)，重在理解各职能分工
  • 产品：决定做什么、验收方案、验证方案有效性
  • 研发：开发、自测、承担部分运维职能等
  • 测试：质量检测把关
• 大量节点与“开发”无关
• 复杂功能开发流程会复杂许多（集中在开发节点），后面展开
• 实际场景中可能出现无数状况
  • 需求变更
  • 上下游依赖发生问题
  • 疫情、天灾、人祸等不可抗力因素

前端工程化

• 综合上述流程，前端在这个过程中需要做什么事情呢？至少有
• 初始化项目
• 功能开发
• 集成&测试
• 发布
• 线上监控

初始化项目

• 假如是已有仓库，初始化过程很简单，git clone/git rebase(or merge) 两个命令
• 假如是新项目，那么你需要做很多技术选型：
  • 代码组织：polyrepo vs monorepo
  • 决定采用设计技术栈（React or Vue? Node or Java? AntD or ArcoDesign? CSR or SSR?），要做许多技术决策
  • 搭建工程化环境：构建工具、Lint工作流、UT工具、CI/CD等
  • 资源部署：物理服务器、云服务器、faas、CDN（托管静态资源）等

开发

• 工具效率：
  • IDE效率：设计适当的配置&插件环境，有助于减少手动操作次数，提升团队研发效率
  • 单测效率：按需单测？单测覆盖率？
  • 构建效率：按需构建？构建逻辑优化？构建缓存？
• 确保不犯错
  • 接入Tpyescript,ESlLint、StyleLint、CommitLint、lint-staged、prettier等，解决代码风格和类型安全问题
  • UT(jest/vitest等)确保代码运行效果
  • 这两类工具都有一定上手成本，但能做到吹毛求疵，确保不会发生小错误，保证长期可维护，

集成&测试

• Code Review，重在准入规则：
• 配合CR，通常还可以设置许多自动检测的准入条件
  • 构建命令必须成功
  • Lint必须通过
  • 单测必须通过，单测覆盖率不能降低，且整体覆盖率必须大于阈值（或增量代码的覆盖率大于阈值）
  • E2E测试必须通过
  • 性能diff检查
  • 各类代码安全检查

上线发布

• 小流量部署：
  • 设置一个单独的发布环境，请求流量命中某些规则（例如带有特定header）时，转发流量到此环境；用于发开发预览、功能浏览等，本质上是一个集成联调环境；
• 灰度部署：
  • 同样是设置单独的发布环境，请求流量命中某些规则（例如特定的用户组、特定的地理区域等，或者按机房部署）时，转发流量到灰度环境，主要用户上线前的功能验证、试验；
• 秒级回滚：
  • 即使上线，也应该提供一套稳定的方法，能秒级瞬间回滚到上一个版本；

总结

前端工程化部署一堆工具无意义的堆叠，而是围绕团队技术栈、项目复杂度、开发流程等要素所设计&搭建出来的

• 需求准入准出：
  • 定义什么事情能做，做到什么程度算完工；开发完成上线后，持续观测需求情况（技术层面+业务层面）————对结果负责
• 从左到右的研发规范、规则：应以一件事情怎么做，且应该尽可能自动化，用工具来确保规则被严格执行————对过程负责