Winter 在政采云分享实录 -《前端团队的成长》

原创不易，但愿能关注下咱们，再顺手点个赞~~

本文首发于政采云前端团队博客： Winter 在政采云分享实录 -《前端团队的成长》

前言

<FDay>前端技术分享会，是政采云前端团队（ZooTeam）的月度分享会。 2019 年的 10 月期，咱们有幸邀请到了 Winter（程劭非） ，为咱们的前端同窗作了一期关于前端团队成长的主题分享。以前也邀请过其余大牛来政采云 <FDay> 分享，如阿里云 IoT 高级技术专家@额台，宋小菜大前端负责人@Scott 等，惋惜当时都没作现场记录。Winter 这一期，咱们的同窗现场作了一下分享记录，全程 Winter 大大妙语连珠，你们笑声阵阵，现场速记不免存在细节遗漏，文章部份内容存在简略，但相信依然能传递一些有价值的认知和思考，帮助到列位看官。

什么是一个好的前端团队？氛围好？技术强？机会多？一千个读者心中有一千个哈姆雷特，相信每一个人都有不一样的答案。就拿刚毕业的应届生就业来讲，有人想去大厂，由于大厂基础设施完善，有大牛带，成长快；也有人想去小公司，由于小公司的基础设施不完善，就会有不少的机遇，有晋升的空间。本次分享 Winter 从前端团队的基石、前端团队的核心因素和前端团队的亮点三方面来谈一谈这个话题。

分享嘉宾简介

Winter（程劭非），前后任职于微软、盛大、阿里巴巴，阿里时期担任手机淘宝前端负责人，带领团队产出 Weex 等跨平台的移动端解决方案。极客时间《重学前端》系列课程做者。

前端团队的需求模型

咱们先经过一张模型图来解读一个前端团队中存在的角色以及各个角色之间的联系。

这张图能够从两个角度看，一是从公司的角度往下看，二是从员工的角度往上看。其中，团队在模型中出现了两次，它的地位和重要性显而易见。

团队 Leader 是一个很重要的角色，既要应对团队成员的需求，又要从公司的角度来应对上级的需求。对公司来讲，公司给团队的是必定的资源，这些资源包括薪酬、工位、电脑等等。

团队给员工的是成长，团队给队员的机会是均等的，团队就像是培育小树苗的土壤，外部条件都是同样的，但小树苗能长多高长多大仍是要看我的了。

员工给团队的是技术和劳动，技术是专业的代名词，它和劳动不能划等号，不是任何一我的过来工做两小时的产出都是同样的。

团队给公司的是业务价值，业务价值就和你们年终的绩效挂钩了。

这四个环节缺一不可，都齐活了才是一个完整的前端团队需求模型。

前端团队的基石——质量和效率

一个技术团队安身立命的根本，是有着过硬的技术实力。那么如何才能作到高效率的开发进而产生高质量的交付呢？我们来看一下 Winter 大大价值几千万的认知~~

工具链

首先，要造成工程体系，创建一套属于本身的工具链。所谓工具链，包含两层含义。工具，顾名思义，是用来干活的，此处要干的活是为了生成能够运行的程序或库文件；链，即链条，之因此能称之为链条，说明不止一个东西，而后，按照对应的逻辑串起来就成了咱们所说的工具链。

工具不是一个独立的个体，它们之间是有协同，有合做的。工具链是在每个大型开放源码项目（包括 Linux 内核自己）背后默默支撑的力量。它们由一组必要的工具和软件构成，用于编译和调试从最小的工具软件到你能够想象的最复杂的具备 Linux 内核特征的各类软件。

在一套工具链中最核心的就是项目初始化（Init）、项目启动（Run）、测试（Test）以及项目的发布（Publish）四个节点。在一个项目启动前，就必需要想清楚这四个节点要用什么样的工具去实现。

须要注意的是，在工具链的使用过程当中须要创建一个数据统计体系，在使用过程当中有问题能够及时反馈而不是本身默默的想办法解决，你不是红领巾，作好事要留名。

另外，通过数据的分析能够清晰的定位哪些工具是你们经常使用的，哪些是基本不用的，后续能够根据这些数据对经常使用的工具进行优化，淘汰不经常使用的工具。

微软资深工程师 Scott Hanselman 说过，“对于开发者而言，最有力的工具就是自动化工具”（The most powerful tool we have as developers is automation）。工具链的打通使得开发者们在交付软件时能够完成生产环境的构建、测试和运行；正如 Amazon 的 VP 兼 CTO Werner Vogels 那句让人印象深入的话：“谁开发谁运行”。（You build it, you run it）。

持续集成

其次，要作到持续集成。持续集成是客户端发明的一个概念，它里面有两个核心的概念，Daily Build 和 BVT。那么什么是持续集成？在软件工程中，持续集成（CI）是指将全部开发者工做副本天天屡次合并到主干的作法。怎么样才算是“持续”？对于一天须要集成多少次，并无一个明确的定义。通常就是按照本身项目的实际须要来设置必定的频率，少则可能几回，多则可能达几十次。持续集成的优点在于：

• 减小等待时间：持续集成缩短了从开发、集成、测试、部署各个环节的时间，从而也就缩短了中间能够出现的等待时间。
• 解放了重复性劳动：自动化部署工做能够解放集成、测试、部署等重复性劳动，并且机器集成的频率明显能够比手工高不少。
• 更高的产品质量：集成服务器每每提供 Code Review、代码质量检测等功能。对代码不规范或者有错误的地方会进行标识，也能够设置邮件、短信等进行告警。而开发人员经过 Code Review 也能够持续提升编程的能力。

近几年，伴随着前端技术突飞猛进的发展，前端开发中先后端分离，工程化，自动化等现代化的开发模式越来普及，前端项目也引入了编译，构建，单元测试等现代软件工程化的标准环节，这样大大提升了前端的开发效率和业务交付能力。

前端持续集成主要包含 Check-in Build 和 Lint + Rule Check 两部分。其中，Check-in Build 就是每次提交代码都 Check 一次，及时发现问题，Lint 指的是代码规范的校验，Rule Check 包含了业务相关的检查，DOM 相关的性能方面的检查（例：页面上一张图片的体积过大）以及 JS 报错方面的检查。

说白了，前端持续集成就是把代码测试、打包、发布等工做交给一些工具来自动完成。这样能够提升效率，减小失误，开发人员不再用关心代码 Push 之后的事情，写代码更加专一和自信。

技术架构

最后，要创建一套 高复用性的 技术架构。

客户端架构主要是用来解决软件需求规模带来的复杂性问题的；服务端架构主要是用来解决大量用户访问带来的复杂性问题的；而前端架构主要是用来解决大量页面需求带来的重复劳动问题的。

那么，问题来了，前端架构是如何解决大量页面需求带来的重复性劳动的问题的呢？下面将从库、组件、模块、搭建系统、全栈方案五个方面来阐述：

• 库指的是有复用价值的代码，例如开发过程当中常常会用碰到 URL 解析、AJAX 请求、ENV（用于判断当前属于什么环境）等问题，这些代码能够封装在方法库中，方便调用。

• 组件指的是 UI 上屡次出现的元素，例如轮播、Tab 等，组件能够在页面上屡次复用。有句话怎么说来着，组件复用一小步，开发提效一大步。

• 模块指的是常常被使用的业务模块，例如登陆模块，它的特色是隔离性比较高，能够作到即插即用。

• 搭建系统包括模板化搭建和模块化搭建。咱们在 前端工程实践之可视化搭建系统（一）中分享过咱们政采云的基于业务组件快速生成页面的搭建系统，它把已经成型的组件像乐高玩具的零件同样，使用拖拽的方式组装成最终的页面，同时可以让各个业务快速的接入，提高人效，节约成本。

• 全栈方案包括框架和组建体系两部分。框架的建设与体系的组件与团队息息相关，对于这两点只需定义两个关键词 面向将来 和 面向场景。

• 在有了库、组件、模块、搭建系统、全栈方案这些“武器”后，前端架构就能轻松的解决大量页面需求带来的重复性劳动的问题。

前端团队的核心——业务价值

大部分技术同窗都会认为，我的技术是核心竞争力，那只要安安心心作技术就行了，管什么业务？个人技术好了，业务方确定会乖乖来用个人系统的。这种想法固然是有道理的，技术是咱们的立身之本，这是必定要抓好的。可是，若是只这样去思考问题，那么你是很危险的。由于，你会发现，不少同窗不只技术好，同时也具有良好的产品思惟和业务推进逻辑的能力，比技术更重要的是思惟的转变。

数据驱动思考方式的方法论

在作项目的时候，首先要分析业务，结合一些数据指标，制定一个合理的目标。接着要采集一些数据，创建数据展现系统，数据能帮助咱们精准的定位业务的痛点、难点。有了这些前期准备后，就能够制定技术方案。以后就是按照既定的方案从小规模实践到推广全公司落地再到造成制度。最后，在一个项目完成后，复盘，对数据进行分析，总结经验与不足。

淘宝详情页优化背后的故事

淘宝和政采云同样都是作电商的，电商公司都遵循这样一个规律：成交 = 访问量 * 转化率 * 客单价，淘宝团队通过小规模的实验：经过一个彻底没有改变功能纯粹提升性能的小版本的上线，对数据进行分析，发现加载时长的曲线降低一个台阶，用户的访问率上升了一个台阶，造成了一个黄金交叉，证实了性能与转化率是强关联的。

页面的加载时长是页面性能的一个重要指标。有一个指标叫秒开率，关于秒开率，有一个 1秒钟法则 的说法：2G 网络 1秒进入页面，3G 网络 1 秒首屏，4G 网络 1秒页面加载完毕。当时淘宝就是以秒开率做为数据指标，自从有了秒开率，你们工做都有了动力，提效很高。

前端团队的亮点——技术驱动创新

Weex 在双十一项目中，参与并支撑了的移动端主会场界面展现和动态处理。在云端实现了天猫前端运营发布系统“斑马”的对接，在前端开发实现了主会场的界面模块和业务逻辑处理，同时在客户端上对接了手机天猫、手机淘宝。想作到这些，光凭一个好的创意和想法、或凭借员工超强的执行力、或靠砸钱砸机器，都是没有办法作到的，这个问题须要技术驱动力来解决，也就是咱们这里所说的技术驱动创新！Weex 的诞生正是技术驱动创新的结果！

Weex 的前世此生

Weex 是一个动态化的高扩展跨平台解决方案，实现思路来源于 RN 与 Vue。官方文档：什么是 Weex? WEEX 是由人称 Vue 的亚洲第二狂热粉（亚洲第一粉是日本一哥们，作了一个 Vue 的日本整站，哈哈）的勾三股四（原名：赵锦江）牵头，一期开发成本 10 人客户端团队，2 个月专职开发，后期开发成本 20 人（峰值 40 人以上）客户端专职团队。 Weex 相对 Web 来讲有一个体验升级，对于客户端来讲 Weex 又是一个动态搭建的方案。

Weex 的业务价值

Weex 的业务价值在于开源 P/R、大促 Native 化。Weex 团队在整个双十一的筹备过程当中和需求方进行了深刻的沟通和交流，并拿出了切实有效的技术方案，很好的解决了其中的不少关键环节问题，而且 Weex 做为一个新的技术方案很好的经受住了如此重要的“考验”！

总结

从公司的角度来看，衡量一个前端团队价值的方式是类似的，前端团队的基石是质量和效率。在此基础上，区分前端团队的核心因素是业务价值，对于少数前端团队，可能还会为公司和行业带来创新。

感谢各位的阅读，有任何建议和意见均可以在下方留言，小编定当积极改正。

活动照片展现

参考文章

• DevOps概念、关键问题、工具链及文化等详细介绍

• 前端开发如何让持续集成/持续部署(CI/CD)跑起来

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

推荐阅读

1024 巨献！！一文看尽前端过去一年的精华沉淀（700 篇好文大汇总）

前端工程实践之可视化搭建系统（一）

自动化 Web 性能优化分析方案