我的工作日志
Just A Blog

非常全面的前端协作规范

iexn~2019-09-15 /默认分类

万字长文，继续刷新我的文章长度记录，涉及前端开发的方方面面。本文将持续更新和完善, 文章部分观点可能比较武断或不完整，欢迎评论和补充，一起完善该文章. 谢谢

https://juejin.im/post/5d3a7134f265da1b5d57f1ed

笔者长期单枪匹马在前端领域厮杀(言外之意就是团队就一个人)，自己就是规范。随着公司业务的扩展，扩充了一些人员，这时候就要开始考虑协作和编码规范问题了。本文记录了笔者在制定前端协作规范时的一些思考，希望能给你们也带来一些帮助.

一个人走的更快，一群人可以走得更远，前提是统一的策略，还要不断地反省和优化。

以下是目录概览, 看出这是一篇浩浩荡荡的长文

CHANGELOG

什么是规范?

规范，名词意义上：即明文规定或约定俗成的标准，如：道德规范、技术规范等。动词意义上：是指按照既定标准、规范的要求进行操作，使某一行为或活动达到或超越规定的标准，如：规范管理、规范操作.

为什么需要规范?

规范包含哪些内容?

如文章标题，前端协作规范并不单单指‘编码规范’，这个规范涉及到前端开发活动的方方面面，例如代码库的管理、前后端协作、代码规范、兼容性规范；

不仅仅是前端团队内部需要协作，一个完整的软件生命周期内，我们需要和产品/设计、后端(或者原生客户端团队)、测试进行协作, 我们需要覆盖这些内容.

下面就开始介绍，如果我是前端团队的Leader，我会怎么制定前端规范，这个规范需要包含哪些内容?

1 工作流规范

1.1 开发

1.1.1 版本规范

项目的版本号应该根据某些规则进行迭代, 这里推荐使用语义化版本规范, 通过这个规范，用户可以了解版本变更的影响范围。规则如下:

1.1.2 版本控制系统规范

大部分团队都使用git作为版本库，管理好代码也是一种学问。尤其是涉及多人并发协作、需要管理多个软件版本的情况下，定义良好的版本库管理规范，可以让大型项目更有组织性，也可以提高成员协作效率.

比较流行的git分支模型/工作流是git-flow, 但是大部分团队会根据自己的情况制定自己的git工作流规范, 例如我们团队的分支规范

Git 有很多工作流方法论，这些工作流的选择可能依赖于项目的规模、项目的类型以及团队成员的结构.

比如一个简单的个人项目可能不需要复杂的分支划分，我们的变更都是直接提交到 master 分支;

再比如开源项目，除了核心团队成员，其他贡献者是没有提交的权限的，而且我们也需要一定的手段来验证和讨论贡献的代码是否合理。所以对于开源项目 fork 工作流更为适合.

了解常见的工作流有利于组织或创建适合自己团队的工作流, 提交团队协作的效率:

1.1.3 提交信息规范

组织好的提交信息, 可以提高项目的整体质量. 至少具有下面这些优点:

社区上比较流行的提交信息规范是Angular的提交信息规范, 除此之外，这些也很不错:

另外这些工具可以帮助你检验提交信息, 以及生成CHANGELOG:

1.2 构建规范

对于团队、或者需要维护多个项目场景，统一的构建工具链很重要, 这套工具应该强调”约定大于配置”，让开发者更专注于业务的开发。笔者在<为什么要用vue-cli3?>文章中提出了vue-cli3更新有很多亮点，非常适合作为团队构建工具链的基础:

我们可以选择第三方CLI, 当然也定制自己的构建链，按照上面说的这个构建链应该有以下特点:

下面是社区上比较流行的构建工具. 当然，你也可以根据自己的团队情况开发自己的CLI, 但是下面的工具依然很有参考价值：

1.3 发布工作流规范

发布工作流指的是将‘软件成品’对外发布(如测试或生产)的一套流程, 将这套流程规范化后，可以实现自动化.

举个例子, 一个典型的发布工作流如下：

如果你遵循上面的规范，那么就可以利用社区上现有的工具来自动化这个流程. 这些工具有:

1.4 持续集成

将整套开发工作流确定下来之后, 就可以使用持续集成服务来自动化执行整个流程。比如一个典型的CI流程:

持续集成是什么，有什么意义呢?

我们需要持续集成拆成两个词分别来理解, 什么是持续? 什么是集成?

持续(Continuous), 可以理解为’频繁’或者‘连续性’. 不管是持续集成还是敏捷开发思维、看板，都认为‘持续’是它们的基础。

举一个通俗的例子，比如代码检查，‘持续的’的代码检查就是代码一变动(如保存，或者IDE实时检查、或者提交到版本库时)就马上检查代码，而‘非持续’的代码检查就是在完成所有编码后，再进行检查。对比两者可以发现，持续性的代码检查可以尽早地发现错误，而且错误也比较容易理解和处理，反之非持续性的代码检查，可能会发现一堆的错误，失之毫厘谬以千里，错误相互牵连，最终会变得难以收拾。

‘持续’的概念，可以用于软件开发的方方面面，本质上就是把传统瀑布式的软件开发流程打碎，形成一个个更小的开发闭环，持续地输出产品，同时产品也持续地给上游反馈和纠正。

那什么是‘集成’呢？狭义的集成可以简单认为是‘集成测试’吧. 集成测试可以对代码静态测试、单元测试、通过单元测试后可以进行集成测试，在应用组成一个整体后在模拟环境中跑E2E测试等等。也就是说，在这里进行一系列的自动化测试来验证软件系统。

广义的持续集成服务，不仅仅是测试，它还衍生出很多概念，例如持续交付、持续部署，如下图

OK, 总结一下为什么持续集成的好处:

对于持续集成规范一般会定义这些内容:

常用的CI服务:

扩展

1.5 任务管理

作为前端Leader少不了任务管理。看板是目前最为流行的任务管理工具，它可以帮助我们了解项目的进度、资源的分配情况、还原开发现场.

笔者毕业第一年在一家很小的外包公司中工作，初生牛犊不怕虎，我竟然给老板推销起了看板和敏捷项目管理，想要改善项目管理这块效率低下问题，老板表示很支持，但是其他成员积极性并不高, 结果当然是失败的。

当时还起草了一份‘看板实施细则’, 所以任务管理这一块也算小有心得吧.

说说一些比较好用的工具吧：

2 技术栈规范

笔者现在所在的公司之前前端技术栈就非常混乱，Vue、React和AngularJS三大框架都有, 而且风格相差也很大. 当时我就想收包裹走人. 关于技术栈不规范的下场可以参考印度的飞机: <为什么印度的飞机频繁被摔？>

很少有人能精通这三个框架的，更别说是一个团队。

三大框架跟编程语言一样都有自己的设计哲学，这跟库是不一样, 一个库的替换成本很低；而框架的背后是一个架构、一个生态。每个框架背后牵涉着开发思维、生态系统、配套工具、最佳实践、性能调优。要精通和熟练一个框架需要付出的成本是很高。

所以说团队的开发效率是基于稳定且熟练的技术栈的。稳定的技术栈规范有利于团队协作和沟通; 另外如果团队精通这个技术栈，当出现问题或者需要深入调优, 会相对轻松。

前端技术栈规范主要包含下面这些类型:

可以参考一下我们团队的技术栈规范

2.1 技术选型

如何从零对团队的技术栈进行规范, 或者说怎么进行选型呢？举个例子, 先确定备选项, 你现在要选Vue还是选React(一个可能引起论战的主题)？

恰好前几天在SegmentFault回答了一个问题: <什么时候用vue什么时候用react？>, 我讲了一个我们几年前是如何决定要使用React还是Vue的例子(注意结果不重要！)：

<谈谈技术选型的注意事项>这篇文章写得非常好，给了我一些启发。结合上面的回答的例子, 来讲一讲在对相关技术进行选型的一些方法(评分项):

综上，在这个案例中，React是胜出的。

扩展:

2.2 迎接新技术

当然，对于团队而言也要鼓励学习新的技术、淘汰旧的技术栈。因为一般而言新的技术或解决方案，是为了更高的生产力而诞生的。当团队容纳一个新的技术选型需要考虑以下几点：

就我们团队而言，每个成员都有自己感兴趣的方向和领域，所以我们可以分工合作，探索各自的领域，再将成果分享出来，如果靠谱的话则可以在实验项目中先试验一下，最后才推广到其他项目.

3 浏览器兼容规范

前端团队应该根据针对应用所面对的用户情况、应用类型、开发成本、浏览器市场统计数据等因素，来制定自己的浏览器兼容规范，并写入应用使用手册中.

有了浏览器兼容规范，前端开发和兼容性测试就有理有据，避免争议; 同时它也是前端团队的一种对外声明，除非特殊要求，不符合浏览器兼容规范的浏览器，前端开发人员可以选择忽略。

3.1 确定兼容策略

渐进增强还是优雅降级. 这是两个不同方向策略，渐进增强保证低版本浏览器的体验，对于支持新特性的新浏览器提供稍好的体验；优雅降级则是相反的，为现代浏览器提供最好的体验，而旧浏览器则退而求之次，保证大概的功能.

选择不同的策略对前端开发的影响是比较大的，但是开发者没有选择权。确定哪种兼容策略，应该取决于用户比重，如果大部分用户使用的是现代浏览器，就应该使用优雅降级，反之选择渐进增强.

3.2 确定浏览器分级

YUI就曾提出浏览器分级原则，到今天这个原则依然适用。简单说就是将浏览器划分为多个等级，不同等级表示不同的支持程度. 比如我们团队就将浏览器划分为以下三个等级:

一般而言, 根据浏览器市场分布情况、用户占比、开发成本等因素划分等级.

举个例子，下面是我们对管理系统的兼容规范:

3.3 获取统计数据

百度统计是中文网站使用最为广泛的、免费的流量分析平台. 如上图，通过这些统计平台可以获取到终端真实的浏览器使用情况, 点击查看示例。

如果公司没有开发自己监控服务，还是建议使用这些免费的，有大厂支持的监控工具:

可以从这些地方获取通用的浏览器统计数据:

确定浏览器是否支持某个特性:

4 项目组织规范

项目组织规范定义了如何组织一个前端项目, 例如项目的命名、项目的文件结构、版本号规范等等。尤其对于开源项目，规范化的项目组织就更重要了。

4.1 通用的项目组织规范

一个典型的项目组织规范如下:

对于开源项目通常还包括这些目录:

任意一个优秀的开源项目都是你的老师，例如React、Vue…

4.2 目录组织的风格

上面只是一个通用的项目组织规范，具体源代码如何组织还取决于你们使用的技术栈和团队喜好。网上有很多教程，具体可以搜索怎么组织XX项目. 总结一下项目组织主要有三种风格:

大部分情况下, 我们都是使用混合两种方式的目录结构，例如:

src/  components/      # 🔴 项目通用的‘展示组件’    Button/      index.tsx    # 组件的入口, 导出组件      Groups.tsx   # 子组件      loading.svg  # 静态资源      style.css    # 组件样式    ...    index.ts       # 到处所有组件  containers/      # 🔴 包含'容器组件'和'页面组件'    LoginPage/     # 页面组件, 例如登录      components/  # 页面级别展示组件，这些组件不能复用与其他页面组件。        Button.tsx # 组件未必是一个目录形式，对于一个简单组件可以是一个单文件形式. 但还是推荐使用目录，方便扩展        Panel.tsx      reducer.ts   # redux reduces      useLogin.ts  # (可选)放置'逻辑', 按照👆分离逻辑和视图的原则，将逻辑、状态处理抽取到hook文件      types.ts     # typescript 类型声明      style.css      logo.png      message.ts      constants.ts      index.tsx    HomePage/    ...    index.tsx      # 🔴应用根组件  hooks/           # 🔴可复用的hook    useList.ts    usePromise.ts  ...  index.tsx        # 应用入口, 在这里使用ReactDOM对跟组件进行渲染  stores.ts        # redux stores  contants.ts      # 全局常量复制代码

框架官方很少会去干预项目的组织方式，读者可以参考下面这些资源来建立自己项目组织规范:

4.3 脚手架和项目模板

在将项目结构规范确定下来后，可以创建自己的脚手架工具或者项目模板，用于快速初始化一个项目或代码模板。

相关资源:

5 编码规范

网络上大部分‘前端规范’指的都是编码规范, 这是一种‘狭义’的前端规范.

统一的编码规范对团队项目的长远维护不无裨益. 一致性的代码规范可以增强团队开发协作效率、提高代码质量、减少遗留系统维护的负担。

最直接的好处就是避免写出糟糕的代码, 糟糕的代码与新手和老手关系不大，我也见过好处工作很多年的‘资深’工程师写出恶心的代码. 这样的代码随着项目的迭代会变得难以控制。

现代的Lint工具已经非常先进，几乎可以约束各种编码行为. 比如约束一个文件的长度、函数的复杂度、命名规范、注释规范、接口黑名单、DeadCode、检查简单的逻辑错误…

每一个程序员心目中对‘好代码’都有自己的主见，统一的编码规范可以像秦始皇统一战国一样，避免不必要的论战和争议。

其实与其自己建立前端编码规范，笔者推荐选择社区沉淀下来的规范. 这方面的资源非常多，所以本文也不武断地提出自己的规范建议. 推荐下面这些资源:

5.1 Javascript

5.2 HTML

5.3 CSS

关于CSS可以学习Bootstrap这些传统UI框架，他们的代码组织性非常好, 值得学习

5.4 代码格式化

基本上，所有代码格式相关的工作都可以交给Prettier来做，在这个基础上再使用Eslint覆盖语义相关的检查

5.5 集大成的

5.6 特定框架风格指南

5.7 Code Review

上述的Lint工具和类型检查器, 可以约束代码风格、避免低级的语法错误。但是即使通过上面的Lint和类型检查，代码也可能未必是‘好代码’。

很多代码设计的‘最佳实践’是无法通过具象化的自动化工具或文档覆盖的, 这时候，’经验’或者’群体智慧’就派上用场了. 比如Code Review阶段会检查这些东西:

如果你们是第一次推行Code Review, 可以建立一个检查列表，对照着进行检查。熟练后，心中自然无码。

Code Review有很多好处，比如：

Code Review有两种方式: 一个提交时、一个是定时:

Code Review是比较难以推行的，不过这个也要看你们团队的情况，向我们钱少活多的团队，很少的时间去立马去兼顾其他成员的代码. 这时候定时Review会更有用，因为看起来更‘节省时间’.

而提交时Review则可以针对新人，比如你不信任他们的代码或者希望帮助他们提高编码能力。

相关资源:

6 文档规范

文档对于项目开发和维护、学习、重构、以及知识管理非常重要。

和写测试一样、大部分开发人员会觉得写文档是一件痛苦的事情，不过只有时间能够证明它的价值。比如对于人员流动比较大的公司，如果有规范的文档体系，转交工作就会变动非常轻松.

广义的文档不单指‘说明文件’本身，它有很多形式、来源和载体，可以描述一个知识、以及知识形成和迭代的过程。例如版本库代码提交记录、代码注释、决策和讨论记录、CHANGELOG、示例代码、规范、传统文档等等

6.1 建立文档中心

我们公司是做IM的，所以之前我们优先使用’自己的’通讯工具来分享文档，这种方式有很大问题:

  1. 如果没有存档习惯(比如后端的API文档，因为由后端维护，一般不会主动去存档), 文档就可能丢失，而且通讯工具是不会永久保存你的文档的。当丢失文件就需要重新和文档维护者索要
  2. 糟糕的是文档维护者也是自己手动在本地存档的，这样导致的问题是: 如果工作转交，其他开发者需要花费一点时间来查找; 丢失了就真的没了
  3. 每一次文档更新要重新发一份, 这很麻烦，而且可能出现漏发的情况, 导致前后不一致.
  4. 关于知识的学习、以及有意义的讨论记录无法归档。

上面介绍的是一种非常原始的文档共享方式，很多小团队就是这么干的。

对于项目本身的文档建议放置在关联项目版本库里面，跟随项目代码进行迭代, 当我们在检索或跟踪文档的历史记录时，这种方式是最方便的。

然而很多应用是跨越多个团队的，每个团队都会有自己的文档输出(比如需求文档、系统设计文档、API文档、配置文档等等)，而且通常也不会在一个版本库里。这时候文档就比较分散。所以一个统一的文档中心是很有必要。

我们公司现在选择的方案是Git+Markdown，也就是说所有的文档都放置在一个git版本库下。之前也考虑过商业的方案，譬如石墨文档、腾讯文档, 但管理层并不信任这些服务。

大概的git项目组织如下:

规范/A应用/  产品/  设计/  API文档/  测试/  其他/B应用/复制代码

Git版本库(例如Gitlab)有很多优势，例如历史记录跟踪、版本化、问题讨论(可以关联issue、或者提交)、多人协作、搜索、权限管理(针对不同的版本库或分组为不同人员设置权限)等等。

Git+Markdown可以满足开发者的大部分需求。但是Git最擅长的是处理纯文本文件、对于二进制是无能为力的，无法针对这些类型的文档进行在线预览和编辑。

所以Git+Markdown并不能满足多样化的文档处理需求，比如思维导图、图表、表格、PPT、白板等需求. 毕竟它不是专业的文档处理工具。所以对于产品、设计人员这些富文档需求场景，通常会按照传统方式或者更专业的工具对文档进行管理.

6.2 文档格式

毫无疑问，对于开发者来说，Markdown是最适合的、最通用的文档格式。支持版本库在线预览和变更历史跟踪。

下面这些工具可以提高Markdown的开发效率:

6.3 定义文档的模板

关于如何写好文档，很难通过标准或规范来进行约束，因为它的主观性比较强, 好的文档取决于编辑者的逻辑总结能力、表达能力、以及有没有站在读者的角度去思考问题。

所以大部分情况下，我们可以为不同类型的文档提供一个模板，通过模板来说明一个文档需要包含哪些内容, 对文档的编写者进行引导.

例如一个API文档可能需要这些内容:

具体规范内容因团队而异，这里点到为止.

扩展:

6.4 讨论即文档

一般情况下，对于一个开源项目来说除了官方文档，Issues也是一个很重要的信息来源。在Issue中我们可以获取其他开发者遇到的问题和解决方案、给官方反馈/投票、关注官方的最新动态、和其他开发者头脑风暴唇枪舌战等等。

所以相对于使用IM，笔者更推荐Issue这种沟通模式，因为它方便归档组织，索引和查找。而IM上的讨论就像流水一样，一去不复返。

当然两种工具的适用场景不一样，你拿IM的使用方式来使用Issue，Issue就会变得很水。Issue适合做有意义的、目的明确的讨论。所以要谴责一下在Github Issue上灌水的开发者。

关于Issue有很多妙用，推荐阅读这篇文章<如何使用 Issue 管理软件项目？>

现在很多开源项目都引入了RFC(请求意见稿)流程(参考React采用新的RFC流程, 以及Vue 最黑暗的一天), 这让开发者有‘翻身农奴、当家做主’的感觉，任何人都可以参与到一个开源项目重大事件的决策之中。每个RFC会说明决策的动机、详细设计、优缺点。除了官方文档之外，这些RFC是很有价值的学习资料。

我觉得如果不涉及机密，团队应该要让更多人参与到项目的设计和决策中，对于新手可以学到很多东西，而对于发起者也可能有考虑不周的情况。

那对于企业应用开发, Issue有用吗?

当然有用, 比如我们可以将这类话题从IM转移到Issue:

另外Issue通常通过标签来进行分类，方便组织和检索:

6.5 注释即文档

必要和适量的注释对阅读源代码的人来说就是一个路牌, 可以少走很多弯路.

关于注释的一些准则，<阿里巴巴Java开发手册>总结得非常好, 推荐基于这个来建立注释规范。另外通过ESlint是可以对注释进行一定程度的规范。

6.6 代码即文档

现在有很多种工具支持从代码中解析和生成文档, 这可以给开发者简化很多文档维护的工作。

举个例子，我们经常会遇到修改了代码，但是文档忘记同步的情况。通过‘代码即文档’的方式至少可以保持文档和代码同步更新；另外很多工具会分析代码的数据类型，自动帮我们生成参数和返回值定义，这也可以减少很多文档编写工作以及出错率。

比如可以通过下面注释方式来生成组件文档:

import * as React from 'react';import { Component } from 'react';/** * Props注释 */export interface ColumnProps extends React.HTMLAttributes<any> {  /** prop1 description */  prop1?: string;  /** prop2 description */  prop2: number;  /**   * prop3 description   */  prop3: () => void;  /** prop4 description */  prop4: 'option1' | 'option2' | 'option3';}/** * 对组件进行注释 */export class Column extends Component<ColumnProps, {}> {  render() {    return <div>Column</div>;  }}复制代码

相关的工具有:

7 UI设计规范

这是一个容易被忽略的规范类型。笔者就深受其苦，我们公司初期UI并不专业，没有所谓的设计规范，这就导致他们设计出来的产品都是东借西凑，前后不统一，多个应用之间的组件不能复用。这搞得我们不得不浪费时间，写很多定制化样式和组件，为他们的不专业买单.

关于UI设计规范的重要性有兴趣的读者可以看这篇文章<开发和设计沟通有多难？- 你只差一个设计规范>.

简单总结一下UI设计规范的意义：

建立一个定义良好的设计规范需要UI设计和开发的紧密配合，有时候也可以由我们前端来推动。

比如很多开源的UI框架，一开始都是开发者YY出来的，并没有设计参与，后来组件库慢慢沉淀成型，UI设计师才介入规范一下。

如果你们团队不打算制定自己的UI设计规范，则推荐使用现成的开源组件库：

这些开源组件库都经过良好的设计和沉淀, 而且配套了完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），可以帮助业务快速设计出高质量的产品原型。

8 测试规范

测试是保障代码质量的重要手段，但是很少有人愿意在这里花太多时间。

比如笔者，我很少会去给业务代码和组件写单元测试，除非自己对代码非常没有信心，按照我的理念写测试不如将代码写得更简单一点，比如把一个函数拆分为更小的函数，保持单一职责。

但是对于一些底层、共享的代码模块还是有测试的必要的。

我在不知道测试什么？这些是你需要知道的软件测试类型和常识文章中，列举了一些开发者需要关注的测试类型和常识, 如果按照测试的阶段进行分类，大概是这样子的:

其中前端开发者需要关注的主要有以下几种测试类型:

因为对于小公司来说整个软件开发流程可能没有那么规范，比如很难构建一个完整的端对端测试环境，这些都不是前端团队可以操作的范围, 所以自动化测试很难推行。但是可以根据团队和业务情况逐步进行开展。

可实施性比较高的, 也比较简单是单元测试，所以本文也重点关注单元测试.

8.1 测试的流程

首先要定义一个合适的软件测试流程, 合适的测试流程可以降低开发和测试团队之间的沟通协作成本、提高测试效率。例如我们团队目前的测试流程:

8.2 单元测试

单元测试有很多好处, 比如:

测什么?

业务代码或业务组件是比较难以实施单元测试的，一方面它们比较多变、另一方面很多团队很少有精力维护这部分单元测试。所以通常只要求对一些基础/底层的组件、框架或者服务进行测试, 视情况考虑是否要测试业务代码

测试的准则:

单元测试指标:

一般使用测试覆盖率来量化，尽管对于覆盖率能不能衡量单元测试的有效性存在较多争议。

大部分情况下还是推荐尽可能提高覆盖率, 比如要求语句覆盖率达到70%；核心模块的语句覆盖率和分支覆盖率都要达到100%. 视团队情况而定

扩展:

相关工具

9 异常处理、监控和调试规范

很多开发者常常误用或者轻视异常的处理, 合理有效的异常处理可以提高应用的健壮性和可用性，另外还可以帮助开发者快速定位异常.

9.1 异常处理

<阿里巴巴的Java开发手册>中总结的异常处理规范对JavaScript的异常处理也很有参考意义，比如:

然后再根据JavaScript本身的异常处理特点总结一些规范行为, 例如:

资源:

9.2 日志

对于前端来说，日志也不是毫无意义(很多框架性能优化建议在生产环境移除console)。尤其是在生产现场调试代码时，这时候可贵的控制台日志可以帮助你快速找到异常的线索.

不过通常我们只要保留必要的、有意义的日志输出，比如你不应该将console.log放到一个React渲染函数中、或者放到一个循环中, DDos式的日志信息并不能帮助我们定位问题，反而会影响运行的性能. 所以需要一个规范来约束日志输出行为, 比如:

扩展资源

9.3 异常监控

因为程序跑在不受控的环境，所以对于客户端应用来说，异常监控在生产环境是非常重要的，它可以收集各种意料之外生产环境问题，帮助开发者快速定位异常。

异常监控通常会通过三种方式来收集异常数据:

  1. 全局捕获。例如使用window.onerror, 或者unhandledrejection
  2. 主动上报。在try/catch中主动上报.
  3. 用户反馈。比如弹窗让用户填写反馈信息.

和日志一样，不是所有‘异常’都应该上报给异常监控系统，譬如一些预料之内的‘异常’，比如用户输入错误、鉴权失败、网络错误等等. 异常监控主要用来上报一些意料之外的、或者致命性的异常.

要做好前端的异常监控其实并不容易，它需要处理这些东西:

对于小团队未必有能力开发这一套系统，所以推荐使用一些第三方工具。例如

扩展:

10 前后端协作规范

前端是Web的一个细分领域，往往不能脱离后端而存在。所以和后端协作的时间是最长的.

10.1 协作流程规范

前后端团队经过长期的合作，一般可以总结出一条对于双方开发效率最优的协作流程. 将这个落实为规范，后面的团队成员都遵循这个步调进行协作。

一个典型的前后端协作流程如下:

  1. 需求分析。参与者一般有前后端、测试、以及产品. 由产品主持，对需求进行宣贯，接受开发和测试的反馈，确保大家对需求有一致的认知
  2. 前后端开发讨论。讨论应用的一些开发设计，沟通技术点、难点、以及分工问题.
  3. 设计接口文档。可以由前后端一起设计；或者由后端设计、前端确认是否符合要求
  4. 并行开发。前后端并行开发，在这个阶段，前端可以先实现静态页面; 或者根据接口文档对接口进行Mock, 来模拟对接后端接口
  5. 在联调之前，要求后端做好接口测试
  6. 真实环境联调。前端将接口请求代理到后端服务，进行真实环境联调。

10.2 接口规范

首先应该确定下来的是接口规范。其实使用哪种接口标准是其次，重要的是统一，且要满足前后端的开发效率要求.

笔者不建议后端去定义自己的接口标准，而应该去选择一些通用的、有标准定义接口形式, 例如:

接口设计需要注意的点:

10.3 接口文档规范

后端通过接口文档向前端暴露接口相关的信息。通常需要包含这些信息：

人工维护导致的问题:

上文‘代码即文档’就提到了人工维护接口文档可能导致代码和文档不同步问题。

如果可以从代码或者规范文档(例如OpenAPI这类API描述规范)中生成接口文档，可以解决实现和文档不一致问题, 同时也可以减少文档编写和维护的投入.

10.4 接口测试与模拟

为了做到高效率的前后端并行开发，接口的测试与模拟是必要的。

针对接口测试与模拟，存在下图这样一个理想的模型:

一切从定义良好的接口文档出发，生成Mock Server和Mock Client, Mock Server给前端提供模拟数据，而Mock Client则辅助后端对它们的接口进行测试.

资源:

11 培训/知识管理/技术沉淀

我觉得一个团队的知识管理是非常重要的. 你要问一个刚入行的新手加入团队希望得到什么？很多人的回答是’学习’, 希望自己的技术可以更加精进, 钱倒还是其次。

然而现实是目前很多公司的氛围并不是这样的，一天到晚写业务代码、工作量大、每天做重复的事情，而且还加班，工作多年技术也没感觉有多少进步, 确实会让人非常沮丧。包括笔者也是这样的。

所以为了改善这种情况，我来聊聊最近在‘小团队’做的一些尝试.

11.1 新人培训

如果团队有规范的新成员培训手册，可以节省很多培训的时间，避免每次重复口述一样的内容。培训手册包含以下内容:

产品架构与组织架构. 介绍公司背景和产品，一般组织的团队结构和产品的架构是相关联的. 以笔者所在公司为例, 主要产品是即时通信:

产品研发流程: 介绍产品开发和迭代会涉及到的流程、以及团队之间的协作衔接，例如:

培训手册将可以文档具象化的内容整理为文档，和上文说到的Code Review一样，一些东西无法通过文档来说明，所以我们一般会搭配一个‘培训导师’，在试用期间，一对一辅导。

11.2 营造技术氛围