[关闭]
@hanting003 2016-08-05T18:16:35.000000Z 字数 7493 阅读 1541

如何打造公司级公共前端团队

前端 管理 Angular H5

作者：张耀春

本文为8月4日，『前端之巅』群『滴滴公共FE团队技术开放月』第一场分享活动总结整理而成，转载请注明来自『前端之巅』公众号。

张耀春，滴滴公共前端团队负责人，2009年接触前端，5年多博客撰写经历。国内较早接触Node.js，2013年开始应用React、Angular、Polymer到业务组件中，2014年曾参与翻译《Professional Node.js》一书。最近探索和应用的新技术：rollup、riot、vue等，领导团队一起钻研新技术的书籍预计于今年8月底出版。

作为公司级的公共前端团队，应该如何对团队进行定位，在实践过程中应注意哪些问题，如何打造这样的团队？本文对滴滴公共前端团队的实践进行了总结，希望能带给读者一些启发。

一、团队定位

1. 团队情况

滴滴公共前端（FE）团队现在有十多个小伙伴，男女比例为 1： 1。

主要包含以下几大职能方向：

团队职责：

2. 团队实践

作为公司级公共前端团队，滴滴公共FE团队的实践主要从以下几方面进行：

（1） 全局类：①公司统一权限登录移动化和PC改版；②移动端用户统一登录SDK。

（2）可视化方向：滴滴国内央视曝光10多次春运迁徙可视化。

（3） 组件化方向：公司级组件库——魔方。

（4）通用服务：①TMS运营和模板平台；②NPM Private。

（5）用户类：①微信等渠道内嵌的WebApp首页；②端内钱包支付等统一界面相关；③最近上线的安全行程分享；④H5前端服务化的项目：如滴滴捐献里程活动。

3. 团队努力方向

（1）努力成为公司业务线上的前端开发人员所信赖的伙伴、公司业务强有力支撑的前端技术团队。
（2）对前端业内有一定贡献的团队。

二、团队的实践和产出

滴滴公共FE团队做的实践还是很多的，现列举几个比较重大且应用度广的实践。

1. 公司级组件库：魔方

（1）痛点

魔方主要为了解决的痛点是：每一个系统UI、交互规范、组件技术都不一样，复用性低，依赖第三方开源但技术支持不到位，遇到问题没人服务。

（2）途径

为了解决问题，我们通过以下途径，综合考虑，开发了魔方。

（3）展示

以下是魔方的截图，可以通过这些截图，看到魔方所提供的主要服务。






（4）技术

魔方所用到的技术，包括以下几点：

（5）魔方PC端构建流程

由于PC我们全部依托Angular指令来编写，在WebPack采用了ngtemplate-loader。

不同环境两套配置文件：

  1. webpack.config.js  // 开发环境
  2. webpack.min.js     // 生产环境打包

区别：

  1. //webpack.min.js
  2. output: {
  3.         path: __dirname + '/dist/mofang-widget/' + version,
  4.         filename: '[name].min.js',
  5.         library: 'mofang',
  6.         libraryTarget: 'umd'
  7.     },

我们打包之后的目录：

  1. dist/mofang-widget/0.1.1/mofang-widget.min.js

如何配置第三方依赖：

  1. resolve: {
  2.         root: path.join(__dirname, 'src'),
  3.         alias: {
  4.             components: path.join(__dirname, 'src', 'components'),
  5.             vendor_a: path.join(__dirname, 'src', 'vendor'),
  6.             ui_bootstrap_a: path.join(__dirname, 'src', 'vendor', 'angular-ui-bootstrap'),
  7.             ui_select_a: path.join(__dirname, 'src', 'vendor', 'angular-ui-select'),
  8.             resource_a: path.join(__dirname, 'src', 'vendor', 'angular-resource'),
  9.             sanitize_a: path.join(__dirname, 'src', 'vendor', 'angular-sanitize')
  10.         }
  11.     }

如何处理directory里面的template：

  1. // 目录结构
  2. components
  3.     didi-list
  4.         didi-list.html
  5.         didi-list.js
  1. // bn-list.js
  2. var templateListUrl = require('./bn-list.html');
  3. // 指令代码：
  4. {
  5.     templateUrl: templateListUrl
  6. }
  1. module: {
  2.         loaders: [
  3.             {
  4.                 test: /\.html$/,
  5.                 loader: 'ngtemplate!html'
  6.             }
  7.         ]
  8. }

如何按版本发布：

整体我们依赖pkg.json的version：

  1. var version = require('./package.json').version;
  3. // 方案一：
  4. plugins: [
  5.     new webpack.DefinePlugin({
  6.             __VERSION__: JSON.stringify(version)
  7.         })
  8. ]
  10. // 方案二：
  11. callbackLoader: {
  12.         getVersion: function () {
  13.             return "'" + version + "'";
  14.         }
  15.     }

关于iOS 9 Safari iframe src with scheme not working：

  1. 具体可以参阅：
  2. http://stackoverflow.com/questions/31891777/ios-9-safari-iframe-src-with-custom-url-scheme-not-working

WebPack 动态加载：

  1. require.ensure([], function (require) {
  2.                 var qqmap = require('./qq/qqmap');
  3.                 callback && callback(qqmap);
  4.             }, 'qqmap');
  7. require.ensure([], function (require) {
  8.                 var alimap = require('./ali/alimap');
  9.                 callback && callback(alimap);
  10.             }, 'alimap');

2. 公司级统一运营服务：TMS

（1）痛点

TMS为了解决的痛点如下：

（2）途径

我们采取了以下途径：

（3）技术

我们采用更定制化的Nodejs服务框架（从Sailsjs参考了很多）+mongo+pm2，结合公司发布系统、定制日志监控和脚本化运维规范。

（4）架构图

详细的架构如下图所示。

（5）遇到的技术问题

①如何灵活地进行线上线下配置

我们的DNode系统里面，默认支持2个配置文件。

  1. config/env/dev.js
  2. config/env/prod.js
  1. // config/env/dev.js
  2. {
  3.     port: 1234
  4. }
  6. // config/env/prod.js
  7. {
  8.     port: 8000
  9. }

启动服务的时候，控制参数：

默认走的是dev的所有配置。

  1. dnode app.js --prod

这样默认就执行了所有prod的配置参数。

②脚本化运维DNode服务：

整体我们还是依托公司的发布系统，设置后置脚本来部署和安装部分依赖。

  1. build.sh    --- 部分安装，配置等
  2. control.sh  --- 提供一些方法来控制服务，启动 pm2 的参数和日志路径等
  4. * `./control.sh start`：启动服务，如果服务已经启动会报错。
  5. * `./control.sh restart`：重启服务，要求服务已经启动才能正确执行。
  6. * `./control.sh reload`：优雅重启服务，要求服务已经启动才能正确执行。
  7. * `./control.sh stop`：停止服务

③日志监控：

设置固定的日志，依托公司统一日志监控，设置拉取策略和一些采集匹配规则。

④如何处理不同类型的文件上传

在DNode里面我们所有的请求都会安装配置的middleware数组顺序，进行流转。这样的优势在于，我们可以在一开始设置一些requestTimer的监控middleware。

首先我们检查request头是：

  1. if (req.is('multipart/form-data')) {
  3. }

然后我们会通过formidable的2个方法：

  1. var formObj = new formidable.IncomingForm({
  2.             uploadDir: uploadPath,
  3.             keepExtensions: true,
  4.             multiples: false
  5.           });
  8. formObj.parse(req, function(err, fields, files) {
  9.     // 这里面我们可以 check file.type 来对不同类型的文件进行不一样的处理：
  10.     // 比如 css 文件：
  11.     if (files.file.type == 'text/css') {
  12.         minCssCode = new CleanCss().minify(cssCode).styles;
  13.     }
  14.     // 比如 js 文件：
  15.     if (files.file.type == 'text/javascript') {
  16.         minJsCode = UglifyJS.minify(jsCode, {fromString: true}).code;
  17.     }
  18.     // 比如 zip 文件：
  19.     if (files.file.type == 'application/zip' || files.file.type == 'application/octet-stream') {
  20.     }
  21. }

⑤如何限制体积：

我们这边采用的是skipper在bodyParser的middleware里面做了一次过滤。

3. MIS服务化、配置化、GUI化以及前后端分类

（1）痛点

（2）途径：

（3）技术

Nodejs+数据存储+各种配置系统+脚本。

4. WebApp首页公共化

（1）痛点

滴滴早期WebApp首页是由业务线同学维护，与业务线有一定程度耦合，新业务线接入相对比较困难，会暂用业务线同学本身已有的开发任务。

（2）途径

（3）技术

5. H5 统一登录 SDK

（1）痛点

滴滴早期的登录每个业务线都会做一套，有开发成本。不利于账号部门收敛和管理各业务线账号，不利于做一些账号安全和组件升级；登录没有打通，新业务线或运营活动接入登录成本高。

（2）途径

（3）展示

此处输入图片的描述
此处输入图片的描述
此处输入图片的描述

（4）技术

6. Npm Private

（1）痛点

前端项目越来越多，内部产出的工具包也比较多，如何自建一个私有库。

（2）途径

（3）技术

三、如何打造公司级公共前端团队

这个问题其实我每天都在思考，好像一直没有太明确的答案，这里也只是分享一些我个人的见解：

下面我从几个方面具体来谈一谈。

1. 理想中的公共团队

团队永远和人有关系，下面我从几个简单的维度，通过我对几个游戏的理解来分享一下我认为公共团队的人所需要的气质。

（1）“飙车”

敢于超越，专业性要求高：赛车手和我们一般的开车的同学相比：更专业、对车子的熟悉度更高、追求超越和不愿意被超越。我很多时候推荐团建都是去玩室内卡丁车，而且每次都发现：有一些同学愿意最后和一些跑圈快的一组再比一轮，即使最后，那可能也是其他圈里面最快的。

（2）乐高拼图

能够沉浸在技术里面，去思考问题，最终产出：乐高一般有几千块零散的拼图、需要沉下心来、而且在脑海中大概有一个架子，不断地去尝试和调整，最终完成一个作品时候，你会很自豪。

（3）潜水

敢于挑战自己惧怕的东西，克服困难，战胜自己：潜水是我开始最惧怕的一项运动，很早前我不会游泳，但我又渴望翱翔大海，在一段比较长的震痛期后，我完成了浮浅和深浅，看到了很多常人看不到的美丽景色：大海龟、大鲸鲨、暴风鱼群等。

（4）写作和分享

沟通和沉淀才能让知识更记忆深刻：我自己喜欢翻译和写一写技术总结的文章，已经成为生活中一个不可或缺的习惯。然后再分享出来，得到一些批评和反馈。

2. Leader个人水平的提高

（1）制定计划

作为团队负责人，其实我的压力还是比较大的，除了满足业务需求外，你更多还需要告诉团队方向在哪里、我们的计划是否是可以落地的。所以我会制定一些计划来提高个人的水平。

（2）如何更合理地提供解决方案？

我自身也折腾过各种机器和环境部署、数据库，也接触过后端和安卓开发，在研究跨端体验的时候，花了两个月看了iOS相关的基础书籍和代码。

很多时候解决方案的合理性和全局观，不只是你熟悉业务就可以了，我更倾向让团队的很多同学熟悉前端独立部署、如何和不同的端交互以及他们内部相关的技术组成。而且大部分时候不敢于技术革新的一个很大原因：不了解、不熟悉、没把握。

（3）如何高效地管理写代码和管理时间的分工？

很多时候时间确实是不够用的，而且有时候会参加很多会议和培训等。我管理时间一般的方式如下：

3. 团队管理

（1）对内外的沟通

（2）代码 review 和风格一致性

（3）团队学习和应用的技术方向

团队技术的提高离不开学习和应用新技术，最近新技术的落地有以下几点：

（4）创造活跃的技术氛围

在很多时候，永远需要一个带头人跑的快一点，积极一点，在技术上鼓励创新和不断打磨沉淀优化，鼓励团队的小伙伴通过一些工具和技术手段来解决一些重复性的事情。

除了利用合理、稳定、高效的技术解决方案来服务日常的业务支撑外，考虑到前端技术的日新月异，我们也沉淀和创造一个统一的技术氛围：

四、致谢

公共FE团队在任何一个大公司都离不开业务线小伙伴的支持和厚爱、领导的认可和关注。

滴滴公共FE团队的发展，离不开所有给予我们帮助和信任的朋友，也离不开团队每一位亲爱的小伙伴的努力工作。

一路同行，只因为有你们：huangyi、wangjing、wangjin、suwei、shumei、xiaoqi、yanfen、miaodian、cuijing、yufei、huan总。

『前端之巅』群『滴滴公共FE团队技术开放月』分享活动预告：第二期：WebApp实践经验分享；第三期：公司级组件库以及MIS系统的技术实践分享。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注