资讯 聊聊前端跨平台框架:React Native 与 Weex

es6china · 2018年04月23日 · 390 次阅读
本帖已被设为精华帖!

前言

当下,移动动态化已经成为各大公司都回避不了的问题,产品的快速迭代对技术提出了更高的要求,而移动端的动态化方案也是层出不穷:Hybrid app、结构化 Native View、React NativeWeex,什么样的方案才是适合自己团队的呢?

什么是移动动态化?

移动指的是移动端,包括安卓、iOS。动态化则是动态部署和逻辑下发到客户端的能力。移动动态最好的状态就是让移动应用和 Web 一样,想发就发!

为什么移动端要强调动态化的能力?

  • 业务迭代太快。当下大部分团队都是敏捷开发的模式,即使两周做一次迭代,产品周期还是会觉得长,有些应用不能及时上线。
  • 应用市场审核慢。安卓基本当天发应用市场,当天就能够有更新。但 iOS 需要约 3-4 天来审核。假设有些功能需要定时上线,iOS 审核时间必须要考虑进去。
  • 用户升级周期长。统计表明,每一个安卓版本发布,一周内会有 70% 的用户更新,一个月其余用户才能陆续完成更新。

移动动态化方案共性,有如下三点:

  • 跨平台。
  • 布局。约定 DSL,保证渲染性能。
  • 逻辑。Android 和 iOS 必须共用解释器。

跳出技术层面,随着App市场的暴利时代结束,市场逐渐转向红海。越来越多的公司不得不开始考虑开发成本,比较使用跨平台框架可以大大的减少开发人员的数量。性能上,只要不是很炫酷的动画很多的项目基本上都可以使用React Native 和 Weex 这两个框架来解决。所以,无论你是刚想学习前端的职场菜鸟,还是已经对原生开发已经炉火炖青的职场老鸟或是web端的工程师,都可以学习研究一下这两个框架。那么,接下来,我们对React Native 和 Weex 进行一些方面的对比,如果你对部分对比有异议,欢迎在本文下方评论提出。

原生Android、Ios 及其 WebView开发现状

  • 使用webview 加载h5, 这方案具有较高的动态性,但存在性能和展现效果上的不足。
  • native性能效果好,但动态性较差,不利于快速迭代和更新。
  • 结构化native view方案,以 native view为容器进行 native 级别的渲染,定义一套描述视图结构的数据格式 (如 XML 或 JSON 等),这需依赖一个结构化的界面描述,通常仅能保障展现维度的动态性,对于业务逻辑层面的动态性也难以保障。

聊聊 React 与 Vue

React

React背后是强大的facebook在开发维护,其目的不是要简单的创建一种新的js的UI框架,相反,其想要让React成为平台无感知的UI开发思想。什么意思呢?就是本节要说的learn once,write anywhere。facebook认为每个平台不可能完全一样,Web、Android、iOS、Windows Phone甚至Xbox,以及未来会出现的各种平台,他们都会有自己的发展理念和发展路劲,不可能做到完全一样,但不管平台如何变化,基于平台之上,创建Virtual DOM,React通过控制Virtual DOM来实现界面变化。 也就是说Virtual DOM相当于是一个中间层,隔离平台的差异,从而实现统一的开发方式。

不敢说这样的想法一定能成功,但就现在的发展势头来看,机会还是非常大的。尤其对于开发者来说极具吸引力,如果这一想法成为现实,以后React就可能像DOM一样成为业界统一的标准。那对于iOS开发者来说,在Android上面开发会跟在iOS上开发一样,不需要学习全新的Java语言,Android系统,更不要说各种Java特有的艰深复杂的工具了。

Vue

Vue.js虽然是尤雨溪个人开发的开源项目,其社区活跃度以及代码质量还是值得一提的,尤其是完善的中文API文档,对于国人来说,一份完整的中文技术文档可以节约很大一部分学习时间。当然,作为技术人员,良好的英文API文档阅读能力必不可少。在写此文章之际,Vue.js在Github上的Star达到了91770,Fork达到了13479。而react的Star数为94135,Fork数为17746,可以看到两者几乎处于平行线阶段,相较不下。但考虑到作为个人开发者能有如此多的人关注参与,该框架的优秀程度恐怕不会低于React。

Vue.js的文档资料非常齐全,而且其本身的设计非常简洁,因此绝大部分开发者只要花费少量的时间就能快速上手Vue.js。如果你想了解Vue.js,不妨从这里开始,非常值得一看。我想这可能也是weex团队选择Vue.js入手的原因之一吧。对Vue.js有兴趣的同学可以移步Vue.js Guide自行学习。

Vue.js用来构建交互式web界面的,其主要的关注点和React是一样的,都是立足于View层。

Vue.js最核心的部分是两个Reactive Data Binding以及Composable View Components。还值得特别关注的是,其保留了html、css、js分离的写法,使得现有的前端开发者在开发的时候能保持原有的习惯。

浅析 React Native 与 Weex

React Native

react-native = React + Native

在Javascript代码和原生平台之间的所有操作都是异步执行的,并且原生模块还可以根据需要创建新的线程。这意味着你可以在主线程解码图片,然后在后台将它保存到磁盘,或者在不阻塞UI的情况下计算文字大小和界面布局等等。所以React Native开发的app天然具备流畅和反应灵敏的优势。Javascript和原生代码之间的通讯是完全可序列化的,这使得我们可以借助Chrome开发者工具去调试应用,而不论应用运行在模拟器还是真机上。使用React Native,无需编写一行原生代码即可创造一款不错的app。尽管如此,使用自定义的原生视图和模块来扩展React Native也非常容易 —— 这意味着你现有的所有工作都可以被复用,你喜欢的各种原生库都可以被导入。

React Native 图示

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)

Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

React Native 是Facebook的一个开源框架,React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。官方的标语为“ Learn once, write anywhere”,仅需学习一次,编写任何平台。是目前App混合式开发的主要技术之一。

Weex

weex = Vue.js + H5/Native

Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面,然后编译成一段 JavaScript 代码,形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去,然后通过网络请求或预下发的方式传递到用户的移动应用客户端;在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎,并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践;同时,如果用户没有安装移动应用,他仍然可以在浏览器里打开一个相同的 web 页面,这个页面是使用相同的页面源代码,通过浏览器里的 JavaScript 引擎运行起来的。

Weex 图示

一次编写,多端运行。

Weex 提供强大的跨平台能力,可以使用相同的 API 开发 Web,Android 和 iOS 应用。 同时,我们对接口了丰富的扩展能力。

这样,当您需要扩展原生组件或模块时,这将非常方便。

与 Web App、HTML5 App 或 hybrid App 不同,您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用,上手非常简单。

但实际上,应用的底层是 Objective-C 或 Java, 同时,Weex 提供很多 native 组件或模块供开发人员使用。

React 与 Vue 多维度比较

维度 Vue.js React
定位 UI框架 UI框架
目标平台 Web 多平台
架构 MVVM React
数据流 数据绑定 单向数据流动
组件系统
响应式
开发语言 html/css/js all in js
flexbox 支持 支持
外围框架 能和其他js框架整合使用 能和其他js框架整合使用
渲染机制 real DOM Virtual DOM
动画 支持 支持
级别 轻量级 重量级

React Native 与 Weex 多维度比较

维度 Weex React-Native
思想 write once, run anywhere learn once, write anywhere
试用场景 简单明了 难易双修
扩展 为了保证各平台的一致性,一次扩展得在各个平台都实现 不同平台可自由扩展
社区 weex开源较晚,目前只有16.5k+ start,contributor以阿里人为主,较少,issue和pull request也比较少,社区目前规模比较小 ReactNative github上62.9k+的star,issue,pull request, contributor多,社区活跃,围绕react产生了许多开发框架
支持 alibaba支持 facebook支持
组件丰富程度 基本只有自带的10余种 除了自带的,还有js.coach上社区贡献的,还是比较丰富的
上手难度 容易 困难
调式 暂时log调试 有专门的调试工具,chrome调试,较为完善
IDE 文本编辑器 Nuclide/文本编辑器

结语

因为weex和react-native的设计思想的差异,在native部分也存在差异,但我觉得这是因为js需要导致的,仅就native而言,两者并没有特别大的不一样。

也许在不远的将来,native部分会出来一个比较核心的框架,抽象出在构建App时js和native交互所需要的基本能力,同时提供扩展方式,让各种类似react-native\weex这样的框架可以专注于js层的设计。也许react-native就走在这条路上,谁知道呢?

如果你对此贴有补充说明或任何意见,欢迎在评论区提出,此贴将不定期进行更新。感谢支持。

共收到 0 条回复
es6china 将本帖设为了精华贴 04月23日 00:17
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册