百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

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

toyiye 2024-06-06 22:12 17 浏览 0 评论

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框架主要分为两部分:

1.前端JavaScript框架

2.Native SDK

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

1 整体架构

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

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

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

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

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目前与React 、 Angular构成了三大最流行的前端开发框架,Vue.js具有组件化、virtual dom以及MVVM三大特性,还学习React的Redux,引入了状态管理模块Vuex。同时相比起React主要基于JSX,Vue.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 初始化

首先来看下初始化过程。

图中画出了 Weex SDK 的部分内容。其中 weex-vue-framework 和 Vue.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中被称为patch,patch会比较新旧VNode之间的差异,最小化操作集。最后再将Virual Dom整体更新到真实Dom之上。在执行 patch 之前的过程都是 Web 和 Weex 通用的,所以文件格式、打包编译过程、模板指令、组件的生命周期、数据绑定等上层语法都是一致的。

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

在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 中 createBody 、createElement 、appendChild 这三个接口,简单构建了一个用于渲染的节点树,最终生成了两条渲染指令。

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的工作了,具体逻辑在上一篇博客已经详细说明了,此处仅简单说明。

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

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

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

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

5 总结

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

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码