如何架构前端项目
2020-03-02 本文已影响0人
webmrxu
在经历了2年多的前端开发，主要是参与公司内部平台研发，负责前端技术推荐和技术选型，以及参与前端系统搭建，前端代码开发。最近有看到一些关于前端架构的问题，于是想总结下自己的经验，写下这篇文章。
需求
谈到架构，还是需要从需求出发，如果没有需求就开始谈架构，就相当是建空中楼阁。不同的架构有不同的应用场景，实现不同的业务需求，也需要有不同架构。如果空想架构，也许会出现大才小用，杀鸡焉用牛刀的现象。
需求讨论中，主要是和业务沟通，了解业务的想法，想做什么样的产品。也许业务并不懂技术，这时候就需要程序员根据业务的想法，引导业务的思路并记录下讨论过程，主要是需要记录下需要实现的功能，对需要实现的功能进行分类，哪些是业务肯定的想法，一定需要实现的功能进行标记，对于业务有疑问的需求，可先只做记录，完整的定下需求肯定是不可能一次实现的，特别是对于业务连想做什么都不清楚的情况。
以下是我总结的在需求讨论中，需要考虑的点。
- 需求讨论前： 需要业务确定前端界面需求兼容的浏览器版本，这个很重要，有了这个前提，才能明确项目中，哪些功能是浏览器不支持的。部署环境，前后端分离部署，还是使用同一个服务部署前端和后端项目。对开发中使用的技术是否有要求。对数据库是否有要求。
- 明确的需求: 讨论完成后，需要分析和总结，并整理出需求文档。期间有歧义或者不明确的地方，需要不断的和业务沟通，期间的写的需求文档最好使用邮件进行沟通，防止业务自己定下的决定，到最后连业务自己都忘了的情况。可防止出现这样的情况：“我不记我说过这样的话，这个功能不是我想要的，巴拉巴拉...”。但往往会被leader 一句：我们要敏捷开发。想要说清楚需求是不可能的，这辈子都不可能说清楚需求的...
- 需求讨论参与人员：在需求会议讨论期间，至少需要有一个前端工程师、一个后端工程师、项目经理、会议记录员(最好也是懂技术的，可在前端工程师或者后端工程师中明确的指定一个)、业务。
- 原型设计：项目需求文档整理后，开始设计页面原型，在需求讨论期间，每次会议讨论前，先让业务看下已经定下的功能，确定原型设计确定没有问题，然后开始定还没有确定的需求功能。
- 确定页面整体风格：项目需求完成80%左右时，可让ui设计师开始设计部分页面的布局和风格等。让业务过目，业务确定可以后，ui设计师可开始设计需求中已经定下来的页面。
- 最终版本： 需要业务确定需求文档没有问题、确定原型设计没有问题、确定UI界面设计没有问题后，就可进入开发阶段。
前端
技术选型前
- 考虑项目需求有多大
项目需要有多大，这就需要如何定义 - 考虑前端组工程师技术程度如何，对新技术是什么态度
- 目前前端组会的技术有哪些
- 项目进度赶不赶
- 后期项目维护
- 项目是否需要扩展，以及需要扩展到什么程度，可先预测
- 项目开发环境
- 项目需要兼容到什么浏览器
- 是否前后端分离
- 技术推荐
前端技术选型
- 技术选型可列出以下点击进行对比
- 开源协议 ：开源协议有很多种，有些开源协议是不能用于商用的。
- 维护团队：维护团队很重要，每种技术多少有点bug，后期需要有团队不断的进行维护和修复bug。例如：react 由facebook团队维护， angular 由谷歌团队进行维护，由专业的团队进行维护，可以没有后顾之忧。刚开始时，vue 只由尤雨溪一个人进行维护，由很大的不确定性，万一vue有重大bug，而找不到作者本人去维护，那就只能由自己打补丁进行修复，这也会占一部分开发成本，并且还不确定会不会带来副作用，当然目前vue 已经有专业的团队进行维护。
- 学习曲线
- start
- 社区活跃度
- 项目难度预测
- 项目难点解决方案
- 预测项目进度，完成时间
- 是否需要响应式，PC端，移动端
- 前端如何分工，如何合作
- 和ui设计沟通，定页面原型
- 和后端沟通，定前后端接口，数据格式
- 测试
