FrontEnd-Project-Guide

前端项目指南 - 旨在写出一份指导前端工程师掌握快速开发前端项目的文档指南。

业务项目

如果你是一位战士，那么把项目当成你的敌人。 你想快速高效的解决它，同时一次比一次快，一次比一次快完美。 所以，在开战之前，努力做到百分百了解它。 知己知彼，百战百胜。

开源项目

取决于你对开源项目的态度，及空闲时间饱和程度。

公司架构

某位名人讲过一句话，" 公司或者团队的工作效率，必定与其组织架构存在关系。 "

了解项目

跟产品经理\UI沟通，一起整体的过一次项目，了解项目的业务需求和流程。对业务理解得越发深入细致，会让后续的修改越来越少。

1. 项目业务与需求

   1. 沟通需求 与产品经理\UI\客户沟通项目的业务需求。构思业务的流程图。

   2. 整理需求 需求的不明确，不合理，冗余都需要沟通细节，拒绝不合理、无实用性质的需求。复杂的需求根据其业务流程步骤，如果能够delay就放到后面实现，否则在一起开始就要做好详细的应对措施和Plan B。

      1. 不明确 - 产品或者客户无法给出准确业务场景的，既是不明确的。
      2. 不合理 - 需求也必定是结合用户、业务场景的，否则是无意义，无实用性质的。
      3. 冗余 - 过度设计

   3. 流程设计 画业务流程图，可以用大脑，也可以借助工具。

2. 项目的计划时间 项目经理给出的时间，是否合理？项目经理在规划时间时，如果项目经理不熟悉前端技术，给出的时间通常会考虑你的看法。但如果你自己没有合理的计划时间，那么压力也得自己扛了 - 悲剧。

   1. 根据业务流程图中各个环节的复杂度计划业务的时间 - 需要尽量考虑到不可控因素带来的影响。
   2. 业务流程图越仔细，则时间的计划也能更精准。
   3. 由于你不可能一直全身心的投入项目，不要逼自己太紧，有过大的压力 - 加班太晚容易死得早，压力太大容易对自己失去信心。
   4. 项目经理非要不合理的压榨你的时间，辞职吧。

3. 项目中需求的优先级

   1. 根据业务流程和复杂度评估业务的优先级
   2. 先实现简单和拿手的业务，再解决你不熟悉的业务
   3. 当你觉得自己写得真正慢时候
      1. 压力？心事？
      2. 空气？缺氧？
      3. 环境？

构思阶段

1. 业务流程图中难点有哪些？
2. 还有疑问的地方？是不管/delay，还是必须弄明白？
3. 整个项目开始构建，开始跑起来。

设计阶段

1. UI 设计 对业务流程的理解，除了PM之后，那么剩下的应该是合格的UI了。然后就是开发者。 所以此时应该是 PM -> UI -> Dev -> UI -> PM -> UI -> Dev ...

   与一名优秀的UI合作，和与一名思路清晰的开发者合作的感觉一致。

2. 数据库\接口的设计

   1. 业务是产品的核心，而前端需要和后端一起了解和设计产品的业务数据模型。它的好处有很多:
      1. 是对业务的认识理解更深
      2. 对业务的整体框架理解更全面
      3. 对业务的数据结构更熟悉，更得心应手
      4. 开发时的帮助很大，能清晰的反馈后台接口的错误

3. 前端架构设计

架构阶段

后端的架构师是技术选型、语言选型�、分布式、数据库、微服务、公用接口的设计。那么前端的架构师，就是�框架选型、业务逻辑、业务流程、构建工具、前后端沟通与合作模式、中后台及其公用组件的�系列设计。

0. 是否需要自己构建？

   1. 你的构建目标？
      1. 这个构建工具需要做哪些事情？
      2. 它构建单页面or多页面应用？
      3. 选择哪个构建技术？webpack,gulp, �或再撸一个?
   2. 设计中你可能会用到的工作流(work flow)？
   3. 如何设计切换工作流时（staging, development, test, production）的变量？例如：API_URL在不同环境是不一样的。例如 CRA 使用的是 .env 文件。
   4. 让构建工具尽可能高效的工作。

1. 选择现有的构建工具

   1. React create-react-app
   2. Vue vue-cli
   3. Angular ng-cli

2 框架选择

1. React - 写React的体验，就是在写JavaScript
2. Vue - Vue快速开发，最爽的 MVVM，渐进式体验
3. Angular - 无话可说，�适合后端程序员�快速上手的前端框架

3 技术调研

1. 业务中的难点，不熟悉的技术场景，牛逼的组件等
2. 会用到的三方库，评估和选择，与当前技术栈的接入成本，维护成本
3. 是否要自己造？时间、技术、投机成本

4 技术确定

1. 技术栈
2. 组件库
3. 三方库
4. 造轮子

编码阶段

具体业务的落地和实现，在前端业务中是界面、交互、流程、逻辑的实现。

1. 界面

   1. 这个是UI水平的体现，也是前端基本功的体现。
   2. 通常码界面是简单，尽管对后端程序员来讲CSS有一点难受。

2. 交互

3. 流程

4. 逻辑

5. 复杂的前端特效

   1. 理出清单，想出对应解决思路。 1.1 能否自己写出来？ 1.2 是否必须使用三方库？ 1.3 三方库的维护成本？ 1.4 借助第三方库自己造？
   2. 无法实现？这是真的吗？
      1. 技术的无法实现？
      2. 还是没人实现过？

调试阶段

部署阶段

测试阶段

交付阶段

总结