一、团队定位

1.团队情况

童瞳前端小组有7位小伙伴，5男2女。
主要包含以下几大职能方向：

• H5训练
• 美和视琦网训产品训练端、管理端、医生端前端制作
• 视琦5.0
• 客户端
• 美和官网、预约平台
• 童瞳儿童眼科社区
• 新技术研究

团队职责：

2.团队实践

(1) 全局类： 1.训练游戏框架、引擎、共用类 2.各生态产品统一登陆
(2) 组件化方向：公司级组件库——‘名称待定’。
(3) 通用服务：①TMS运营和模板平台；②NPM Private。

3.团队努力方向

（1）努力成为公司业务线上的前端开发人员所信赖的伙伴、公司业务强有力支撑的前端技术团队。 （2）紧跟前端变化，实践于项目

二、团队的实践和产出方向

1. 公司级组件库：’’

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

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

（1）痛点

TMS为了解决的痛点如下：

前端修改上线尤为频繁、如何解决资源推送CDN、达到快速、高效、智能的上线流程 运营类H5 zip上传能否支持 如何快速Mock一个线上API配置
如何快速生成一个短链、二维码等 有一个图片，能不能快速生成一个H5页面
（2）途径

我们采取了以下途径：

搭建一个稳定、可扩展、权限可控、可监控的服务平台 支持多元化的服务调用：API调用和用户界面操作
*和公司的基础架构及运维合作共赢
（3）技术

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

（4）架构图

详细的架构如下图所示。

6. Npm Private

（1）痛点

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

（2）途径

调研市面的解决方案
（3）技术

参考更多sinopia的一些优势、配置化和全局命令部署
申请存储容量稳定的机器作为部署机器
完备的官网和使用方法和场景问题

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

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

• 技术氛围和培养机制
• 鼓励和提倡技术革新
• 沉淀和解决业务痛点
• 有规划、有目标、有理想
• 客服意识要强
  下面我从几个方面具体来谈一谈。

1. 理想中的公共团队

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

（1）“飙车”

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

（2）乐高拼图

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

（3）潜水

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

1. Leader个人水平的提高

（1）制定计划

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

一般我们会做半年计划：包含长远目标和最近目标。
技术上：一般我自己会保持比较高的阅读范围和一些国内外优秀的技术群，参加一些技术活动，例如以下几点。
每月一本的技术书籍。
参加一些业内比较知名的大会，比如最近的Qcon。
长期保持技术文章沉淀总结分享的习惯。
（2）如何更合理地提供解决方案？

我自身也折腾过各种机器和环境部署、数据库。

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

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

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

1. 团队管理

（1）对内外的沟通

很多时候，我都会去找业务线的前端小伙伴包含一些Leader同学去交流沟通，看看他们的反馈和一些问题是否有公共的痛点。
组内定期沟通：保持每周部分同学的沟通、每周全组周会。
（2）代码 review 和风格一致性

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

打包工具 WebPack –> rollup 迁移
代码化：babel + ES6
更多从业务中抽象的微服务
更多脚本化运维推广
编译器相关探索
跨端技术解决方案
（4）创造活跃的技术氛围

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

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

四、致谢

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

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

一路同行，只因为有你们：Barry、Han、Anne、Sam、Jay、Heath。