从零开始前端架构1:现代前端工作流

软件架构

什么是软件架构

对于计算机工程而言,“架构”是一个十足的“舶来品”,最出“架构”是从建筑工程系来的一个概念,对于建筑工程而言,需要规划、设计、实施等多个过程,中间需要考虑成本、功能、美观、坚固等诸多需求,因此一个合适的建筑蓝图和计划,对于建筑工程而言至关重要。
软件开发也是和建筑工程类似,我们需要一个类似于建筑工程中的架构,来指导我们的开发工作,包括:

  • 各个模块之间关系是什么?
  • 采用什么技术栈、框架等来完成各个模块?
  • 各个模块如何通信?
  • 项目如何上线和部署?
  • 各个模块中的结构细节如何?
  • 开发测试部署中的约定、规则和制度?
  • 对于程序员来说如何遵循上述这些细节?

需要怎样的架构

  • 一个能够上线部署的架构
  • 一个团队所有人都能完成部分工作,集体可以完成全部工作的架构
  • 一个技术上可行的架构
  • 一个不多也不少刚刚好的架构
  • 一个可持续可维护可拓展的架构

架构的设计步骤

  1. 收集业务需求
  2. 与具体开发人员沟通了解技术限制(比如用了大家不会的技术做了主方案就是极不可取的选择,遵循团队传统是一个优秀架构设计人员必须具有的素质)
  3. 寻找潜在的可行性技术方案
  4. 发现可能的风险点
  5. 在团队中确认并证明方案可行性
  6. 细化技术方案的每个阶段实施
  7. 结合业务和工作量,按照轻重缓急法,对项目进行排期

前端技术发展史

  • 石器时代(1990-1995):彼时js还没有诞生,由后端渲染HTML,前端只包括布局和简单的样式。
  • 青铜时代(1995-2005):js开始诞生,前端可以用js实现一些动效以及表单校验等工作。后来者的IE游览器与网景进行第一次游览器大战并胜利。
  • 铁器时代(2005-2008):2005年,gmail采用ajax进行开发,是第一个动态页面,之后ajax开始流行。同时flash和ActionScript大行其道。
  • 蒸汽时代(2008-2009):2008年,现代游览器内核webkit和强力js引擎V8发布并开源,2年后苹果开始抵制flash强推html5。
  • 电气时代(2009-2013):node.js和npm发布,angular.js发布。
  • 现代(2013后):react.js和vue.js及其生态圈内模块相继发布,带来新的思维组件化和数据驱动;出现了typescript;ES6发布并且持续跟进;gulp和webpack作为自动化和打包工具的代表发布;跨平台框架Electron、RN、Flutter等被发布并且强力承担了当前移动端开发半数以上工作;node.js趋于稳定并且承担了大量项目的后台开发;游览器随着性能的提高使得游览器三维越来越流行。

前端架构的层次

  • 系统级:应用在整个系统内的架构关系,即与后端如何组织结构
  • 应用级:应用外部的架构关系,如多个应用之间的组件共享
  • 模块级:应用内部的架构关系,如状态管理、模块化
  • 代码级:代码级别的基础设施,包括规范、原则、文档等

工作流和构建流

工作流

前端工作流

构件流

前端构建流

开发中一些常见的文档对比

类型 适用场景 使用频率 性价比
搭建指南README 项目搭建和开发
架构图 熟悉项目设计
看板 了解业务,把控进度
需求追踪 了解需求,追踪进度
bug追踪 追踪bug情况
代码规范与提交规范 如何提交和规范代码
接口文档 了解接口

这里顺便讲下代码commit规范,我通常采用的是一个简洁的规范,这个规范是:
【类型】(【影响范围-可选】):【修改内容】
其中类型有以下几种:

  • feat:新功能(feature)
  • fix:修补bug
  • style:写了css样式(不影响代码运行的变动)
  • docs:补充文档(documentation)
  • refactor:重构(即不是新增功能,也不是修改bug的代码变动)
  • test:增加测试
  • build:构建过程或辅助工具的变动


参考:

  • 《前端架构-从入门到微前端》
  • 《整洁架构》
  • 《软件系统架构》