凹凸实验室的过去与将来

时间 2020-12-27

标签 css html 前端 css3 git github 算法编程小程序后端栏目 CSS 繁體版

原文原文链接

做者：凹凸曼css

https://www.qq.com/video/m321...html

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

星火

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

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

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

<div style="text-align: center; margin-bottom: 20px;">H5 动画做品合集</div>算法

在这一阶段咱们也产生了不少优秀的文章，不彻底列举：编程

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

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

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

彼时落入你们心中的是一点点星火，彷佛点亮一丝丝前方的光明，可是，星星之火，能够燎原。

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

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

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

成长

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

咱们给出的答案是否认的。

正如凹凸灵魂导师老黄的文章《关于前端团队架构的思考》中所说的。

这个就比如一我的活着不能止于「有食可进有衣可穿」这种基础的物质条件，团队也一样有「精神层面」的内涵，具体如：

影响力

创新力

技术视野

这些「精神层面」的东西看似很虚，但实际上会以另一些形式正向的反馈给团队，间接影响团队服务业务的过程甚至结果。
建设团队在公司内外的影响力，能够营造团队的专业口碑，吸引优秀的专业人才主动加盟，而优秀的人才对于团队高效处理业务需求或研发需求的能力具备促进做用。

因而咱们开始关注如何服务好业务的同时，提炼咱们本身的技术产品，以业务为盾，以技术产品为剑，去打造咱们梦想中的技术团队。

从业务中来，到业务中去

时间来到 2015 年底，此时凹凸承接的业务呈现暴涨的趋势，各种业务接踵而至，为了更好地应对业务增加带来的人力瓶颈，咱们加速探索前端工程化，指望使用工程化的手段来解决前端模板化、组件化、自动化开发的问题，并推出了凹凸实验室第一个比较完善的开源产品 Athena。固然以如今的眼光来看 Athena 并非一个优秀的产品，它的文档很糟糕，可扩展性几乎为 0，但在当时仍是支撑起了团队大部分业务的开发，为业务研发增效提供源源不断的动力。请参见咱们是如何作好前端工程化和静态资源管理。

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

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

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

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

拥抱开源技术的初心

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

时间匆匆忙忙来到 18 年，彼时对于业务来讲又迎来新的挑战，各种小程序平台层出不穷，为了应对业务拓展渠道的需求，咱们开始探索多端统一开发解决方案，并迅速推出了 Taro，实现开发一次，同时生成多端应用，凭借着对 React 语法的独特支持和一天 3 个版本火线迭代的速度，Taro 成为诸多开发者喜好的解决方案，帮助不少业务上线多端应用，Taro 也成为凹凸实验室的一张技术名片。请参见多端统一开发框架 - Taro。

<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 生成多端应用，这是一个线性的过程，而同时，在此过程当中也能快速沉淀设计研发资产，设计研发资产也能做为智能代码智能识别的样本数据，沉淀设计资产又能够提供给可视化搭建平台，直接搭建出多端应用，同时羚珑智能设计将为应用提供个性化的图片和视频，丰富应用的运营能力。由此，实现了一个良性的产研闭环。

目前，咱们总体的能力全景图以下。

启下

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

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

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

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

其余

感谢一直关注凹凸实验室的读者，为了提供更优质的内容，但愿您能抽出几分钟时间，完成一个小调查，明年凹凸公众号的内容由你决定。点击直达

加入凹凸实验室开放、开源、专业、有爱、有梦的你们庭？点击直达

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

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。