1. 产品定位
  2. 核心能力
  3. 设计思路
  4. 技术原理
  5. 标准的项目架构设计
    1. 中台组件的构建思路
    2. 让创新更快发生，开箱即用
  6. 经典的业务模型及对应的解决方案
    1. 后台的项目千篇一律，前台项目花样百出
    2. 常见的前台，中台业务模型

架构解决的问题

企业级前端开发框架：聚合技术栈，提供一站式，开箱即用的开发体验。

  1. 业务低成本试错，让用户少写重复代码，研发效率提升，降低前端编写前端业务逻辑的成本
  2. 提升前端搭建界面的效率

项目方案设计

当你接手一个前端项目，如何给这个项目设计个前端架构方案？
image.png

业务复杂度

  • 交互的复杂性
  • 数据结构 & 数据状态的复杂性
  • 多项目互相依赖的耦合度
    • 组件库
    • 开源第三方库
  • build打包构建
  • 性能优化
  • 第三方库的使用 & 二次开发
  • UI的一致性

流程复杂度

  • git flow & & gitlab
    • git precommit规范验证
    • commit信息
  • eslint
  • PR review
  • 单元测试
  • ci & cd

react技术栈

image.png
https://juejin.cn/post/7000988622086209566
https://mp.weixin.qq.com/s/TxWRQQO8RXWfExuLCxI1PA

typescript选择

虽然ts很流行，但不代表，项目在任何情况下，都无条件使用 ts；
ts的优势在于：

  1. 静态类型检查，
  2. 环境声明，

同时，ts也增加了项目的复杂度，如果项目必须用到类型检查，那就用 ts，否则项目额外的增加了复杂度。

决定我们技术选型的的条件，就是项目要实现的目标和现有的技术水平；
在完成项目目标的前提下，寻找最简单的解决方案。

vite选择

基于 esBuild的打包工具，就2021年来说，无法替代 webpack的企业级项目构建，
vite缺点

  • 完全依赖 es Module，导致 vite无法直接对 commonjs模块化进行支持
  • 必须依赖预构建，vite必须现将 commonJS或 UMD发布的依赖，转换为 ESM

vite目前的缺点，无法支持企业级项目。