前端开发流程那些事

[xccjk]

常见开发流程

常见的产品开发流程： 需求评审 -> 任务拆解 -> 项目开发 -> 项目测试 -> 发布上线

前端的开发流程： 初始化项目 -> 静态页面开发 -> 接口联调 -> 项目提测 -> bug修改及回归测试 -> 预发布 -> 发布上线 -> 项目复盘

那么，在开发的每个阶段，前端都可以搞什么事呢？

初始化项目阶段

在这个阶段，我们可以搞什么事情来提高效率？那就是定制一个符合自己业务需求的cli工具来初始化项目。

历史早起的前端项目，通常是直接在项目文件夹中写HTML和JavaScript的。在现在，我们为了开发效率，常常使用框架进行开发，常见的比如React、Vue等。框架本身提供了cli工具来让我们初始化项目，比如create-react-app、vue-cli等，那我们为什么需要自己定制cli工具来初始化项目呢？

通用的三方cli工具，是大而全的，基本你想要有的功能它都有考虑到，但是，我们很多时候并不需要这么强大且复杂的功能。

使用三方cli工具带来的缺点：

• 功能太全，很多三方依赖用不到，太重了
• 配置相对复杂
• 不同时期初始化的项目，版本不一致(可指定版本解决)
• 强业务相关逻辑需要手动添加，比较繁琐且容易出错

所以，我们需要自定义符合自己需求的cli工具来快速的创建项目，支持多种项目模板，强业务逻辑内置，并且方便后续的升级维护。

自定义cli所需要的功能：

• 命令式交互的
• 丰富的项目模板，比如针对管理后台、H5、小程序、React-Native、APP的模板
• 项目文件结构约定
• 模板中直接集成强业务逻辑，比如登录、oss、布局及主题等
• 模板中初始化设置相关规范，比如EsLint、Prettier、StyleLint、Jest、Husky、Git等
• 统一项目初始化版本，避免每个项目版本都不一致，方便通过迁移脚本来进行项目升级改造
• 依赖轻量化，不需要那么多的依赖

静态页面开发阶段

常常在想一个问题，前端真的只是”资源“么，就是写页面的机器么。相信每个人都不想做成这样吧！那么，我们怎么避免这种问题的出现

在页面开发阶段，有什么可以快速提高效率的方式嘛？我想应该是有的，而且大家也在经常的使用。我觉得主要在这两个方面：

1. mock平台
2. UI组件库

相信很多人在写静态页面的时候遇到过这样的问题：

• 后端接口还没写完，我写静态页面的时候没数据，怎么看写完的布局效果
• 很多业务中都有不少相同的布局方式与设计，那么，难道我在每个页面、每个项目中都重新写一遍嘛

对于上面的问题，前端应该怎么解决？

mock的几个阶段：

1. 代码中硬编码mock数据
2. 在项目中使用mock.js之类的三方包来生成mock数据，在本项目调用
3. 搭建mock平台，对外可对多项目提供统一的服务，服务端定义好结构及字段后，复制到mock平台及可生成相关mock数据

组件库的几个阶段：

1. 每个项目单独抽离业务组件
2. 和UI一起谈论好设计规范，抽离通用、常用业务组件，定义多主题，设计为多端通用组件库

接口联调阶段

在接口联调阶段，有哪些是经常遇到的问题。想想常见的，应该有以下几种问题：

问：前端内部接口请求不统一，请求方式多种多样

答：在项目模板模板中封装统一的请求方式request.ts，按照后端规范定义不同code码对应的逻辑及含义

问：新项目，后端接口请求跨域

答：针对跨域问题，前端配置对应host文件，后端也配置相关跨域端口规则

问：后端接口服务经常挂

答：开发阶段，可能接口频繁改动频繁发布，导致联调不顺畅。一般可以通过约定发布频率，比如没小时一起发布一次，或者通过部署多台服务器来解决

问：接口字段总是更改，导致前端报错

答：接口字段被后端改了后导致前端报错的问题相信前端都遇到过，那么怎么快速发现这种问题呢？我想，前端这边可以通过TypeScript或者prop-types来定义返回类型来快速发现问题，避免背锅

[Zest-Zhang]

感谢分享

[xccjk]

项目提测阶段

一般到了项目提测阶段，基本都是整体流程完整无阻塞了，很多开发人员就会认为闲下来了，除了一些修修补补的事情，基本就等着发版了，然后等待下个需求再开始进入开发。

很多人陷入了这种怪圈，就像一个没有感情的需求机器，不停的写新需求，没有对每次的需求有一个清晰的思考。在这时，我们应该怎么更进一步？

• 项目进度是核心，不因为测试过程中的问题而导致延期。对于测试中提出的问题给出及时的反馈，理清问题原因，及时协调反馈，看是产品流程设计、接口、前端哪方面的问题，不阻塞测试流程
• 事情都做了，时间也花了，为什么不想着做的更好些。高还原度的UI，运行的流畅度这些细节，都是需要考虑的
• 很多人对自己有盲目的自信的。数十个文件的修改，没有任何的注释说明，命名、提交不规范，代码逻辑比较混乱，几个月后再看都是泪
• 很多开发根本没有写单元测试的意愿。在流程测试之外，前端在这时补充相关流程的单元测试也是很有必要的，多考虑考虑异常的边界情况，核心流程覆盖到每个case
• 评审阶段不少开发对需求还是有点懵的，但是在开发结束的阶段应该会有大概的了解了，这是有时间，可以做相关的文档沉淀

总结下来就是下面几点：

1. 及时解决测试阶段的问题，不阻塞测试进度
2. UI的高度还原及应用的流畅性
3. 单元测试及文档的沉淀
4. 代码review，要是规范性的、有着合理的封装、重点逻辑的注释

[xccjk]

项目自测

根据需求和UI开发完后，需要自测功能点后才提测，这个阶段有什么需要注意的点？

开发完成后，一般需要按照下面的几步来完成功能自测：

• 流程闭环：首先确认整个流程是可以完整进行的，不能出现一点就报错，功能流程要做到闭环
• 像素级还原：对着设计图确认每个页面的UI，做到像素级还原
• 核对每个字段取值：核对页面上每个字段的取值是否正确，值的展现形式是否正确，比如有的金额展示，需要保留几位小数，金额需要怎么对齐，还有金额是加还是减，需要展示为+10或者-5这种形式，加展示为绿色、减展示为红色等。还有数据取值的异常兼容，比如值正常是数组，但是没值时返回了null或者字段直接没返回这种情况，在代码中取值时也需要考虑到
• 边界及异常场景：UI的异常场景，像备注、名称等这种可以输入很多字符的，最大字符时会不会影响UI布局的展示；数据的异常场景，包含数据为空时需要怎么展示，是整个模块直接不展示直接展示占位图，还是需要展示空数据
• 确认交互：拉上交互或者产品，一起对一下交互，看做好后是否达到预期，流程操作是否方便，有没有遗漏的交互与场景，比如做了什么操作后，需要跳转到某个页面，需要刷新哪部分数据等，都是需要注意的
• 项目中的权限逻辑：页面路由的权限逻辑控制、页面按钮的权限逻辑控制、页面字段的权限逻辑控制，最直接的就是不同权限的人，看到的页面是不一样的，按钮的操作权限是不一样的，展示的数据权限也是不一样的。需要仔细对比新老版本在不同权限下是否正确
• 文案及提示语：很多人不会关注这些细节，比如打了错别字、页面标题不对、不同状态下同一个位置文案不一样等情况

总结下来就是下面这几点：

1. 项目整体流程正常
2. UI的像素级还原
3. 数据的异常及边界场景
4. 新老版本、不同权限的情况下功能及展示是否正常
5. 每个字段的取值、文案、提示语是否正确