转载：小程序在蚂蚁聚宝上的首发实践

前言

微信小程序的面世掀起了一阵开发Hybrid应用的热潮，基于简单DSL语言的开发模式不仅降低了开发者的学习成本，而且屏蔽了底层的实现细节有利于框架提供者进行优化。我们蚂蚁聚宝的技术同学也一直致力于Hybrid应用方面的探索，与微信小程序的初衷不同，蚂蚁聚宝在Hybrid上投入精力的目的主要是为了帮助业务同学迅速构建应用并更新。为了提供更好的用户体验，我们主攻的方向是react native。由于react native入门较为困难，加上存在些兼容性问题，因此一直很难在业务上推广出去。微信小程序的出现给我们提供了崭新的思路，既然微信小程序可以在H5上搭建一层DSL，我们也可以用一套DSL来支持H5和react native。在支付宝的牵头下，蚂蚁聚宝，支付宝以及平台技术部成立虚拟小组，共同开发了支付宝小程序。目前支付宝小程序已具雏形，正在快速迭代优化中。蚂蚁聚宝作为参与者之一，已在最近版本中集成小程序容器并通过试点业务来验证基于react native的小程序的功能，可靠性以及性能等各个方面。

容器架构

容器架构.png

DSL

• 借鉴于微信小程序的DSL，我们的小程序框架分为逻辑层和视图层。框架中数据与视图绑定，只有当数据更新时，视图才会更新。通过简单的开发模式，降低学习成本，不论是native还是H5开发，只要懂得JavaScript和简单CSS，就可以快速上手。

• DSL的存在隐藏了操作系统的细节，因此业务同学只需要写一份代码就可以在Android和iOS设备上运行，对效率的提高十分显著。

• 由于业务同学对组件有特定的需求，我们内置的组件并不能满足要求，因此框架对内部业务开放扩展能力，业务同学可以将自己开发的组件导入到框架内运行。

react native

• 分包策略，加快启动速度。React native的JS框架加载时间比较长，影响小程序的启动速度。因此我们打包时将基础JS与业务JS分离，容器保持后台有一个空闲的已加载好基础JS的JS bridge，当用户启动小程序时，使用已加载基础JS的JS Bridge加载业务JS并渲染页面。在我们的试点业务上，iOS和Android的秒开率高达95%左右。

• 出于安全性考虑，每个小程序应用都运行在独立的JS Bridge上，这样保证两个应用之间相互不影响。我们对容器中运行的JS Bridge数量进行限制，避免消耗太多内存。

• 长列表是业务开发中最常用的组件，然而react native对它的支持并不是很好，无法进行view回收和重用。我们在长列表上投入了相当的精力，开发了全新的长列表组件，可以进行view回收和重用，在实际场景中，滑动帧率可以达到将近60fps。

• 在Android上，我们将react native依赖的fresco图片引擎移除，换用支付宝的多媒体库，使得小程序容器的体积直线下降，控制在3MB以内。

跨端支持

蚂蚁聚宝有许多业务和支付宝是重合的，在小程序之前，native开发的代码要从蚂蚁聚宝移到支付宝中运行，需要很多的精力来抹平因使用不同API和组件造成的差异，而且维护两套代码成本从长远来看也不小。虽然也可以使用H5来解决该问题，但小程序的体验要优于H5，因此提供了业务同学一种更好的方式来支持业务。

包管理

得益于Nebula的强大支持，我们并没有在包管理上花费很多功夫，完全依靠Nebula帮助小程序更新客户端离线包。Nebula包管理在短时间内的更新覆盖率很高，我们曾发现一个线上的JavaScript异常，提交新的代码后，在1小时内异常发生率直接下降，迅速解决业务问题。