【跨平台移动开发神器】Weex动态化方案与双十一实践

在2017年1月12日 Weex Conf 2017上，来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践，本文先介绍了Weex的整体架构，接着重点分享了Weex在双十一会场上的实践，最后谈及了Weex的业务支撑，包括AliWeex等。

以下为精彩内容整理：

 

初始Weex

Weex是一套高性能跨平台移动开发框架，最大的优势是解决了频繁发版和和多端研发两大移动开发痛点。一套代码完美适配IOS、Android、HTML5和Web等多端，极大的提升开发效率同时又保证了用户体验。

Weex分为三层。最上层是DSL，早期类似于html、css、javascript这种语句的表达，让前端熟悉表达方式构建页面；中间层是Virtual DOM，Virtual DOM工作在Framework的解析引擎上，自上而下驱动底层的三端实现；底层分别架构了IOS、Android、H5的RenderEngine，从整个效果来说，Weex是三端一致的解决方案，最终各个系统平台上的UI基本上保持一致。

上图为延伸的前后端协同图，后端主要帮助我们如何从Weex源文件构建出JS Bundle，经过transformer进行转移，JS Bundle针对的是业务代码，JS Bundle会部署到后端服务器上；前台同样是三端，可以实施向后端服务器请求JS Bundle，并运行在JS Framework上，底层的RenderEngine是架构在IOS原生的JSCore，Engine上我们用了V8，它会有一个双效通道，可以通过callJS、callNative来发出指令。

图中红色标记的是WeexKernel，主要包含UI系统，UI系统中有很多重要的组件，比如List、Scroller、Slider、Image等15种组件，后续我们会进一步扩展组件，同时可以看到，在每个Components上还涵盖生命周期、动画和手势，能够让页面变得更加灵动；基于单个页面有导航Navigator，它能够帮助我们进行页面流转；不同页面之间需要进行交互，我们提供了全局事件的方式；同时我们结合了Network功能，Data Store进行数据存储。

应用级框架下面是Module，功能的扩展。然后下面做的是整个性能的把控，右侧部分为适配层，主要是网络层图片库的适配、本地的开发环境等。

 

双十一会场实践

2016年双十一会场首次大规模启用Weex，总计淘宝+天猫共1754张会场页面，Weex占比99.6%，约为1747张；在流量最重要的天猫主会场入口，5个Tab都是用Weex进行实现的，同时，在天猫和淘宝的分会场，基本做到零降级。

当然，双十一也并不是一帆风顺，在用Weex设计双十一会场时也遇到了一些困难。大致分为四个维度：页面交互复杂、氛围设置动态化、秒开与性能、容灾机制。

阅读全文直接点击：点击打开链接