凹凸实验室的过去与未来-京东云开发者社区

> 凹凸实验室隶属于京东零售用户体验设计部（JDC），成立于 2015 年秋冬之交，诞生自深圳前海之滨，至今已走过 5 个年头，5 年的时光穿梭而过，凹凸实验室也不断发展壮大，从曾经专注前端的团队成长为如今涵盖前后端、全栈、算法、测试各类方向的全能型研发团队，工作模式也从传统的人力密集型研发转向创新型平台体系化研发，如今，凹凸的各类技术输出与沉淀在业界影响深远。

## 星火

2015 年，凹凸实验室的前身多终端研发部成立刚好一年，彼时的多终端研发部，虽然是一个拥有 20 多位开发人员的独立前端研发部门，但更多的是在支撑着公司内部的各种业务的研发，从微信手 Q 的购物业务到京东商城的营销活动、拍拍网，以及京东云的大改版，业务的类别五花八门，作为一个工线支持部门，每天在各类业务开发中穿插，协助各类业务需求的开发。

![](https://img11.360buyimg.com/imagetools/jfs/t1/151926/15/11296/94062/5fe43493E9cb21c9a/057e2c31479082a0.jpg)

<div style="text-align: center; margin-bottom: 20px; color: #999">2015 加入凹凸实验室的同仁</div>

在此期间，部门也产生了很多精品业务，凭借着在 H5 动画方面的造诣，在京东内部小有名气，每到一些大促的时间节点都能收到很多的业务需求，这让团队开始在京东内部开始崭露头角。

![](https://img11.360buyimg.com/imagetools/jfs/t1/152554/24/10910/536958/5fe2e2dbEe1ef36f6/a53e674e5523e9b9.jpg)

<div style="text-align: center; margin-bottom: 20px;"><a href="https://cases.aotu.io/">H5 动画作品合集</a></div>

在这一阶段我们也产生了很多优秀的文章，不完全列举：
- [精致化页面重构](https://aotu.io/notes/2015/11/24/project-summary/)，by NONO
- [以电影之眼看CSS3动画（一）](https://aotu.io/notes/2015/11/23/css3-animation-to-movie-part_1/)，by 凹凸一姐
- [以电影之眼看CSS3动画（二）](https://aotu.io/notes/2015/11/23/css3-animation-to-movie-part_2/)，by 凹凸一姐
- [前端优化不完全指南](https://aotu.io/notes/2016/03/16/optimization/)，by 暖暖

同时，在沉淀了大量精品的 H5 业务之后，我们也开始尝试打造一个可视化搭建工具 HiPage，通过拖拽搭建的方式就能将沉淀的 H5 动画元素组合出新的 H5 页面，实现快速上线，得到业务方的一阵惊叹。这是我们第一个颇具意义的技术产品，它既服务好了业务方，也满足了我们作为技术人员对技术的追求，同时也为我们埋下了关于团队方向思考的引子。

![](https://img10.360buyimg.com/imagetools/jfs/t1/142843/1/19879/111274/5fe43493E837d41bf/b3f8fbd463bc2a18.jpg)

作为技术团队，我们一直在思考，我们所能做的是否仅仅只是服务好业务就够了？或者换一个角度，作为一个工线部门，我们除了努力把业务做好，还能再做些什么？

2015 年 9 月，一个燥热的周五晚上，在白石洲的鸡煲大排档里，关于上面的问题，关于团队的发展，关于团队的未来，团队里的几位大佬一边吃着鸡煲，一边激烈讨论。最终，留着一头飘逸长发的老黄掐灭手里的烟说道，“我们要做深圳最知名的前端团队”，在场的大家听罢后都陷入了沉思。

彼时落入大家心中的是一点点星火，似乎点亮一丝丝前方的光明，但是，星星之火，可以燎原。

一个月后，凹凸实验室正式成立，朝着 “要做深圳最知名的前端团队” 这个目标，团队的所有小伙伴都充满干劲。很快，我们和设计师通力合作，设计了沿用至今的团队 Logo。

![](https://img13.360buyimg.com/imagetools/jfs/t1/142157/7/19593/10672/5fe2c1a4E0c2fdf60/db8b3170df17b5a5.png)

同时也确定了我们的团队的理念：开放、开源，凹凸实验室的名字也来源于此，这一理念灌注在团队血液中，为之后的技术产品研发奠定基础。全新的团队官网也建立起来了，这个官网承载了不仅仅是团队小伙伴的技术文章，同时也是一个个关于技术梦想的追求。团队内也开始举办各类技术分享、编程马拉松，组织各小组的 Code Review，整个团队的技术氛围开始形成，凹凸如一个蹒跚习步的孩童，不断摸索，不断向前，磕磕碰碰，但不失朝气。

![](https://img10.360buyimg.com/imagetools/jfs/t1/156539/23/1641/303596/5fe2e2daE13b00dc9/f10066df9f55d226.jpg)

沉舟侧畔千帆过，病树前头万木春。

## 成长

回顾我们思考的疑问，我们在建设一个具有一定规模的前端团队的时候，其目的是否仅仅是服务好业务？

我们给出的答案是否定的。

正如凹凸灵魂导师老黄的文章[《关于前端团队架构的思考》](https://zhuanlan.zhihu.com/p/26962085)中所说的。

> 这个就好比一个人活着不能止于「有食可进有衣可穿」这种基础的物质条件，团队也同样有「精神层面」的内涵，具体如：
> * 影响力
> * 创新力
> * 技术视野
> 
> 这些「精神层面」的东西看似很虚，但实际上会以另外一些形式正向的反馈给团队，间接影响团队服务业务的过程甚至结果。
> 建设团队在公司内外的影响力，可以营造团队的专业口碑，吸引优秀的专业人才主动加盟，而优秀的人才对于团队高效处理业务需求或研发需求的能力具有促进作用。

于是我们开始关注如何服务好业务的同时，提炼我们自己的技术产品，以业务为盾，以技术产品为剑，去打造我们梦想中的技术团队。

### 从业务中来，到业务中去

时间来到 2015 年末，此时凹凸承接的业务呈现暴涨的趋势，各类业务接踵而至，为了更好地应对业务增长带来的人力瓶颈，我们加速探索前端工程化，期望使用工程化的手段来解决前端模板化、组件化、自动化开发的问题，并推出了凹凸实验室第一个比较完善的开源产品 [Athena](https://github.com/o2team/athena)。当然以现在的眼光来看 Athena 并不是一个优秀的产品，它的文档很糟糕，可扩展性几乎为 0，但在当时还是支撑起了团队大部分业务的开发，为业务研发增效提供源源不断的动力。请参见[我们是如何做好前端工程化和静态资源管理](https://aotu.io/notes/2016/07/19/A-little-exploration-of-front-end-engineering/)。

在打磨好工程化工具后，我们团队也终于迎来了非常重量级的业务——京东商城 PC 首页改版，此时 PC 首页依然承载着非常多的流量，改版的工作备受重视，而同时首页的复杂度特别是对性能、体验、稳定性的要求远远超出了我们过往的项目，秉承团队过往打造精品业务的理念，我们想要将 PC 首页这个项目做到全方位的极致。所以承接项目的小伙伴压力山大，在奔赴北京熬了一个多月后，项目终于顺利上线。当双 11 前夕，线上首页稳定顺畅地出现在办公室一个个显示器上的时候，我们难掩心中的激动，互相击掌庆祝彼此的胜利。具体请参见[京东2016版首页改版前端总结](https://aotu.io/notes/2016/12/26/jd-index-2016-summary/)。

而在 PC 首页上线之后，为了进行更好地项目管理，同时保证项目流程自动、稳定地运行，我们开发了**统一上线平台**，可以进行项目管理、自动构建、构建后代码 diff 、项目操作日志以及一键发布和回滚等操作，极大地规范了项目流程管理工作，同时将项目的上线统一进行管控，大大降低了项目出现线上问题的可能性，开始为工程化补全串联研发流程的工作，也为后续我们开发**一站式云端产研平台**提供了宝贵经验。

![](https://img10.360buyimg.com/imagetools/jfs/t1/151197/40/12137/118803/5fe43493E2d886c7e/871a0d5bc496fb34.jpg)

但是工程化带来的提效，远远跟不上业务需求增加的速度，为了应对层出不穷的业务需求，17 年，我们在 HiPage 的基础之上，继续探索页面可视化搭建，期望通过建设高可用的可视化搭建引擎，配合海量的（想象中）模板和组件，产出一套 No Code 系统，让运营或者可以自己搭建页面直接上线。于是诞生了内部代号为「Atom」 的**页面搭建平台**，帮助内部快速上线了几千个页面，凹凸实验室在业务方那儿成为了“活儿好”的代名词。

![](https://img13.360buyimg.com/imagetools/jfs/t1/145242/40/19642/297692/5fe2e55cEbb31ea87/df6c75228e5de678.jpg)

同样是 17 年，随着京东商城业务的蓬勃发展，传统的设计师作图，业务方套模板生产广告图等物料的方式已然非常落后，生产效率低下极度依赖人力，同时也无法满足越来越多的个性化图片需求，为了应对这样的场景，我们开始打磨**羚珑智能设计平台**，通过海量图片模板和基于用户数据实时合图能力，解放了设计师的双手，也节约了业务方获得高质量图片的成本，让每个人都能轻松完成图片制作。

![](https://img10.360buyimg.com/imagetools/jfs/t1/138781/10/19511/185219/5fe2e55cEe9271be1/9c4732f5f026a4fe.jpg)

### 拥抱开源技术的初心

依然是 17 年，这一年我们在不断提升业务支持，围绕业务打磨技术产品的同时，在开源上我们也在不断奋进。这一年京东商城的前端主流技术栈还停留在 jQuery，而对于我们的业务来说已经无法忍受 jQuery 带来的研发效率低下的困境，我们开始探索新的技术栈，经过缜密的调研后，开始着手开发类 React 框架 [Nerv](https://github.com/NervJS/nerv)，在内部业务经过一番验证后，开始在 GitHub 开源。凭借着当时团队大牛澈哥的出口转内销的推广策略，Nerv 开源第一天登上 GitHub 的 trending 榜，迅速斩获了上千 Star，这对于以**开源**为理念的我们来说，无疑是振奋人心的。请参见[Nerv - 京东高性能前端框架](https://aotu.io/notes/2018/03/22/nerv/)。

时间匆匆忙忙来到 18 年，彼时对于业务来说又迎来新的挑战，各类小程序平台层出不穷，为了应对业务拓展渠道的需求，我们开始探索多端统一开发解决方案，并迅速推出了 [Taro](https://github.com/NervJS/taro)，实现开发一次，同时生成多端应用，凭借着对 React 语法的独特支持和一天 3 个版本火线迭代的速度，Taro 成为诸多开发者喜爱的解决方案，帮助很多业务上线多端应用，Taro 也成为凹凸实验室的一张技术名片。请参见[多端统一开发框架 - Taro](https://aotu.io/notes/2018/06/07/Taro/)。

![](https://img10.360buyimg.com/imagetools/jfs/t1/140075/8/19806/74046/5fe2c46fE777913bb/26555f69d6d033c0.jpg)

<div style="text-align: center; margin-bottom: 20px; color: #999">Taro stars 数破 2w 庆祝会</div>

### 向全栈迈进

而为了应对内部业务的数据服务请求，以及内部诸多的自研平台系统，凹凸实验室又自建了后端研发团队，为各大系统平台提供坚实的后端服务，为业务封装各类微服务方便调用，同时也在数次大促节点抗住了流量压力，团队的技术栈已经不再局限于前端了，开始向全栈模式转变。

### 平台化转型

18 年 19年，我们在不断对我们的各类工具系统进行打磨，做好能力储备。而与此同时，中台的概念兴起，我们团队也开始探索设计研发在中台领域的地位，开始打造公司的设计中台。我们深刻地认识到团队除了对人才的培养之外，更应该关注团队研发资产的沉淀，工具、平台系统、研发组件这些都是团队宝贵的研发资产。而除了不断进行研发能力建设和储备的同时，我们应该将这些已有的能力积木串联起来，成体系化地对外进行赋能，从而实现传统的人力密集型研发向创新型平台体系化研发的转变。

## 破局

2020 年，20 年代的第一年，从开年就注定是不寻常的一年。这一年我们也从宝安中心的龙光大厦搬到了前海内的卓越前海壹号。

今年，是凹凸实验室成立的第 5 年，5 年过去，团队的技术沉淀已然成型，曾经“开放、开源”的初心理念也未曾忘却。而在这一年我们对团队的能力积木做了一次重新的梳理，并思考如何进行体系化串联。

### 造积木

回顾过往，我们已经做了非常多的技术储能，并且团队的技术产品发展是全方位地进行，从智能设计到产品研发，基本每个领域都有我们探索的印记。

在图片和视频能力上，我们打造了 **羚珑智能设计**，可以通过海量图片模板和基于用户画像的智能算法实现图片和视频的智能生成。

在多端适配与框架能力上，我们打造了 **Nerv**，并从 Nerv 的中孵化出了 **Taro**， 可以实现一次开发，生成多端应用。

在可视化搭建能力上，我们从 HiPage 时代开始一步步探索， 到 Atom 时代可以搭建各类营销页面，再到现如今的**羚珑可视化搭建**，可以直接拖拽生成多端应用，并且覆盖营销、店铺等诸多场景。

在研发资产沉淀能力上，我们打造了 **夸克资产平台**，已经沉淀了海量的研发组件、图片、字体、动效等研发资产。

在数据可视化能力上，我们打造了 **树懒平台**，可以对业务统计和监控数据进行可视化查阅。

在服务端能力上，我们打造了专业的 **服务端团队和系统**，为各类业务和平台需求提供专业可靠的服务端能力支撑。

### 盖大厦

我们拥有诸多的能力积木，但是如果不能进行体系化串联，我们就不能进行产品化包装，以及对外进行技术赋能。

我们发现，纵观整个产研流程，将我们的能力积木放入之后，在某些环节依然有所缺失，例如，从设计师到研发，我们没有很好地进行对接，当有个性化需求需要开发以及需要进行研发组件沉淀时，我们依然需要人工将设计稿进行还原然后进行业务逻辑绑定开发，不仅仅是滞后我们的研发效率，同时对我们的设计研发体系来说也是一种断层，所以，今年我们进行了 **设计稿一键生成代码** 的探索，尝试对设计研发这一环节进行能力补全，同时提升我们的产研效率。

而同时，在研发流程上，我们只有 Taro 本身是远远不够的，Taro 只能解决代码开发本身和部分工程化的问题，只是研发流程中的一环，而研发流程则是包括开发、调试、测试、上线、统计监控完整的链路，为了打通研发流程全链路，同时统一研发环境，今年我们又开始进行了 **一站式云端集成研发平台** 即 Cloud IDE 的探索，尝试将业务研发、资产沉淀搬到云端，仿佛在走一遍**统一上线平台**的老路，但却是完全不一样的风景。

**设计稿一键生成代码** 与  **一站式云端集成研发平台** 成为了补全产研体系化建设的两块拼图，让产研流程可以成体系化进行串联。

目前我们现有的产研流程，首先设计稿通过智能代码能力一键生成可二次开发的代码，代码导入 Cloud IDE 中进行开发调整，最后可以通过 Taro 生成多端应用，这是一个线性的过程，而同时，在此过程中也能快速沉淀设计研发资产，设计研发资产也能作为智能代码智能识别的样本数据，沉淀设计资产又可以提供给可视化搭建平台，直接搭建出多端应用，同时羚珑智能设计将为应用提供个性化的图片和视频，丰富应用的运营能力。由此，实现了一个良性的产研闭环。

![](https://img10.360buyimg.com/imagetools/jfs/t1/144242/28/19703/87684/5fe2eaaeEdbf39549/8e50c3c78ee406ed.jpg)

目前，我们整体的能力全景图如下。

![](https://img11.360buyimg.com/imagetools/jfs/t1/152127/23/11175/101193/5fe2eaaeE8e0a64fc/a75800583333ae1c.jpg)

## 启下

立足业务，技术储能是过去五年凹凸实验室的主题。

而智能化设计研发体系将绘制凹凸实验室未来 5 年的技术产品的梦想画卷。

接下来我们将通过【凹凸技术揭秘】系列文章，为大家分享、剖析凹凸的关键技术布局，希望能为业界带来更多的思想碰撞，也希望能吸引更多有志青年加入我们，共同实现关于技术关于产品关于团队的梦想。

年光似鸟翩翩过，世事如棋局局新，唯有不忘初心，坚守本心，方能乘风破浪，济沧海。

## 其他

感谢一直关注凹凸实验室的读者，为了提供更优质的内容，希望您能抽出几分钟时间，完成一个小调查，明年凹凸公众号的内容由你决定。[点击直达](https://wj.qq.com/s2/7682945/6162/ )

加入凹凸实验室开放、开源、专业、有爱、有梦的大家庭？[点击直达](https://aotu.io/join/)

还没有关注「凹凸实验室」的读者们，关注我们吧，我们一个月只有 4 次推送机会，我们很珍惜每一次推送，不会让你失望的。微信搜索「凹凸实验室」关注即可。