阿里无线11.11 | Weex——关于移动端动态性的思考、实现和未来

Weex 核心设计理念是三端一体化的动态化解决方案，云端同学实现实时发布和动态部署、模版预解析处理，前端同学在 JS Framework 实现动态内容解析并处理成 Virtual DOM，客户端同学提供渲染实现和 native 特性的支持，接下来业务同学根据 DSL 实现动态内容的开发或配置即可。

Weex 在 DSL 设计上大量借鉴了 Web 标准的规范，并且通过主流且成熟的 MVVM 模式书写 template、style、script，我们在学习成本、开发习惯方面为业务同学考虑了很多，这样的话业务同学可以很快的学习和上手，并且保证代码的规范性和可读性 (这里要特别鸣谢一下 Vue.js 及其作者尤雨溪，我们在上层 DSL 的设计和 JS Framework 的实现上都做了深度的使用和借鉴，也在和作者的交流过程中受益匪浅)。

其次为了提升性能，减少客户端的性能损耗，Weex 在服务器端实现了 DSL Transformer 的工作，可以在模版发布的同时，将 XML + CSS + JavaScript 代码转换为可以小数据量执行效率高的 JS Bundle，并同步存储至云端：如 Web Server、CDN 等。

再次为了保证业务逻辑的动态性，Weex 在客户端的 JavaScript 引擎中预运行起了一套 JS Framework，来负责解析整个 JS Bundle，而 native 端则只负责 Virtual DOM 的解析和布局、UI 渲染的实现、以及基础网络通讯、文件读写以及手势处理等基础 API 的实现。

还有为了有效的提升工作效率，Weex 的 JS Bundle 可以实现三端跨平台渲染展示，业务同学可以通过开发一份 Weex JS Bundle，来实现 iOS/Android/HTML5 三端的正常展示。

所有的 native 组件和 JS API 全部都是模块化的，业务同学可以通过注册新的模块和方法达到去中心化的能力扩展。

关于 Weex 的性能优化还有以下几个细节：

JS Framework 通过对数据的依赖收集，实现响应式的视图层，再加上一层 diff 算法的优化，可以有效的过滤冗余的操作和复杂的计算。

Native 端对通信，Virtual DOM 解析以及布局实现等进行异步线程的处理，防止 UI 线程的阻塞。

对 UI 组件节点实现了复用处理，并对图片资源进行监控和回收，有效的减少内存的占用。

对于实时性要求较高的处理，Weex 允许第三方实现 native 的定制需求来保证体验的流畅性。

图：Weex 关键性能测试和同类方案对比

注：数据取自实验室测试结果，测试界面为 60 个左右“坑位”的商品列表，测试机型为： 

iOS：iPhone5 - iOS 9.1  Android：三星SM-N9006 - Android 5.0

Weex在天猫双十一的项目实践

Weex 在双十一项目中，参与并支撑了的移动端主会场界面展示和动态处理。在云端实现了天猫前端运营发布系统“斑马”的对接，在前端开发实现了主会场的界面模块和业务逻辑处理，同时在客户端上对接了手机天猫、手机淘宝。

去年双十一主会场的挑战

在每次双十一中，主会场都是非常关键的一个环节。大量的流量把用户、店铺、商品从各路而来汇聚在这里作为着陆的起点。在内容的复杂度、灵活性、体验等方面都有着极高的要求。根据我们往年的经验，会场的分流能力强化、分会场的层级扁平化、运营工作量合理化、体验和性能的优化，是非常重要的几个细节，同时也推演出了今年主会场的三大改进目标：

体验 app 化

层级扁平化

内容个性化

体验 app 化意味着我们需要有超越传统 HTML5 的性能和体验；层级扁平化意味着每一层的内容会更加丰富和复杂，主会场当然也不例外；内容个性化则需要我们在前期内容的产生、算法、投放、客户端内容加载和界面呈现等每个环节进行全面升级。

Weex在主会场中发挥的作用

想做到这些，光凭一个好的创意和想法、或凭借员工超强的执行力、或靠砸钱砸机器，都是没有办法做到的，这个问题需要技术驱动力来解决！需要精密的设计和实现。Weex 团队在整个双十一的筹备过程中和需求方就上述问题进行了深入的沟通和交流，并拿出了切实有效的技术方案，很好的解决了其中的很多关键环节问题，并且 Weex 作为一个新的技术方案很好的经受住了如此重要的“考验”！

首先，我们通过 Weex 实现了在双十一主会场的 iOS/Android/HTML5 的一次开发，多端同步展示能力，并且展现效果和各方面的体验都是 native 级别的。

第二，我们配合算法团队实现了今年的双十一主会场的个性化需求，即所谓的“千人千面”，并实现了双十一主会场商家的运营配置的静态数据和个性化推荐算法的动态数据在端侧的拼合展示。并且优化了整个客户端内容加载、界面初始化、交互时的性能

第三，Weex 保有了接近 HTML5 的灵活调整发布机制，实现了在客户端侧的渲染动态性，运营人员可以通过配置实时调整主会场楼层位置，以及“坑位”的排布，以及界面的布局展示和样式调整。

第四，基于优异的性能表现，在内容呈现的数量上，我们也突破了传统的 120 “坑位”的性能极限，本次双十一最后实际的最大“坑位”数接近了 180 个，依然表现非常完美——要知道团队在前期都是拿 300 个“坑位”进行“暴力极限测试”的。为会场的扁平化进一步提供了保障。

更多的Weex项目实践分享与总结

目前 Weex 已经在阿里巴巴集团内和更多的业务方展开合作，包括淘宝双十二等项目 (笔者撰稿时恰逢双十二当天，Weex 正在接受新一轮的业务洗礼！)，我们希望后续会有更多的实践经验和心得持续分享出来。

为了Weex的目标和规划

（编辑：应用网_镇江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!