23. 如何设计一个前端项目

设计项目需要关注的重点：

1. 技术方案设计和选型
2. 多人协作和团队规范的制订

技术方案设计和选型

从0开始搭建项目，需要考虑一下技术选型：

1. 前端框架和脚手架
2. 状态管理工具
3. 路由管理
4. 代码构建和编译方案

需要基于项目定位(To B还是To C)， 用户量体系，项目复杂度因素，进行技术方案的设计

技术选型的影响因素

一般来说从头开始搭建前端项目：

1. 项目规模如何，功能交互是否复杂，面向哪些用户
2. 是否存在多人协作？团队规模大概是怎样的？
3. 团队成员技术栈如何？对新技术的接受程度怎么样？
4. 还是否有现有技术方案可以参考？是否需要进行调整？

为什么要考虑这些问题？

• 项目规模和功能交互会影响框架和工具的选型轻量项目可能react/Vue框架比较灵活，大型项目还可使用Angular全家桶。
• 用户体系会影响系统兼容性的倾向，比如用户受众年龄偏大，则需要考虑使用机型性能可能相对较差，需要兼容的机型品牌比较多。
• 存在多人协作需要考虑完善团队规范，同时尽量使用工具来保证流程规范。
• 团队技术栈倾向同样影响技术选型，如果有县城的技术方案和项目安利，可以考虑是否符合实际需要，是团队成员熟练的工具可以避免很

前端框架和工具选型

对于前端框架和工具你的使用，项目面临两个选择：

1. 使用开源/现有框架
2. 造轮子
   使用开源的好处是，它们有完整详细文档，丰富的社区资源。在遇到问题的时候也能通过issues和Stack Overflow来查找。
   前端发展到现在，几大框架的之间的差距越来越小，目前主流的三大框架包括 Angular、React 和 Vue可以进行选型和对比：

框架	优势	不足
Angular	提供完整的开发规范和解决方案，解决了多人协作、大型应用的痛点	基于大型复杂项目设计，解决方案大而全导致相对笨重设计和使用的概念很多（如依赖注入/注入器/令牌、指令、模块化、AOT 等），入门成本较大
React	概念较少，对前端编码侵入较少，开发者只需要掌握 Javascript 便可实现大多数功能框架（库）轻量，可灵活搭配各种状态管理工具、脚手架等进行开发	对于大型复杂项目，需要自行搭配其他配套工具来解决
Vue	对新人友好、文档和社区较完善框架（库）轻量，可灵活搭配各种工具进行开发，官方也提供完整的全家桶解决方案	如指令和语法糖有一定的概念门槛对于大型复杂项目，需要自行搭配其他配套工具来解决

除了热门框架，有能力的团队可以选择贴合自身项目需要，相对小众的框架和工具，甚至可以自行研发合适自己的。

如果想要做自己的框架，尤其是想要在业务中尝试使用，需要万分谨慎，除了需要贴合业务实际需要，更要具备足够的责任感，需要提供友好的文档和API给其他人，不然对项目的维护，新加入的成员来说，会带来毁灭性的开发体验。
技术选型没有标准答案，很多时候我们还需要结合项目现状，选择适合团队使用的技术栈。

多人协作和团队规范

相比项目的搭建和快速上线，项目的维护永远是程序员的大头。搭建一套代码合流程规范，不知将规范写的淋漓尽致，更是需要使用流程化的工具来确保大家遵守规范。

使用一直的代码开发规范

好的编码习惯很重要，语义化的变量命名，适当的注释，都会对代码的可读性有很大的提升。但是每个人习惯都不一样，所以我们需要有统一的代码规范。
可以是使用一些工具来确保代码符合规范：

• 使用 Eslint 检测代码规范；
• 使用 Prettier 自动化格式代码；
• 使用 Git Commit Hooks 拒绝不符合规范的代码提交；
• 使用流水线检测出不规范的代码，并拒绝合入主干分支；
• 使用流水线检测出不规范的代码，并拒绝进入发布流程。

制定合适的代码流程规范

一般来说开发流程会包括：

• git 创建分支过程 ： 分支命名，是否需要关键需要单或者bug单
• git提交代码过程 ： 检查代码是否符合规范，只允许合格代码进行提交。
• 分支提交过程：需要进行交叉Code Review ， 对方同意后才允许合入代码
• 合入主干过程：对代码进行自动化构建和测试，功能正常且符合规范的代码才可以合并主干、
• 代码发布过程：自动拉去主干分支，创建发布分支，对代码进行自动化构建和测试，正常后会开始进入灰度发布流程。
  通过自动化的工具我们同样可以确保以上流程按预期进行，很多团队也会使用持续继承(CI)和持续部署(CD)。CI/CD在项目中的落地，很多时候会表现为流水线的开发模式。建立完成的 CI/CD 流水线，除了可以按照规范约束每次代码提交的质量，还可以有效地提高效率。越是大规模的团队越能体会搭配CI/CD带来的便利。