打磨移动时代的前端团队（一）—— 迷局篇

---

（一）迷局篇

值得思考的一些问题

1. 团队的发展阶段与策略
2. 生产效率与性能哪一个更重要？

团队的发展阶段与策略

---

多大的脚穿多大的鞋，抛开团队特点谈架构，都是耍流氓！

根据布鲁斯·塔克曼(Bruce Tuckman)的团队发展阶段模型分为

1. 组建期（Forming）
2. 激荡期（Storming）
3. 规范期（Norming）
4. 执行期（Performing）
5. 休整期（Adjourning）

所有五个阶段都是必须的、不可逾越的，团队在成长、迎接挑战、处理问题、发现方案、规划、处置结果等一系列经历过程中必然要经过上述五个阶段。而我们要做的，就是如何快速过渡到最有利阶段。

不同阶段的思考

1. 组建期

   1. 【第一要务】支撑业务开发,团队建立信任，达成共识
   2. 【招人策略】无暇等待高手出现，进人可以略宽松，能开发业务代码即可，后续可以培训。
   3. 【技术选型】选择偏保守的技术，确保进来的人都对此技术有经验，同时要兼顾维护。
      1. 库: zeptojs Animate.css bootstrap underscore
      2. 模块加载：requirejs（务必支持AMD,以便向后兼容）
      3. 框架：根据团队能力，用不用都行。
      4. 版本控制: 建立前端git组，每个项目独立建立git
   4. 【技术沉淀】
      1. 工作流
         1. 快速搭建简易工作流，使得所有人的工具与流程都是统一的，可以根据业务线紧急 程度无缝调配人力
      2. 组件库
         1. 在开发中总结业务特性，抽象有复用价值的组件，为后续的组件库做准备。

2. 激荡期

   1. 【第一要务】快速支撑业务开发，了解团队能力，改进工作流程，提高效率，减少加班现象。
   2. 【招人策略】相对提高标准，找一些有经验的人进来，快速推进架构演化。（不宜招新手）
   3. 【技术选型】根据团队能力，选择更适合的架构并能兼容已有工作流
      1. 库: zeptojs
      2. 模块加载: requirejs
      3. 预编译: (选择更加优雅易于维护的强缩风格的预编译语言，从此无需担心格式混乱的代码维护问题。用编译时的自动检测代替代繁文缛节的带码规范文档。)
         1. jade
            1. 使得html可以模块化，又能复用为前端模板
         2. stylus
            1. 使得css可以模块化。不仅支持强缩进，也支持css传统写法，上手几乎无学习成本。
         3. coffee-script
            1. 类似ruby的语法糖，熟练使用将大幅度缩减了代码的行数（在过渡阶段，工作流也支持js文件编译）
      4. 版本控制: 建立git提测上线流程。
   4. 【技术沉淀】
      1. 工作流
         1. 虽然没有选用前端框架，但工作流已经顺畅的支撑了生产过程中的各阶段的需求。
         2. 工作流工具易于部署与升级。
      2. 前后端分离
         1. 前后端通过 同步与异步数据进行基于文档的并行开发。前端有独立的开发进行联调。
      3. 组件库
         1. 引入了前端包管理器 bower，使得所有可复用的前端组件可以在内网环境任意安装

3. 规范期

   1. 【第一要务】高效响应业务开发。团队规则，价值，行为，方法，工具确保建立。提高团队效能.确立队员技术发展方向。
   2. 【招人策略】倾向于招高手，同时也可以招一些有潜力的新手（高能高潜原则）
   3. 【技术选型】之前为了快速支撑业务形成的架构为成为A架构，到了这个阶段，就需要更专业的B架构来。A架构的产品继续维护。
      1. 库 zepto LoDash SUI-mobel
      2. 框架: react + Flux（redux）
      3. 模块加载： webpack
      4. 前后端分离: apiAutoChecker
      5. 预编译: jade , stylus, coffee
   4. 【技术沉淀】此阶段将团队技术沉淀开源出去，拥抱开源不再闭门造车。（注意防止公司机密信息泄露）
      1. 工作流
      2. 前后端分离
         1. 研发“api平台”网站，代替文档。
         2. api接口自动校验检测，实时自动化校验 。
      3. 追求极致的前端性能
         1. 重新考量专注于移动端html5 hybrid的性能优化方案，形成全栈式解决方案。
      4. 组件库
         1. 目前选择了SUI-mobel，若产出有业界通用价值的组件，会给SUI发提交PR，贡献开源。
         2. 形成组件库生态
            1. 学习使用
            2. 开发
            3. 提交
            4. 迭代

4. 执行期

   1. 【第一要务】不仅高效支持业务开发，更要走在业务前面，技术驱动产品。剔除团队中的“坏苹果”。

   2. 【招人策略】需要具有业界影响力的牛人与高潜力的新人。

   3. 【技术选型】不断迭代前端解决方案，做到极致。

   4. 【技术沉淀】

      1. 追求极致的代码质量。
      2. 最求极致的性能与交互体验。
      3. 追求极致的工作流
      4. 利用高效率工具解放人力，推出团队的内部技术产品，并开源。
      5. 鼓励开源贡献。
      6. 推行知识共享。
      7. 跨公司的团队技术交流，提升影响力。
      8. 每个队员都有自己的研究课题

5. 休整期

   1. 【第一要务】做好善后

生产效率与性能哪一个更重要？

---

就像问吃饭和睡觉哪一个重要？哪个是你最亟待解决的，哪一个就最重要!

结语

1. 拥抱变化才是不变的真理

推荐拓展阅读

打磨移动时代的前端团队（二）—— 解题篇