Weex详解：灵活的移动端高性能动态化方案

在2016年4月份的QCon上，阿里巴巴资深总监，淘宝移动平台及新业务事业部、阿里百川负责人庄卓然（花名南天）宣布阿里移动端跨平台开发框架Weex开始内测，并将于6月份开源。在QCon的第二天，阿里技术专家徐凯（花名鬼道）和阿里前端开发专家赵锦江（花名勾股）向参会者做了《Weex——灵活的移动端高性能动态化方案》的演讲，对这一技术方案进行了详细的剖析。

以下为演讲内容的整理：

昨天南天宣布Weex启动开源内测，截至到今天中午，我们统计申请内测用户突破1400人，大家的热烈程度远远超过我们的设想，非常感谢大家支持。

在我们对移动开发最佳实践的思考中，我们认为移动开发的未来是更平衡的方案，一定是性能和动态性兼得。第二个，它一定是开放互联的，PC端一直也是这样的，也是非常好的状态。我们觉得移动互联网将来肯定也是基于更大众化的技术体系，没有平台之间的隔阂，简单直接易用，这是我们最希望看到的。基于这些设想，我们有了Weex方案。

Weex是从去年双十一的时候第一次在我们正式产品中使用，承载了双十一主会场的工作。有人会问，Weex是不是除了做主会场别的地方就比较吃力呢？从去年双十一到现在，包括我们自己的尝试和阿里内网做开源内测活动，大家也贡献了很多内容，包括昨天Keynote演示的僵尸动画，扫雷、计算器都有，各种丰富场景的东西都可以通过Weex做出来，不仅仅是做主会场的技术方案。

对移动端开发模型的理解

我们谈谈Weex团队对移动端开发模型的理解。

今天绝大多数移动端APP是这样一个最佳实践，首先把移动端所有界面拆分成各个page，中间有一个路由的控制逻辑。同时我们需要移动端各种各样丰富的能力，通过API的形式提供给开发者。这是我们认为一个比较理想的开发模型。

从开发模型来讲，我们比较倾向于通过标准化的一些东西，包括HTML、CSS、JS这些前端非常快速易用好学的语法作为一个开发体验，提供给开发者。这里强调一下，我们语法设计尊重了Web标准，包括核心源代码都是从Vue.js——一个非常优秀的MVVM前端框架来的。我们的开源内测同步在海外通过Vue.js的Twitter等途径进行宣传，得到了非常热烈的反响，短短一天时间内，老外们的关注度和热情也是出乎我们的意料。有些人非常兴奋和激动，想知道什么时候看到源代码，和我们联系，我们觉得也是值得高兴的一件事情。

Weex的组件化与DSL语法

Weex编写的页面天然的支持组件化，首先，我们的界面可以是一个组件化的，把一个复杂界面分成每个组件，刚才演示的都是简单的组件，每个组件都可以看成是一段template，style，script，放到模型里，对应到界面的结构，样式细节，行为定义。在view里面我们倾向于把数据和视图当中需要展示和需要有动态变化的部分做一个数据绑定，绑定之后我如果想更改界面的话，通过改变数据就可以做到。这是从model到view非常顺畅的控制逻辑和代码方式，这也算是Weex上层语法设计的基础。如果大家做的界面比较复杂，可能有更多细节，或者做更多分解，我们需要从整体上对整个界面以模块为单位作为拆解，对每个模块做定义，如果界面足够复杂，可以先拆成组件，再把每个组件具体内容进行定义。定义方式就是通过结构、样式和行为角度对它进行定义，通过有机方式把这些组件结合起来，完成页面开发。

关键语法简述。首先看看template，大概有几个元素。它首先是virtual DOM tree展示，包括事件绑定，组件跟组件之间还可以嵌套，还可以有子元素，这是整体template结构。再往下是style，一方面可以把共用样式抽样出来，另一方面可以让template结构更加清晰，不至于陷入到整个具体样式描述当中去。我们在这边会做一些收敛，我们只支持了单个class的selector写法，主要从性能角度考虑。传统的css可以理解为是一个N对N的数据库，匹配过程非常复杂，性能也得不到非常好的保证，我们为了保证性能，我们把selector约定在单个class，性能可以保证。

另外，我们的样式天然默认的就是scoped，大家可以放心定义各种各样的classname，不担心和其他组件相冲突，全局冲突是CSS“七宗罪”中的一个，其实这也是我们非常重视的，所以在实践上我们把它做到了scoped。

其他的，可以做一些展示的控制，比如if、repeat刚才演示中也提到了。刚才没有演示到的这个很特殊，append，在性能不是那么好的Android下，界面加载过程用户是可感知的，不是一瞬间做到的。我们加这个值可以让你精细化展示界面的颗粒度，如果上层做了append等于tree的话，里面一系列东西会做一次性的加载，这是从性能优化角度做的特殊设计。再是id，我们可以通过在这里面写id拿到这个值，把它当作参数传给API做处理。

我们现在已经支持的组件，除了刚才演示的div空白容器、图片、文本之外，我们还支持slider：一个性能比较好的滑块组件，还有list，性能上自动做内存管理和资源管理的组件，把性能和帧率各方面都做的比较好。还有input，输入框我们是最近才做的，也是刚支持的，可能还有试验性阶段的小东西。在这个范围之外，业务方可在上层横向扩展，稍后会有具体介绍。这是template和style部分的介绍。

样式部分我们支持flexbox，非常灵活通用便捷的布局方式，有了flexbox，只要你的界面可以拆分成豆腐块的，都可以用flexbox来做，同时我们还做了fixed和sticky这两个特殊的布局，sticky意思是如果有一个列表分类，比如联系人ABC字母滚到屏幕外，会停在最上面，那个效果就是sticky，当你划走它就会跟着走，在各种手机应用当中是一个比较常见的东西。同样，更多的样式每个组件也可以自己定制，非常灵活。

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

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