如何构建一支专业的前端开发团队（一）

最爱管闲事

有点标题党了，因为我确实不是从零开始，而是从一个五人小队打造了一支目前37人的前端技术团队。
很久了，一直想写这么一篇文章，但是因为种种原因没有写的出来，一个原因是我一直觉得这不是我自己一个人的力量可以完成的，二来我觉得没有做出什么成绩和结果，这些事情不足挂齿。
我在知乎前年开始一直回答前端领域的一些专业问题，收获了不少赞同和感谢，也收获了不少好友和同事，从今年开始一直忙碌在团队组件和人员招聘的事情上，说白了，写了很多东西最后都会说我这边呀，急招前端，急缺工程师，但是我从来没有宣传过我们在做什么，我们怎么做，我们内部是一个什么样子的工作氛围和环境。
当然，现在我们打造的产品也确实体验一般，用户不多，仍然在打磨，原因很多很多，但是就目前感觉，已经可以见到曙光了，至少在开发层面，我们的产品可以说是完成了第一步的阶段。虽然要做的事情还有很多，业务也在不断增加，我只是个小前端，我更在乎的是我的团队对公司的影响和我个人可以做些什么，为公司和为自己的伙伴。
去年的11月20号来到了美信这个前端团队，到现在经过了8个月的打磨，我先说说业务线场景我们前端部门所做的一些事情：
1，我们所负责的第一个项目，国美+ H5 手机官网，一句话概括，一个移动端的购物商城，说和淘宝差不多有点过分，但是和自家的国美在线相比应该是比较恰当的了。
https://m.gomeplus.com




其中包含了微信的登录和支付以及在支付宝支付购物打通，很好的支持了核心app产品的各种分享落地页面的承接功能。
简单说一下架构，主要前端模块的划分还是采用之前我写的一个https://github.com/litheModule/lithe 加载器完成的模块划分，目录分为了几个纬度，比如入口，抽象业务模块，抽象非业务模块，插件，第三方库，以及业务中的一些工具辅助函数，测试文档用例等，这个属于一个类似用了很多年的一套前端总结下来的项目脚手架设计，万金油。
主要前端渲染，第一期采用jq+jq插件，后来进行过一次大改版，view层拆开使用vue.js进行前端渲染，后端负责接口的提供，在进行http到https升级时做了这个方面的技术大改版，后期又针对这部分业务做了一次模块的本地js缓存存储的性能优化，还有一次图片打散优化和缩略图图片优化，首屏之外懒加载等，在css方面收拢业务把共用和特有的样式做了统一调整，公共方面的css按照功能组件和常用控件做了区分，使用sass统一维护，前端工程化方面从最开始的grunt升级成gulp对应开发了lithe的gulp插件和几个时间版本号的插件，还有一个本地缓存生成依赖的gulp插件，上线开发流程几个项目一致，我放到最后再说。





本地存储的实现，以及对cdn的nginx combine的支持，也是都由前端团队推进的运维团队。
2，内嵌H5业务，主要是负责国美+ APP中的一些内嵌页面的开发制作，其中包含了大首页，个人中心的部分页面，先来个直观的感受：


中间部分的webview是h5前端部门承接开发的，技术架构和h5手机站类似，只不过对应多了一套jsbridge的框架，之前我的专栏特别介绍过实现原理，但是后来因为公司拿去申请专利，就删除了，包括github的项目介绍，主要实现对ios和android两套不同协议的实现封装以及呼起的功能接口的封装，比如复制功能，呼起原生页面，点击统计等原生功能的协议调用以及返回值获取。其他几个h5做的内嵌业务：
https://m.gomeplus.com/state/download?userId=1481&invateType=1 (二维码自动识别)




APP开发的功能我就不截图了，主要说说前端部门的一些业务场景和方案。当然技术的迭代和h5类似，只不过后端单独对几个页面进行了优化，做了去vue的处理（渲染逻辑少，直接原生来做）等升级包括http-https的升级，以及反劫持等对应改动，最近一次上线会出一个内置的小游戏，都是依托于h5开发。
哦对了，android版本可以去各打应用市场搜索国美+，ios版本可以从这里下载：
https://itunes.apple.com/us/app/guo-mei+/id1017591173?mt=8

3，PC官网商城，我最开始来的时候是做了一个静态版本，只支持看看app规则，几个月前上线了一个支持购买商品等功能，地址在这里：
https://www.gomeplus.com/

功能没有移动端那么完善，目前只支持微信支付购买，但是近期也会上线个人中心和支付宝等支付渠道，已经优化产品体验，最主要的是这么一个pc商城，我们团队在1个半月不到的时间开发完成并通过测试上线了。
前端的开发技术栈也比移动端更升一级，直接webpack+npm，本来前期想用react开发，但是因为要支持ie8，所以只做了webpack的模块划分，底层还是牛逼的jquery，后期如果ie8份额少，可能会升级成es6的语法糖。
总的来说pc站的开发中规中矩，只是在工程和工具链上进行了升级。
4，统计代码，广告代码，已经数据开放平台，客服平台等前端开发工作。
外部产品打造的同时，我们内部的系统开发工作也是我这边前端进行支持，包括数据埋点的js sdk开发，js的脚本错误监控，广告代码的组件式设计，还有数据收集回来包括业务指标的可视化部分，都是前端团队承接的，包括数据平台的后端开发使用的nodejs+vue，代码就不多说了，说说几个基本的思路吧。
统计代码包含对用户客户端的数据收集，前端性能指标收集，error监控，对接到后端的日志服务，广告代码同样，都是原生直接编写，支持不同广告组件和交互形式的分小文件加载，以及对客户端环境的检测，数据开放平台类似做了一个web版本的mysql客户端（可以可视化操作数据集和sql组，并且自定义导出形式），数据可视化平台拿nodejs完成2期开发，其中有用户的权限以及用echart做的一套可视化组件，前端vue做成单页应用，新增接口数据使用配置大量自动完成报表等设计。
看几个截图吧，数据开放平台的还在开发中，因为数据敏感，我做了处理：


界面设计都是前端自己搞的，没有任何ued和设计资源支持，项目推动也是大数据部门和前端部门一起协作完成。
对于客服平台来说前端部分的开发也是比较重的，设计到一个聊天IM的开发，对应的技术文章我记得之前也发过了，包括vue全家桶的使用，具体参考这里：https://zhuanlan.zhihu.com/p/21596136?refer=xiaojue
以上为需要支持的业务线，当然后续还会有视频直播的业务介入，其他部门也会有企业办公的前端开发加入。
最后，除了业务支撑，前端团队还做了什么？我觉得这才是重点：
1，自主开发的mock server服务：


从项目开始启动，到需求设计，到推广使用全部由前端部门开发人员自主业务时间完成，可以通过这个平台快速完成api的mock服务以及项目接口文档管理和维护。
2，自己的打包备份运维平台：
大家都知道，以上的项目全部都是并行在短短的5-6个月内开发完毕的，尤其pc，h5，内嵌等对外项目，基本每天都有上线，每周都有迭代，一直在开发新功能需求。并行开发的管理就涉及到分支管理，代码回滚，运维上线。
我刚来这个公司的时候，大家用的还是ftp推到测试机再由运维推送到cdn上，当时我都惊呆了。后来升级成jenkins但是依然不能满足我们的一些特殊要求，所以基于这个原因，前端部门也自己开发并设计一套工作流和工作流自动化平台：


当然我们支持2种工作流管理，一开始用svn，我们写了一个svn版本，使用svn帐号登录操作svn，另外一个版本是近期推出的，我们打算使用gitlab加这个平台来管理回滚上线操作以及分支开发，测试环境，预生产环境的部署更新与上线。
登录进去是这个样子的：


我们可以根据不同的svn项目读取版本信息，选择回滚和上线，并且可以通过svn或者git分支快速在服务器上创建测试环境，更新部署代码，最后根据tag去jenkins里做上线操作。
git部分就不截图了，我们目前公共依赖部门的模块已经切换到gitlab私有库管理。
后续我们要做的事情：
1，统一所有开发人员的开发环境，并引入模块，私有包，构建工具等脚手架。
2，前端性能监控服务。
这2部分已经开始在调研和预热开发阶段了。目标q4结束之前会研发出来。
当然，没做出来的东西我就不在这里秀肌肉了，以前总是不提我们自己内部在做什么，下面开始爆照时间：


当然了，最后那个蹲着的是我，当时太忙被小伙伴们偷拍了，这是上周腾讯的前端来公司做前端技术分享。


评审代码，code review，vue全家桶，图太多，随便选一张吧，每周都有小组例会分享技术。


团队tb，一半都是前端开发的人，图小，颜值高~


不多说了，我知道你们喜欢。
当然，我们也会去在线，腾讯，乐视后期外出进行技术分享，本来腾讯有拍照，但是实在看不出来是腾讯了。。就不发了，他们会议室并没有我们的高大上……
----------------------------
好了，第一部分搞定了，这部分属于秀肌肉环节，后续第二部分我会说一下这半年来遇到的一些团队管理，技术管理上的问题，当然，秀肌肉的目的我也很明显。
想加入这样的团队吗？赶紧投简历吧。designsor#http://gmail.com
临时有事，去改bug了~明天补第二部分，同样干货居多。

我我侠

前端发布的历史如出一辙，从人工到jerkens到自建。

白沙洲

看到那个fks啦，看来这个图，我没有白做哈哈！

南方刺

没少在朋友圈里看。。。

新会陈皮茶业

多给外面的朋友看看~

广西百色李祥贵

贵团队缺实习生吗？好想加入你们。

菲儿正品商城

漂亮！

我是五毛

这么多前端。。。

倪小平

嗯 业务多 一起做 又要改bug 又要赶timeline

传奇木讷的鱼

求社招的～