前端架构

设计原则
不要一开始，就把系统设计的非常复杂，不要过度设计。
系统要考虑扩展性，和兼容性。

架构发展

1. 后端 MVC架构
   1. SSR 服务端渲染
2. 前端 MVVM架构
   1. 将前端代码从后端 MVC分离出来
   2. MVVM缺点：前端项目部署依赖后端服务
   3. SPA单页面架构
      1. SPA缺点：不利于SEO；首屏白屏，渲染时间长
3. BFF架构
   1. 打包，构建工具，webpack，rollup
   2. UI库
4. 微服务
   1. 微前端，Web Components

软件架构分层

1. 系统级架构，核心点
   1. 如何与后端服务通信
   2. 与第三方应用集成
   3. 系统之间的业务关系，协作机制
2. 应用级架构
   1. 微前端
   2. 微服务
3. 模块级
4. 代码级

架构质量衡量点

1. 可扩展性
2. 可维护性
   1. 代码理解难度，新人是否能快速上手
   2. 开发效率
   3. 接入依赖的开发维护成本
3. 可管理性
   1. 错误上报和信息收集功能
   2. 崩溃率和错误率指标？
4. 高可用
   1. 故障修复
   2. 降级
   3. 容灾
   4. 熔断

系统级架构

1. 前后端分离的架构设计
   1. API接口，文档管理
   2. OAuth授权，token验证
   3. BFF
   4. 是否需要服务端渲染
   5. Mock
2. 与后端数据传递的规范
   1. API设计原则

应用级架构

微前端，前端应用之前的架构方案，将多个前端项目集成在一起。
基于 URL变化来切换不同的应用
应用之间的数据交互

应用级架构

• CLI脚手架
• 模式库
• 设计系统

模块级架构

代码开发和迭代

代码级架构

开发流程，规范和原则
项目规范，约定大于配置，规范而非默契
代码质量，代码重构
可维护性，可扩展性

鲁棒性 robustness

稳定性，健壮性，容错性

• 运行在不同的环境或设备上
• 从错误的输入，推断正确的输入