开发者社区> 李牙刷儿> 正文

用WEB技术栈开发NATIVE应用(二):WEEX 前端SDK原理详解

简介: WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的?目前WEEX已经完全开源,并捐给Apache基金会,我们可以通过分析其源码来一探究竟。
+关注继续查看

作者:阿里-移动云-大前端团队

传统的移动端开发,一个完整的业务需要维护三份终端代码:Android、iOS、H5,这带来了极大的开发成本以及维护成本。尤其是对处于业务初创期需要快速试错的业务以及需要支持定期运营活动的业务。所以业界也一直在探索跨平台方案,旨在通过一套代码完成各个终端的业务逻辑。相关方案经过不断演化,从早期的H5、Hybrid到如今的Cloud Native(云原生),在开发效率和用户体验上都在一点点逼近最初的设想。

早期H5和Hybrid方案的核心是利用终端的内置浏览器(webview)功能,通过开发web应用满足跨平台需求。该方案可以解决跨平台问题,同时可以提升发版效率。但其最大的弊端在于用户体验相较于native开发的app存在较大差距,经常出现页面卡顿,加载慢等问题。

于是后来业界开始探索依旧利用web技术栈开发出媲美原生体验app的方案,于是以WEEX为代表云原生开发框架开始出现。所谓云原生(Cloud Native)指可以通过云端快速发布(与远程web应用发布流程类似),同时还可以达到媲美原生App体验的方案。WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的?目前WEEX已经完全开源,并捐给Apache基金会,我们可以通过分析其源码来一探究竟。

WEEX框架主要分为两部分:

  • 前端JavaScript框架
  • Native SDK

在上一篇博客中,我们介绍了Native SDK的原理,本文主要介绍其前端JavaScript框架原理。

1 整体架构

首先还是再来看下WEEX开发的整体架构:

weex1

可以看到在JS-Native Bridge将渲染指令发送给Android或者iOS渲染引擎之前,我们的业务代码运行在JSCore/v8的执行引擎之中,而在该执行引擎之中除了执行业务JSBundle,还运行着JS FrameworkJS Framework不仅提供了jsbundle必要的运行时环境,同时还提供了与native通信的接口。

而这个JS Framework就是我们今天介绍的重点。

weex11

这是前端框架的主要架构:

  • FRONTEND FRAMEWORK/DSL:这是WEEX的开发框架,目前WEEX主要是使用Vue.js进行开发
  • WEEX-VUE-LOADER:前端编译器,将vue文件编译成es5代码
  • WEEX-VUE-FRAMWORK:WEEX核心框架,主要负责将virtual dom转换成weex的native dom api
  • WEEX-RUNTIME:负责与native渲染引擎对接,将native dom api转换成对应平台(Android、iOS)的platform api,然后传递给native渲染引擎,由后者负责渲染工作。

2 Vue.js

首先来看下前端开发框架Vue.js,Vue.js目前与ReactAngular构成了三大最流行的前端开发框架,Vue.js具有组件化、virtual dom以及MVVM三大特性,还学习ReactRedux,引入了状态管理模块Vuex。同时相比起React主要基于JSXVue.js的开发模式更加清晰,简单,上手速度更快。.vue 文件通常可以分为三部分:<template><style><script><template> 是必须要有的,其他可选。其中 <script>中的代码会保留或者被转换成 ES5 的语法;<style> 中的 CSS 在 Weex 平台上会被转换成 JSON 格式的样式声明,放到组件的定义中去;<template> 会被编译生成组件定义中 render 函数,可以理解为 render 函数的语法糖。下文是一个简单的.vue文件:

<template>
  <div style="justify-content:center;">
    <text class="freestyle">Hello World!</text>
  </div>
</template>

<style scoped>
  .freestyle {
    text-align: center;
    font-size: 200px;
  }
</style>

3 WEEX-VUE-LOADER

由于.vue文件并不是标准的JavaScript代码,该代码不能直接被JS执行引擎识别,所以在编译过程中需要将.vue文件转化成标准的es5代码。而负责完成这一操作的就是WEEX-VUE-LOADER

4 WEEX-VUE-FRAMEWORK&WEEX-RUNTIME

完成编译后,输出的bundle.js即可被JS执行引擎所识别,可以执行其逻辑了。那么接下来就来看下bundle.js的执行过程。

4.1 初始化

首先来看下初始化过程。

weex12

图中画出了 Weex SDK 的部分内容。其中 weex-vue-frameworkVue.js 是对等的,语法和内部机制都是一样的,只不过 Vue.js最终创建的是 DOM 元素,而 weex-vue-framework 则是向原生端发送渲染指令,最终渲染生成的是原生组件。Weex Runtime 用来对接上层前端框架( Vue.js )并且负责和原生端之间的通信。Render Engine 就是针对各个端开发的原生渲染器,包含了 Weex 内置组件和模块的实现,可扩展。

4.2 创建组件

weex接收到bundle.js之后,首先检查其合法性,如果发现用的是Vue版本(weex早期版本使用.we语法),就会调用weex-vue-framework中提供的createInstance创建实例。一个bundle.js对应一个weex实例,且每一个实例都有唯一的instanceId,与之对应。实例与实例之间相互隔离,互不干扰。

在创建实例的过程中,bundle.js会执行new Vue()创建一个vue组件,并通过其render函数创建VNode节点,即virtual dom节点。第二节中的示例代码会最终生成类似如下的vnode节点:

{
  tag: 'div',
  data: {
    staticStyle: { justifyContent: 'center' }
  },
  children: [{
    tag: 'text',
    data: {
      staticClass: 'freestyle'
    },
    context: {
      $options: {
        style: {
          freestyle: {
            textAlign: 'center',
            fontSize: 200
          }
        }
      }
    },
    children: [{
      tag: '',
      text: 'Hello World!'
    }]
  }]
}

4.3 patch

生成了VNode之后,接下来需要将VNode同步到真实的Dom之上,该过程在Vue.js中被称为patchpatch会比较新旧VNode之间的差异,最小化操作集。最后再将Virual Dom整体更新到真实Dom之上。在执行 patch 之前的过程都是 Web 和 Weex 通用的,所以文件格式、打包编译过程、模板指令、组件的生命周期、数据绑定等上层语法都是一致的。

然而由于目标执行环境不同(浏览器和 Weex 容器),在渲染真实 UI 的时候调用的接口也不同。

weex13

vue.js内部,weex平台和web平台的patch方法有所不同。简单来讲,在web平台,patch需要将Virtual Dom利用标准Dom API更新到真实Dom即可。接下来的UI更新就交给浏览器即可。

但是由于在weex平台下,最终的UI渲染是由native渲染引擎执行的,native渲染引擎不能识别Dom API,所以在weex平台下,需要将Virtual DOM转化成native 渲染引擎可以识别的Native DOM API

4.3 发送渲染指令

在上层前端框架调用了 Weex 平台提供的 Native DOM API 之后,Weex Runtime 会构建一个用于渲染的节点树,并将操作转换成渲染指令发送给客户端。

回顾文中提到的 例子,上层框架调用了 Weex Runtime 中 createBodycreateElementappendChild 这三个接口,简单构建了一个用于渲染的节点树,最终生成了两条渲染指令。

weex14

Platform API 指的是原生环境提供的 API,这些 API 是 Weex SDK 中原生模块提供的,不是 js 中方法,也不是浏览器中的接口,是 Weex 内部不同模块之间的约定。

目前来说渲染指令是基于 JSON 描述的,具体格式大致如下所示:

{
  module: 'dom',
  method: 'createBody',
  args: [{
    ref: '_root',
    type: 'div',
    style: { justifyContent: 'center' }
  }]
}
{
  module: 'dom',
  method: 'addElement',
  args: ['_root', {
    ref: '2',
    type: 'text',
    attr: { value: 'Hello World!' },
    style: { textAlign: 'center', fontSize: 200 }
  }]
}

4.4 渲染原生组件

接下来就是WEEX NATIVE SDK的工作了,具体逻辑在上一篇博客已经详细说明了,此处仅简单说明。

原生渲染器接收上层传来的渲染指令,并且逐步将其渲染成原生组件。

渲染指令分很多类,文章中提到的两个都是用来创建节点的,其他还有 moveElementupdateAttrsaddEvent 等各种指令。原生渲染器先是解析渲染指令的描述,然后分发给不同的模块。关于 UI 绘制的指令都属于 "dom" 模块中,在 SDK 内部有组件的实现,其他还有一些无界面的功能模块,如 stream 、navigator 等模块,也可以通过发送指令的方式调用。

这个例子里,第一个 createBody 的指令就创建了一个 <div> 的原生组件,同时也将样式应用到了改组件上。第二个 addElement指令向 <div> 中添加一个 <text> 组件,同时也声明了组件的样式和属性值。

上述过程不是分阶段一个一个执行的,而是可以实现“流式”渲染的,有可能第一个 <div> 的原生组件还没渲染好,<text> 的渲染指令又发过来了。当一个页面特别大时,能看到一块一块的内容逐渐渲染出来的过程。

5 总结

通过本文以及上一篇:WEEX NATIVE SDK原理详解,总算是将weex的大致原理介绍清楚了,当然还有很多实现细节文中并未展开,有兴趣的朋友可以留言大家一起讨论下,另外文章中有错误的地方也请大家指正!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Github开源项目:微信公众号开发框架wechatty介绍
Wechattty Project是一个基于JAVA的微信公众号(包括服务号和订阅号)和微信企业号的开发框架,封装良好的API让开发者可以专注于业务逻辑的开发,提高开发效率。
5544 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1163 0
【双11背后的技术】Weex 双11会场大规模应用的秒开实战和稳定性保障
作者:鬼道  前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的。流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近原生的性能;同时又是 Web 的痛点:资源首次下载、长页面内存溢出和滚动性能、动画性能、传统 web 性能(如JS执行效率)。
4429 0
NDK开发历程(一):android native code的调试方法
引用:http://www.cnblogs.com/ychellboy/archive/2013/02/22/2922683.html   使用NDK在android上做开发是一件“痛并快乐着”的差事,之所以“快乐”是因为可以将一些原有的C/C++库直接移植到android上,而不需要用java再开发一套功能相同的库。
739 0
Furatto – 轻量,友好的响应式前端开发框架
  Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站。这个框架采用流行的扁平化设计和响应式设计。除了布局和网格之外,所有的主要元素都有预定义的样式,例如按,表格,表单等,而且还有各种各样的 JavaScript 组件,像模态弹窗,工具提示等等。
663 0
Android Native 代码NDK开发学习笔记
引用:http://www.kunli.info/2011/08/21/android-native-code-study-note/ JNI,全称Java Native Interface,是用于让运行在JVM中的Java代码和运行在JVM外的Native代码(主要是C或者C++)沟通的桥梁。
869 0
React+Redux打造“NEWS EARLY”单页应用 一步步让你理解最前沿技术栈的真谛
通过这个项目实例和这篇文章,一步一步说明了这个项目开发细节,并且包括了优化手段等内容。希望使大家对于React技术栈,包括:Redux数据流框架+React Router路由管理+Webpack构建工具等,有一个更加清晰深刻的理解。
2424 0
+关注
李牙刷儿
Android开发者&amp;前端菜鸟,专注于跨平台、热修复领域
87
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载