速记：SFDC 2016 - 淘宝Weex 王利华 《WEEX双十一及组件生态思考》.docxVIP

主题：2016杭州开发者大会—前端分会场 时间：2016年12月10日下午1：40 会场主持人：独立开发者(时光相册) 郭宇 议题：《WEEX双十一及组件生态思考》 讲师：淘宝 王利华 王利华：我解释一下，题目是昨天和组委会协商改了一下，不是讲的那么细，拓展一个Weex组件。我觉得“双十一”的数据可以给大家看一下；第二，我们在Weex开源项目上做的思考和大家分享一下。如果我讲的太细，一个很细的话题，估计后面讲师也不好讲，因为好多是来秀肌肉的。如果讲小了，后面吹牛不好吹了，所以我讲大一点，和大家分享一下这里的感受。 我目前是在淘宝，Github是 vczero。我很纳闷，大家对我没有一个完全的标签定义，到底是前端还是服务端，我自己也不知道定位成什么样的工程师。所以有一天我到被代码托管平台去看，他们评价是服务端工程师，所以我的自我介绍是“被代码托管平台鉴定为后端的前端程序员”。那我是过来给前端同学讲服务端的？开个玩笑哈。今天和大家分享一下Weex，用前端的经验开发移动应用。 进入正题，今天的主题是《WEEX双十一及其组件生态的思考》。第一，Weex过去到现在是怎么诞生的。第二，Weex在“双十一”中的应用，包括一些优化，一些数据。第三，Weex在组件生态上面一些思考，包括怎么服务大家，怎么做好生态。 首先回顾一下阿里移动技术动态方案，2013年的时候，估计所有电商企业都会提到一个需求，自定义店铺。自定义店铺，很多商家希望通过拖拽的形式生成一个店铺的页面，这个页面是非编程形式的。阿里这套方案有一定的数据绑定，包括UI布局。但它的UI布局是栅格化的布局，拖拽到上面就可以看出来。它的好处就是所见即所得，大家看到的效果基本上和商家拖出来的效果是一样的。但是它有一个缺陷，缺乏交互。所以我们2014年提出来，希望动态的能力能够发挥出来，实现交互。 从非编程到编程状态的过渡，我们提出了JSON方案。通过JSON的形式表述一个界面，动态渲染出来，这样可编辑的东西更多，同时组件更加丰富，降低了大家的学习成本。但是有一个很难的问题，比如业务方需要一个新的组件，就需要核心团队去扩展，这是很难的。同时它是非标准的，自己自定义一些组件，这些组件是不具备标准化的，所以我们需要做一个标准性的东西，满足业务方去拓展，所以2015年Weex就诞生了。 weex把业务扩展，第三方扩展放在一个很高的命题，默认支持扩展，我们提出一个概念，要面向Web标准，支持很好的扩展，所以Weex诞生了。2015年的时候，Weex在“双十一”中已经应用。2015年后面开始开源，到2016年的“双十一”。Weex整个历程是这样的，从探索动态化方案到今天的Weex，在阿里是这样一个过程。 （图示）Weex是什么，是这样一张图，主要分为三层。第一层，上面的DSL，HTML和JS、CSS前端的语法，转成Virtual DOM。底层的实际上是三端的渲染。也就是这个表达式所表达的。输入是HTML和JS、CSS前端的代码，输出的是Native的UI,这也就是为什么weex高性能的原因。 回顾一下之前Weex一些节点。2016年4月Qcon北京，Weex宣布内测。6月30号，Weex正式开源，9月3号，JSConf在南京，宣布Vue2.0和Weex深度合作。10月15号，云栖大会宣布启动Weex项目捐赠Apache基金会准备工作。 “双十一”之前，Weex在阿里一些业务的展现，比如说天猫的主会场，6.18。第二，微淘的一些页面，手机淘宝里的体现，包括天猫新风尚。还有一些其它的APP，在阿里其它业务中再铺开。比如阿里云的APP，包括虾米音乐，虾米音乐这个团队非常可赞，他们很快接入Weex，全面推Weex，所以他们很多页面都是Weex做的，大家可以体验一下下面这款音乐的APP。 现在讲一下Weex在“双十一”中一些应用，其实Weex在“双十一”中的比重是非常大的。包括今年很多项目会提出更高的要求，比如体验的更高性能，滑动一个页面是否感觉到很流畅，丝滑般的体验，这个要求非常高的。目前Weex在“双十一”中大概有2千多个页面，当然统计的页面主要在天猫淘宝的主会场、分会场一些页面。大概是这样的数量，近2千个页面。Weex占比95%，大家可能好奇另外5%为什么没有Weex？有一部分是动画引擎需要强支持的的一些页面，因为动画引擎这一块还是比较复杂的，Weex目前没有很好的支持。 Weex覆盖“双十一”的一些业务基本上是这些，主会场，大家都可以看到，点进去很多列表，一些商品，一些会场，比如汽车，各种会场。还有分会场，还有分分会场，人群会场。大家可能觉得这个名词好多，怎么这么多会场，其实后面还涉及到性能优化的一个点。这个会场的层级非常深