凹凸技术揭秘 · 技术精进与业务发展两不误

只有成为变化的朋友，才能作的更好，走的更远。

-- 京东零售 CEO 徐雷

前言

回望凹凸实验室五年发展历程，从早期的纯业务支撑，再到工程化实践、开源探索，现在已在行业多个热门领域全面开花。咱们打造了一系列有影响力的技术产品，构建了大规模的设计中台，在外部看来彷佛有点游手好闲，但实际上这些项目持续在公司内部为大量核心业务进行深度赋能，有力的支撑了业务的快速发展。

靠谱的业务是团队的安身立命之本。

业务始终是驱动技术发展的重要因素，没有之一。

-- 凹凸第一人生导师

咱们始终秉持从业务中来，回到业务中去的理念，坚信业务才是团队的安身立命之本。在研发项目和设计中台高歌猛进的同时，咱们还重度支持着公司内部多个核心业务板块，涵盖了平台产品、大促会场以及营销互动等方向。这些年支持的业务一直在变，可是研发模式早已不可同日而语，可谓是流水的业务，铁打的团队。有了这些年积累的技术基底，咱们才能够心无旁骛，在业务中不断的去探索和创新。接下来就介绍咱们是如何长期深耕平台产品，以及用不同的方式玩转创意营销互动。

长期深耕平台产品

PC 时代，精雕细琢

回首 5 年前的前端大环境，伴随着无线时代的来临，PC 业务逐渐夕阳化，前端的开发方式从刀耕火种踏入工业化进程。彼时的凹凸实验室为了高效应对接踵而至的各种业务，推出了前端工程化和资源管理工具 Athena，成功实现业务开发的降本提效。

仿佛命中注定般，团队迎来了一项重量级业务 —— 京东商城 PC 首页改版，此时的 PC 首页做为京东的门户，依然承载着巨额流量，同时对页面性能、体验、稳定性的要求与以往相比是有过之无不及。为了实现首页改造项目的精品交付，打造性能、体验、稳定性的全方位极致表现，团队基于 Athena 工具优化新首页的开发模式：

得益于 Athena 在前端工程化的能力，轻松解决了自动化编译、代码处理、依赖分析、文件压缩等前端开发中的常规问题，使新版首页的开发效率大大提高。除此以外，为了使首页的性能表现更极致，团队使用了多种手段来优化性能：

• 首屏直出，非首屏先后端分离
• 楼层按需加载与滚动优化
• JS 资源延迟加载
• 模板、数据分离缓存
• ......

而在用户体验和稳定性方面，团队也探索了各类针对性的优化方案，皆可在 京东2016版首页改版前端总结 中一一查阅。

Athena 很是漂亮的完成了关键一仗。然而，改版后首页的技术选型还是 jQuery + SeaJS，这在当时各类 MVVM 框架井喷的年代显得异常老旧了。很快，京东商城 PC 首页迎来再次改版升级，在不得不兼容 IE8 的背景下，团队使用了自研的类 React 框架 —— Nerv，相比于 React 以及市面其余同类型框架，Nerv 更具体积轻量，性能高效的特色，可以完美应对 PC 首页的高流量场景。同时，基于流操做的 Athena 与当时流行的 webpack 相比显得相形见绌，团队亦借此机会对 Athena 进行升级改造，拥抱 webpack 生态：

此次改版对 PC 首页的总体框架、开发流程进行了全方位升级，团队开源的 Athena 和 Nerv 产品也在业务实践中呈现了很是高的价值，而且，复杂的业务场景反推框架能力升级，造成健康良好的闭环。而在凹凸实验室团队眼中，对产品的精雕细琢是无止尽的，PC 首页在 19 年迎来第三次改版，引入 TypeScript，而且在稳定性、安全性、视觉体验、无障碍体验等方面添砖加瓦，使 PC 首页成为后 PC 时代的一抹艳丽的夕阳红。

无线进军，蹒跚起步

2017 年 1 月，第一批微信小程序正式低调上线，无线时代开始进军到百家争鸣的阶段。凹凸实验室团队抓住了这一新兴平台的机会，率先上线了京东购物小程序。彼时的购物小程序是基于原生小程序的开发模式，并结合实践场景封装了一系列页面/组件基类、网络请求、本地存储、页面跳转等通用模块，为业务开发带来便利。而随着项目日益发展壮大（涉及 100+ 页面），团队和相关业务方共同在小程序工程化领域不停探索，积累了大量性能提高、持续集成、团队协做、监控告警等方面的宝贵经验，在小程序生态领域中蹒跚起步。

拥抱变化，精益求精

继微信小程序诞生后，愈来愈多的头部互联网公司相继推出各自的小程序平台，如京东、支付宝、QQ、字节跳动小程序等等。与此同时，京喜做为京东零售打造的下沉市场品牌，须要在 H五、微信小程序、QQ 小程序、京喜 APP 、京东小程序等几大渠道露出，这意味着不得不付出高昂的移植成本。

得益于凹凸实验室自研的多端统一开发框架 —— Taro，京喜首页轻松实现一套代码适配多端的能力，极大地提升了业务研发效率。除此，京喜基于原生小程序和 Taro 并存的混合开发模式，沉淀了一系列成熟的混合开发工做流，并驱动 Taro 在性能优化、代码体积、混合开发等关键特性的发展建设，为相似场景的业务团队提供了宝贵的经验。

随着京喜小程序双十一上线微信购物入口，用户规模登顶移动购物行业的 Top1，在如此大的流量挑战下，任何细微的体验细节都有可能被放大。为此，团队从小程序性能、体验等几大维度出发总结出一套精品小程序的打造方法论，做为指导小程序业务研发的标准规范，并持续对内外部业务团队赋能。而针对小程序的质量维度，团队打造了一款多端自动化质量保障体系 —— Tiga，为多端应用的稳定性保驾护航。前路漫漫，京喜做为 Taro 的最佳实践之一，将会在精品化的远道上精益求精。

轻松玩转营销互动

在传统零售行业，商家为了提升营业额，会策划一些促销活动来提高客流量，例如，香港SOGO百货每一年店庆时客流量会达到高峰。而电商公司最为标志性的业务，就是营销类需求。这一类需求周期短、时效性高，每到大促周期内即呈现我方唱罢你方登场的热闹场面，全公司上上下下无不投入到这盛况中，凹凸也不例外。

营销类需求根据交互形式以及运营目的，能够分为两大类：大促会场类，与互动营销类。

亿级流量大促会场

大促活动在整年总体活动中占据很是重要的地位，在活动期间，用户的消费冲动会异常高涨。包括京东61八、双十一之类，都属于典型的大促活动，这类活动已经脱离了促销的意义，他们早已成为了平台、商家和用户的一个习惯。 对于这类亿级访问量、强时效性、多渠道的活动，开发重点有如下4点：

• 加载性能和错误容灾
• 适配兼容
• 新业务落地
• 高精度的动效还原

今年以来咱们开发的部分会场有：

需求时代，定制开发

大促业务对开发质量要求很是高，因为强时效性，需求每每是井喷式爆发。刚接手大促项目时，对于各个会场，是按照具体需求进行定制化开发的： 团队统一技术框架，采用本地开发模式，由具体开发者和业务对接，自由发挥来知足业务诉求。 在这个模式下，能快速响应各个会场的个性化需求。但缺点也显而易见： 每一个需求有一套自有的业务逻辑，一样的业务代码散落在各个仓库中。 在多个需求中，出现相似的兼容性问题。 复用上一次的业务逻辑进行修改，产生冗余代码片断。 这些重复开发以及修复bug，让咱们陷入需求困境，咱们须要利用工具和系统来提效降本。

规模化开发

近几年团队技术能力的高速发展，给了咱们新思路：经过工程化和原子组件的组合，创建标准开发流程，从而实现了“规模化”开发。既能知足高定制性，又能解决业务量的递增。 cli帮咱们搭建页面框架，收口基础逻辑，按照规范统一实现； 原子组件库EUI抽离业务逻辑，和上游设计团队共建营销设计语言，在增长复用率的同时，又提高了开发的质量。

标准化开发，让咱们能够高效，高质量的交付需求，获得了业务方的一致好评。

变幻无穷营销互动

营销互动交互简单、视觉冲击力强的页面展现形式，多用于品牌推广、活动广告等目的，兼具动画与互动交互。这一类的需求主要技术重点在于多机型 UI 适配，以及多于通常页面的动效展现，极其考验网页自适应及动效开发的能力。

精细起家

与部门总体研发模式发展路线一致，营销互动的开发一样从石器时代发展而来。在这一阶段，设计的创意与动效的灵动产生了极佳的化学反应，出现了很多精品案例，为部门互动开发的口碑奠基了初步的基础。

在此期间，部门沉淀了很多动效开发相关的总结： 以电影之眼看CSS3动画 css3 animation 属性众妙

因为与平台类业务需求差别性大，且有效周期短，早期的营销互动开发经常是一位同窗在本地开发，人工部署到统一的服务器即结束，使用何种技术栈，用到哪些开发工具，均由开发我的习惯决定。这种开发模式，且不提多人协做以及代码共享的问题，首先在开发效率上就存在极大的限制：每一个人每一个项目都须要从新设定一套自适应方案、滑屏等触屏交互逻辑，最佳实践没法复用，需求复杂性具有必定的上限。所以在这一阶段，所能实现的营销互动大多由内容驱动，交互形式局限于滑屏类。

不过正如《凹凸技术揭秘·羚珑页面可视化·成长蜕变之路》中提到的，因为滑屏类需求的形式单一性，反而催生了 Hi Page 这样的互动可视化搭建工具，这也是部门最先期的 SaaS 服务。

告别刀耕火种

以 Athena 的出现为界，借助其前端工程化的能力，咱们开始将营销互动相关的 REM 自适应方案、代码图片压缩等预处理自动化，提高了开发效率的同时，也为复杂游戏类的开发奠基了基础。在业务的推动中，又随之诞生了更为专一于互动开发的脚手架 ELF（ELF — 灵活可扩展的 HTML5 构建工具），后将功能并入 Athena2，完成了部门内部的脚手架统一。

在这一时期，输出了更为多样的精品案例，开始涉足较为复杂的小游戏，并在此基础上，创办了互动案例推荐期刊《拇指期刊》，进一步深挖行业优质案例。

精品游戏

精品动效

拇指期刊，数据已焚，莫念

在互动案例上持续高质量高效率的输出，进一步巩固了凹凸在互动开发上的优秀口碑，随之而来大量有创意互动合做意愿的业务方，包括当年春节核级难度、核级重要的多机互动，《一炮而红》

多机互动巅峰——一炮而红

基于大量精品游戏经验的沉淀，部门开辟了 H5 游戏开发专栏，篇篇精品，醒来仍是很感动：知乎专栏：H5游戏开发

结合中台，迈入统一数字化

随着部门总体战略的调整，资产沉淀及开发流程统一提上了日程。部门在不断的踩坑中进行调整，造成了一套基于夸克组件库与羚珑可视化搭建相结合的互动开发流程，实现资产管理数字化、积木化。

新的开发流程契合了资产沉淀与流程统一的战略方向，已成功落地了羚珑 SNS 互动营销场景，并正陆续接入新的互动业务需求，探索业务落地新流程的最佳实践。

同时，EUI在大促业务中的出彩，引来了其余运营同窗的咨询。为了赋能更多的业务方，咱们把EUI组件同步至夸克，结合羚珑中台，方便无开发资源的业务团队使用。

另外一方面，咱们将一些有趣的会场形式固化，经过封装组件，沉淀页面模板，将项目经验提供给更多的用户。

公司每一年促销活动不可胜数，设计趋势在变，内容形式在变。咱们须要更加科学的数据分析来支撑业务决策，选择更符合场景的方案。

所以咱们从业务诉求出发，经过数懒对活动数据的跟踪分析，生成可视化数据报告，为决策者提供专业意见。数懒完成了从业务中沉淀运营经验，赋能给更多业务的正向循环。

将来展望

随着行业不断变革，以及各类技术基础设施的持续完善，催生出了大量新的思潮。之前看似高不可攀的领域，逐渐雨后春笋般冒了出来。对于将来的业务研发模式，在咱们脑海中已经描绘出了一幅理想的蓝图，而且在一步步实现它。

将来，咱们将开发流程进行云端化，由 Tide 来承载研发全链路，打造一体化研发工做台，由传统手工做坊进入到工业化生产时代。

今后不再用被本地各类环境问题来回折腾，随手打开浏览器便可开始撸码。启动不一样类型的项目时，无需从零开始，使用内置模版便可拥有现成的最佳实践方案。开发模式也由传统的页面开发转换到组件开发上来，这样既能够充分利用已有的研发资产，经过羚珑可视化搭建平台快速拼装出页面，同时又能很好的将组件沉淀下来，不断的扩充研发资产库，为智能代码提供更加丰富的样本。更进一步咱们能够利用 Deco 进行设计稿一键生成多端代码，最大程度解放生产力，实现价值最大化。

凹凸揭秘系列文章地址

1.《凹凸实验室的过去与将来》

2.《凹凸技术揭秘·羚珑智能设计平台·逐梦设计数智化》

3.《凹凸技术揭秘 · Deco 智能代码 · 开启产研效率革命》

4.《凹凸技术揭秘·羚珑页面可视化·成长蜕变之路》

5.《凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料》

6.《凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建》

7.《凹凸技术揭秘 · Taro · 从跨端到开放式跨端跨框架》

8.《凹凸技术揭秘 · 基础服务体系 · 构筑服务端技术中枢》

9.《凹凸技术揭秘·技术精进与业务发展两不误》

10.《凹凸技术揭秘 · 数懒 · 增加团队好帮手

其余

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

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

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