经过多年成长，京东App从功能性的购物应用，发展成功能包罗万象的综合型应用，从京东App内部也孵化出很多子应用。在这样的背景下，如何利用京东商城在移动互联网行业的技术积淀，赋能内、外部企业，提升开发质量和效率，加快创新？京东移动研发平台EMOP应运而生。本文根据京东移动中台负责人王永杰在11月19日软件绿色联盟开发者大会发表的《企业级移动研发平台》主题演讲整理而成，为大家分享了京东EMOP平台的实践等内容。
EMOP平台在京东商城中成长
1、移动研发中普遍面临的四大挑战
随着业务和代码规模的不断壮大，移动研发往往会面临用户体验、质量把控、业务验证和研发速度四个方面的挑战，京东也是同样如此。如何像小型应用一样拥有极致体验（快速加载、滑动流畅）？如何保证代码的高可靠性？如何支撑亿级流量下的业务快速验证？如何在业务错综复杂的情况下支撑新业务的快速研发落地？这些都是京东需要面对和解决的问题。
2、始于模块化，EMOP逐步壮大为企业级移动研发平台
面对这些挑战，京东很早之前就提出了 “四化”（模块化、标准化、动态化、工具化），其中最基本的是模块化的思路。在模块化过程中，需要解决不同模块之间的通用问题，因而就需要进行一些标准化的工作，实现不同模块之间的访问和通信。其次就是动态化，包含热修复，热更新和热发布，以实现业务的快速迭代。同时还有一个工具化的过程，帮助提升开发效率。
在“四化”之后，京东构建了四大开发框架，辅助支撑体系，沉淀了很多公共技术和业务组件，进而演进成为京东集团移动中台，支撑京东内部所有的App和小程序的研发。
京东还将移动中台的能力对外进行开放，秉承“开放赋能”的合作理念，为移动研发提供一站式全流程解决方案，帮助企业降低成本。
EMOP 平台产品架构
1、平台整体架构全景图
整个架构中最核心是左侧四大开发框架，包括H5、Native、JDReact和小程序，不同的框架各有优势，业务可以根据其需求选择相应的技术框架。架构图的右侧是辅助于开发框架的组件能力和支撑系统，其中包含一些业务组件，同类业务只需要接入和调用即可。在架构图下方是我们的基础资源，包含公有云和私有云等。
2、ARES企业级多端融合应用解决方案
移动中台功能非常强大，整体规模也越来越大。为了高效服务业务，京东提出了子中台的概念，针对企业多端融合的需求，京东提出了解决方案企业级多端融合应用解决方案ARES。
ARES包含JDReact、JDFlutter两大引擎，一套代码实现Android、iOS、H5、微信小程序多端同时使用。ARES方案有SaaS控制台、开放组件市场等服务产品，还有转换工具、IDE等工具链接产品。目前已有200 业务接入， 20 独立App接入，包含金融、拍拍、京麦、京东到家等，经历过千万级DAU的考验。同时，ARES还有自己的门户和社区，方便开发者了解和接入产品。
3、JDReact 技术架构
重点介绍一下JDReact。JDReact技术架构也是基于Native底层，做了自己的基础功能库。通过Web转换框架支持了H5，从而实现多端共用。JDReact提供了完整的通用组件SDK，让业务开发成本更低，只需要专注自己业务的开发。另外JDReact还统一提供了灰度更新、降级容灾、持续集成以及数据采集等能力，方便业务的使用。
4、JDReact 开发流程与效果
基于JDReact开发的流程非常简单，将 SDK放到了内部NPM上后，业务只需创建自己业务代码的GIT，并通过CI集成平台申请打包，就可以自动提交到主站App的应用代码库中。业务模块不需要更新，可以在不同的App上进行发布。根据实际项目数据，通过 JDReact开发，平均内存占用减少23%，平均CPU的负载降低36%，平均启动时间提速152%。
EMOP跨端探索与实践
EMOP跨端探索起源于业务方的诉求，希望实现一套代码在多平台运行。在2016年的京东黑客马拉松上，京东开发团队对这个想法进行了实现和验证。之后，还对产品代码进行了完善和开源。下面重点介绍RN 与 Flutter 互相转换的底层原理。
1、声明式 UI 框架
React、 Flutter、SwiftUI 的声明式UI框架，都暗含了一个“值UI”的概念。它们把UI看成是一个普通的值，类似于字符串、数字一样的值。既然是一个普通的值，就可以参与所有的控制流程，可以是函数的返回值也可以是函数参数等等。
而小程序的wxml虽然也是声明式UI，却不是“值UI”，wxml 更像模版，更加静态。因此，构建 wxml 结构的关键是怎么用静态的 wxml 表达动态的“值UI”。
2、一种用静态的 wxml 等效表达动态的“值UI”的方式
在小程序wxml中，template一个属性是动态属性，利用该属性，我们寻找到了现代声明式 UI 的等效表达方式。整个过程分以下四步：
· 标记
每一个独立的 UI 片段都是一个 UI 值， 给每一个 UI 值标记上唯一 ID。
· 对应
每一个 UI 片段，在 wxml 文件对应一个 template, wxml 的 template 和独立 UI 片段通过唯一 ID 一一对应。
· 占位
在 wxml 中，在所有需要动态确定 UI 值的地方，都用一个占位模版 <template is=”{{uiDes.tempName}}”/>代替。
· 渲染
（代码示例1）
（代码示例2）
框架的入口主函数，执行所有控制流程，输出一个大的 UI 值，这个 UI 值嵌套包含了小UI 值；把这个代表 UI 值结构的数据称为 uiDes，参考如图：A组件的render过程返回了“b”值，其中“b”中包含了“a”值， 在整个渲染过程，会生成如图的uiDes结构，这个结构代表了整个UI的结构。小程序 wxml 获取该 uiDes，渲染出最终视图，这个过程主要利用了等效的原理。
3、 RN、Flutter 平台上的探索与实践
有了小程序平台的经验，我们很容易把RN转化工具做出来，另外在Flutter上也做了实践，做了转换工具。这两个都已经对外进行开源，开源网址和效果如下。
RN上的具体实践：
https://github.com/areslabs/alita
Flutter上的具体实践：
https://github.com/areslabs/flutter_mp
其中RN相对比较成熟，效果较好，而Flutter还处于探索阶段，还有很多功能不完善的地方，感兴趣的伙伴可以跟我们一起改进。
（1）Alita：React Native的实践
不管是React还是Flutter大体都可以分为两个阶段。第一阶段为编译阶段，根据声明式 UI 在类小程序上的等效表达：把 JSX 编译为 wxml 文件。第二阶段为运行阶段，主要是进行渲染。在Alita运行时，核心是需要做一个内嵌的mini-react，它是一个适合微信小程序五脏俱全的React的渲染引擎。在Render过程中，递归执行聚合 JSX 片段的 tempName 属性等数据，生成并返回 uiDes 数据结构。最后，将 uiDes 传递给小程序环境，进行最终的渲染。
（2）flutter_mp:Flutter上的实践
Flutter也是分成编译和运行两个阶段。在编译阶段，需要将 Dart 源码处理为可分析的 AST 结构， 深度遍历这份 AST 语法树结构，生成目标wxml。
在运行阶段，我们实现了一个极简的 Flutter 小程序版本 mini_flutter，在编译期替换所有对 Flutter 库的引用为mini_flutter（mini_flutter只存在于Rendering阶段），该 Rendering 的实现专为小程序定制， 在运行时期 Rendering 不断收集 Widgets 信息。最终生成一个 UI 描述的 JSON 结构，这个结构就包含了上文所说的 templateName、templateData，UI描述将会被下层小程序获得，用来渲染小程序 UI，包括JS引擎等。
EMOP 在京喜（原京东拼购）案例分享
2019年京东社交电商团队制定了系统的战略发展规划，首要任务是要做出来独立的App，在没有客户端开发的情况下，他们如何快速完成这个目标？在EMOP平台的支持下，他们最终只用了一个月就完成了App的开发和上线，累计节省了364人/天的工作量。
下方是EMOP支撑京喜App的整体架构图，可以清楚看到EMOP为京喜App提供了技术框架、支撑系统和公共组件，帮助他们快速完成了业务迁移，节省了大量人力。
由于业务发展迅速，对性能的要求变高，在版本升级后，京喜App需要切换技术框架。而EMOP已经具备了这项能力，为了确保业务的稳定，业务方希望实现各类型页面之间任意比例的灰度跳转。最终，EMOP通过移动配置和灰度跳转中心让它在三种形态之间进行无缝切换，且可以自行控制灰度比例。
总结
EMOP平台可以为应用开发提供全生命周期的技术与服务支撑，通过京东的内部大量业务已经验证了平台在提升研发效能、降低研发投入方面的卓越效果。一套高扩展、高性能、高可靠的业务研发平台，一系列支撑京东618、双11海量并发和用户的系统，一套完整的移动研发方法论，带来的是业务体验的改善和客户体验的提升。
EMOP平台提供7*24小时的技术支持服务，其高效稳定、灵活便捷、高效运维的特性，可以帮助企业提升研发效能，专注业务。
END
代码语言：javascript复制
