Skip to content

Latest commit

 

History

History
182 lines (140 loc) · 10.3 KB

workflow.md

File metadata and controls

182 lines (140 loc) · 10.3 KB
Raw

前端工作流程

针对于前后端分离的项目, 前端可以形成一套比较稳定的工作流程, 涉及软件开发生命周期中的各个环节.

  1. 需求分析

    也就是需求评审, 此时应该有界面原型, 让大家了解业务流程. 评审时应该积极参与讨论, 尽量提出自己的疑问和想法, 有助完成后面的开发任务.

  2. 划分页面

    根据需求和原型列出有哪些页面要开发, 分清职责边界, 系统边界, 哪些是后端做, 哪些是前端做. 如果涉及到 Hybrid APP 时, 还要定好哪些是 APP 端做.

  3. 制定计划

    即安排版本发布计划, 分配任务时一般用 MSProject 做甘特图.

    那么如何安排每个月的工作任务即发布版本的计划呢?

    • 版本发布计划的总体原则: 小步前进(每次发布都包含少量的新功能或优化调整), 快速迭代(先确保完整的业务流程可以使用, 再逐步优化升级), 保持稳定的版本迭代节奏(让团队有适当的挑战和压力)
    • 每月月初会确定月工作目标, 将目标分解并安排到每个人以确定版本工作计划
    • 每次发布版本的时间最好不要安排在节假日(周末/法定假日)的前一天, 例如最好不要在星期五发布版本, 因为如果发布版本后出现问题, 节假日会没有研发人员来处理
    • 制定每个月的工作计划时, 需要需求评审, 技术评审, 大概消耗 1d 时间
    • 每个版本发布完成后, 大概消耗 1d 时间用于处理发布后可能出现的紧急问题, 也可以适时地做些学习调整

    因此我们得出结论, 每个月大概可以稳步发布 2 个版本

    • 23d(月工作日) - 1d(评审) - 1d(休整) * 2(版本) = 20d / 2(版本) = 10d

    • 10d 为一个研发周期(包括需求分析设计/开发/测试)

      10d(研发周期) - 1d(需求/设计/UI) - 1d(测试/回归) = 8d(开发)

    xx项目 0.1.0 版本前端工作计划

xx项目 0.1.0
├── UI设计            | 1d | 2016-9-19 | 2016-9-19 | 设计师甲(UI) | 0%
|   |── 页面1
|   |── 页面2
|   └── 页面...
|
├── 制定接口           | 1d | 2016-9-19 | 2016-9-19 | 工程师甲(F2E) | 0%
|   |── 接口1
|   |── 接口2
|   └── 接口...
|
├── 页面1              | 3d | 2016-9-20 | 2016-9-22 | 工程师乙(F2E) | 0%
|   |── 页面 + mock    | 1d | 2016-9-20 | 2016-9-20 | 工程师乙(F2E) | 0%
|   └── 接口联调       | 2d | 2016-9-21 | 2016-9-22 | 工程师乙(F2E) | 0%
|
├── 页面2
|   |── 页面 + mock
|   └── 接口联调
|
├── 页面...
|
├── APP 端联调
|
└── 测试验收

  4. 制定接口

    由前端或者后端来主导, 通过预先定义好接口规范, 可以有效的提高前后端的协作效率, 详见前后端接口规范.

    设计 + 接口并行: 制定接口的时候, 设计师刚好可以根据需求来设计页面. 等接口定义得差不多, 设计稿也出来一两个了, 这时候前端就可以根据设计稿和接口规范来开发页面了.

  5. 开发页面

    此时前后端并行工作, 后端去开发接口, 而前端则安静地写着页面, 并使用接口规范产生的 mock 数据联调, 让前端可以独立完成前端部分的业务逻辑, 不受后端接口开发进度的制约

  6. 逐步联调

    随着后端接口逐步开发完成, 此时前端需要与后端联调(有接口规范和 mock 数据的协助, 能有效降低联调成本), 最终自测通过

  7. 逐步测试

    自测通过的功能, 可以交由测试人员去做功能测试, 经过集成测试和回归测试后, 最终测试验收, 发布版本

  8. 发布上线

    根据项目部署的方式, 可能涉及到前端发布和后端发布这两个过程. 前端资源的发布可以参考静态资源自动化发布方案 和 前端「零机器」部署方案

    • 简单点的只会涉及到后端项目的发布

      前端的静态资源(HTML/CSS/JS/图片等)一般集中放置在后端项目的一个文件夹中, 这种发布很简单, 直接将后端项目发布到应用服务器(例如 Tomcat)即可

      部署架构示意图

+------------------------------+       +---------------------------+
|        浏览器                |       |         ServerA           |
|------------------------------|       |---------------------------|
|                              |       |                           |
| http://server-a.com/a.html   |       | 前端(HTML/CSS/JS/图片...) |
| http://server-a.com/a.css    |   →   | 后端(Java/.NET/PHP)       |
| http://server-a.com/rest/api |       |                           |
|                              |       |     【Tomcat/IIS/Apache】 |
+------------------------------+       +---------------------------+

    • 复杂点的还会涉及到前端静态资源的发布

      这种情况下前端静态资源一般还是放在后端项目中的, 仍旧只会有后端项目需要发布, 只是为了提升页面的访问速度(主要是静态资源的加载速度), 发布时会将静态资源放到 CDN 上(例如阿里云 OSS + CDN), 这就需要在发布时替换页面中引用的资源路径为 CDN URL.

      例如发布之前的页面中引用了一个 <script src="a/b.js">, 发布时需要将 URL 替换成 CDN 上该资源对应的 URL, 一般就是 CDN 域名 + 原来资源的 URL, 例如 <script src="http://your-cdn-domain.com/a/b.js">

      需要替换的 URL 有

      • 页面中 CSS 的 link href
      • 页面中 style 的 url
      • 页面中 JS 的 script src
      • 页面中图片的 img src
      • JS 中配置的 CDN 域名变量(开发时和发布时对应不同的配置), 因为 JS 中可能需要用到动态加载的逻辑, 例如懒加载一个 JS 文件, 这时候就需要

      这么多 URL 需要替换, 都靠人工来处理有点不现实, 因此一般会使用一个前端的发布任务(例如 Gulp)来处理, 并做为后端项目发布过程中的一个环节(例如作为部署发布脚本的一个步骤). 注意静态资源发布到 CDN 上时并不需要从应用服务器中删掉这些静态资源, 以确保有资源的 URL 替换失败时, 页面也不会出现问题.

      部署架构示意图

                                      +---------------------------+
                                      |         ServerA           |
                                      |---------------------------|
                                      |                           |
                                      | 前端(HTML)                |
                                      | 后端(Java/.NET/PHP)       |
                                      |                           |
                                      |     【Tomcat/IIS/Apache】 |
                                      +---------------------------+
+------------------------------+
|        浏览器                |
|------------------------------|
|                              |
| http://server-a.com/a.html   |  ↗
| http://cdn.com/a.css         |  ↘
| http://server-a.com/rest/api |
|                              |
+------------------------------+

                                       +---------------------------+
                                       |         CDN               |
                                       |---------------------------|
                                       |                           |
                                       | 前端(CSS/JS/图片...)       |
                                       |                           |
                                       +---------------------------+

    • 再复杂点的就是前后端分开发布了

      这种部署方式与上面的方式基本相同, 只是会将前端资源从后端项目中分出来部署到静态服务器(例如 Nginx)上, 一般通过反向代理来访问后端.

      这种情况下, 前后端彻底分离, 项目也可能是分开的, 彼此保持独立.

      发布时前后端项目分开部署, 前端项目部署到静态服务器, 后端项目部署到应用服务器. 如果涉及到使用 CDN, 也需要在发布前替换引用的资源为 CDN URL.

      部署架构示意图

                                      +---------------+               +-----------------------+
                                      |     ServerA   |               |         ServerB       |
                                      |---------------|               |-----------------------|
                                      |               |               |                       |
                                      | 前端(HTML)    | --反向代理--> | 后端(Java/.NET/PHP)   |
                                      |               |               |                       |
                                      |               |               |                       |
                                      |     【Nginx】 |               | 【Tomcat/IIS/Apache】 |
                                      +---------------+               +-----------------------+
+------------------------------+
|        浏览器                |
|------------------------------|
|                              |
| http://server-a.com/a.html   |  ↗
| http://cdn.com/a.css         |  ↘
| http://server-a.com/rest/api |
|                              |
+------------------------------+

                                       +----------------------+
                                       |         CDN          |
                                       |----------------------|
                                       |                      |
                                       | 前端(CSS/JS/图片...)  |
                                       |                      |
                                       +----------------------+