本文主要基于本人对前端开发方面的理解,而做的一些前端业务开发流程方面的总结。希望能帮一些新人更快更好的掌握好前端的各项技术,更快速的融入团队,提升工作效率。
不同的前端工程师,可能对该主题的理解有不同的看法,此处所阐述的仅仅是个人看法,欢迎大家批评指正。


1. 前端业务开发四大阶段

从整体上,我会将前端项目的开发流程分为四大阶段,每个阶段中有更加细致的任务和职责划分:


2. 需求评审与设计阶段

该阶段的规划和实施细节,请看下图:



该阶段的各个细分阶段没有严格的时间和顺序划分,各细分阶段往往是糅合在一起的,最终的方案是在动态的分析、修改、讨论和设计中确定出来的。部分细分任务甚至在后续开发和迭代过程中,也处于不间断的推进中。


2.1 需求分析

主要针对产品或其它相关人员所提的需求进行分析:


2.2 立项

需求分析通过后,确定需要对该项目进行推进,便需要对项目进行立项。立项过程中需要产品或项目负责人对项目进行各方面的规划,为后续进行方案制定和实施打下基础:


2.3 方案讨论

立项后,得到了公司的各项支持,那么项目推进到方案讨论阶段。针对产品需求文档说明以及各方对该项目的理解,讨论项目的具体实施方案。讨论的具体内容可能根据项目的不同而不同,前端项目一般包括以下几个方面:


2.4 交互设计


2.5 视觉设计


2.6 方案整合


3. 项目构建与开发阶段

该阶段中,前端人员开始正式的进行项目的构建和开发工作。在这个过程中遇到各类问题,需要和产品、视觉、交互以及相关负责人进行有效沟通,能靠沟通解决的就不要撸代码,避免做太多的无用功。该阶段开发人员的规划和实施细节如下图:



3.1 基础配置

该部分主要针对前端新人,对机器进行相关配置,包括:


3.2 项目初始化

包括:


3.3 应用结构搭建

在入口js文件中进行应用结构的相关配置,包括:


3.4 页面开发

具体到单个页面开发实施细则,包括:


3.5 数据mock

这部分主要包括mock各类数据,并利用这些数据将页面的主体呈现和交互完善。其中mock的数据主要包括:


3.6 功能测试

利用mock的数据以及一些测试框架,针对项目进行系统从测试并修缮相关的bug:


完成上述这些流程后,将进入到和后端一起进行接口的调试以及bug测试阶段。


4. 接口调试与bug测试阶段

该阶段一般会申请测试机器,或同后端一起搭建测试服务器来进行接口调试和bug测试。

4.1 接口调试

分为以下几个方面进行接口的调试:


4.2 bug测试

分为以下几个方面进行bug调试:


5. 项目部署与维护阶段

5.1 项目部署

一般流程包括:

  1. 向运维申请机器

  1. 打包项目并构建相关镜像包

  1. 部署到docker或物理机中

  1. 配置nginx代理策略


5.2 项目维护

主要包括: