热更新的几种实现方式
热更新的几种实现方式
[TOC]
一. 动态库
使用 OC / Swift 原生实现
把需要集成的功能模块,打包成 framework ,通过网络下发到已经上架的 App 中。
技术上是可以实现,可以做demo用,真实使用的时候会被苹果禁止。
因为打包发到 AppStore 的 ipa 安装包里的每个动态库都有唯一的编码,iOS系统会进行验证,所以动态通过网络获取新的动态库也用不了。
二. Hybrid
随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用 iOS&Andriod 开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP。
1.Hybrid 的优点:
- Hybrid开发效率高、跨平台、低成本
- Hybrid从业务开发上讲,没有版本问题,有BUG能及时修复
2.Hybrid 的缺点:
- Hybrid体验就肯定比不上Native,所以使用有其场景,但是对于需要快速试错、快速占领市场的团队来说,Hybrid一定是不二的选择,团队生存下来后还是需要做体验更好的原生APP。
Hybrid APP底层依赖于Native提供的容器(UIWebview / WKWebView),上层使用Html&Css&JS做业务开发。
3.使用 Hybrid 要处理的问题:
(1) Hybrid中Native与前端各自的工作是什么
(2) Hybrid的交互接口如何设计
(3) Hybrid的Header如何设计
(4) Hybrid的如何设计目录结构以及增量机制如何实现
(5) 资源缓存策略,白屏问题......
4.从零到一设计 Hybrid 成本很高,所幸市面上有一些 Hybrid 开发框架可供我们选择使用:
(1) PhoneGap
(2) Cordova
(3) APICloud
如果遇到 APP 页面打不开,或者崩溃的问题,在某些场景中可以使用 H5 替代,作为一种防御手段,作为开发,H5 始终是绕不开的坑。
5.参考
三. JSPatch
作者:bang,现就职杭州阿里巴巴。
博客地址
1.JSPatch 的使用方式
只需在平台注册上传脚本,App 接入 SDK 即可使用 JSPatch 为自己的 App 提供动态能力。
热更新时,从服务器拉取js脚本。
2.原理
通过 Runtime,从 JS 传递要调用的类名函数名到 Objective-C,再使用 NSInvocation 动态调用对应的OC方法。
3.风险
JSPatch让脚本语言获得调用所有原生OC方法的能力,不像web前端把能力局限在浏览器,使用上会有一些安全风险:
(1) 若在网络传输过程中下发明文JS,可能会被中间人篡改JS脚本,执行任意方法,盗取APP里的相关信息。可以对传输过程进行加密,或用直接使用https解决。
(2) 若下载完后的JS保存在本地没有加密,在未越狱的机器上用户也可以手动替换或篡改脚本。这点危害没有第一点大,因为操作者是手机拥有者,不存在APP内相关信息被盗用的风险。若要避免用户修改代码影响APP运行,可以选择简单的加密存储。
4.使用 JSPatch 要慎重!
因为苹果的原因,之前使用 JSPatch 的开发者都收到了警告邮件。
邮件内容显示:
“您的应用、扩展、和/或链接框架中的代码,将能够在 App Review 审核之后改变应用的行为或者功能。此举违反了《苹果开发者计划许可协议》的 3.3.2 章节以及《App Store 审查指南》2.5.2 章节的规定。”
“这些代码中带有的远程资源,将会改变应用的行为,与其在审核进入 App Store 时的行为有很大差异。”
四. Waxpatch
先了解以下脚本语言 Lua
Lua介绍
Lua(简称撸啊)在 iOS 中被广泛的使用着,在行业中最著名的莫过于魔兽世界以及移动互联网的愤怒的小鸟。
wax 框架:基于 lua 语言,它能够实现在 iOS 中使用 lua 语言编写界面控件。
Lua.png
waxpatch:完全就是基于这个 wax 的框架之上去做的一个动态更新的组件了。热更新时,从服务器拉去lua脚本。
但是,WaxPatch 早已停止维护。
相对于 WaxPatch,JSPatch的优势是:
(1)JS语言
JS比Lua在应用开发领域有更广泛的应用,目前前端开发和终端开发有融合的趋势,作为扩展的脚本语言,JS是不二之选。
(2)符合Apple规则
JSPatch更符合Apple的规则。iOS Developer Program License Agreement里3.3.2提到不可动态下发可执行代码,但通过苹果JavaScriptCore.framework或WebKit执行的代码除外,JS正是通过JavaScriptCore.framework执行的。
(3)小巧
使用系统内置的JavaScriptCore.framework,无需内嵌脚本引擎,体积小巧。
(4)支持block
wax在几年前就停止了开发和维护,不支持Objective-C里block跟Lua程序的互传,虽然一些第三方已经实现block,但使用时参数上也有比较多的限制。
相对于WaxPatch,JSPatch劣势在于不支持iOS6,因为需要引入JavaScriptCore.framework。另外目前内存的使用上会高于wax,持续改进中。
后来阿里接手,不知道后续情况如何。。。
五. Rollout
Rollout 不仅仅支持OC ,还支持Swift,脚本语言是javascript,已经平台化了,若干个产品使用。
后端有相关的管理页面。因为是国外的网站,然后呢,要科学上网
才能使用。
国内对这个介绍的并不多。
Rollout 的原理和部署方案比较接近 JSpatch,基于 iOS 运行时注入OC格式化的JS代码来修复/更新App的热修复方式。
JSpatch 和 Rollout 方案已经受到苹果爸爸的抵制,Rollout 公司推出了第二代产品ROX,一样的功能,不一样的罐装。(还可支持安卓)
六.DynamicCocoa(滴滴)
1.简介
DynamicCocoa 是滴滴iOS的一个框架,准备在2017年初开源,与JSPatch比更加智能化,但是至今仍未开源。
这里可以看到 DynamicCocoa 这个仓库,但是迟迟没有更新,只有简单说明。
但是,滴滴已经开源了 Android 平台的热更新框架 VirtualAPK GitHub地址
也可以访问滴滴开源平台获取更多信息。
还可以关注微信公众号:DDApp,获取更多资讯。
DynamicCocoa 可以让现有的Objective-C代码转换生成中间代码(JS),下发后动态执行,相比其他动态化方案,优势在于:
(1) 使用原生技术栈:使用者完全不用接触到JS或任何中间代码,保持原生的Objective-C开发、调试方式不变;
(2) 无需重写已有代码:已有native模块能很方便的变成动态化插件;
(3) 语法支持完备性高:支持绝大多数日常开发中用到的语法,不用担心这不支持那不支持;
(4) 支持HotPatch:改完bug后直接从源码打出patch,一站式解决动态化和热修复需求。
2.动态插件开发流程:
首先App中需要集成DynamicCocoaEngineSDK,用来执行下发的bundle开发到发布的流程如下图所示:
DynamicCocoa_SDK.jpeg
3.HotPatch过程:
HotPatch本质上是方法粒度上的动态化,所以在整个框架搭建起来后,HotPatch也不难实现,使用DynamicCocoa做热修复的最大优势是开发者依然只对源码负责,修改完bug后,打个patch包,修复成功后把源码改动直接push到代码仓库就行了。
假设我们发现了下面的bug:
DynamicCocoa_HotPatch1.png然后在Native进行修复并自测:
DynamicCocoa_HotPatch2.jpeg自测完成后,在这个方法后面添加一个神奇的Annotation:
DynamicCocoa_HotPatch3.jpeg使用命令行工具在patch模式下进行打包,就能把所有标记了的method提取出来,分别转换成JS表示,打到一起进行发布。
最后,开发者可以安心的把修改后的代码(甚至可以保留Annotation)gitpush,完成热修复工作。
4.参考
滴滴 iOS 动态化方案 DynamicCocoa 的诞生与起航
七.JDReact(京东)
JDReact 是京东基于 React Native 的二次定制开发,目前并未开源。
这个框架推出有一年多的时间,京东APP当中已经有20多个业务正在使用这套框架,其中也有一些比较重要和常用的业务。
1.React Native 的局限
JDReact_RN.jpg2.京东解决方案:JDReact三端融合平台
JDReact_JDReact.jpg京东的解决方案是基于RN框架进行了深度定制和二次开发,逐步打造了符合京东业务的JDReact三端融合平台,主要的工作是以下四大方面:
第一,把RN的核心Base库拿来做裁剪和二次开发,把不需要的功能删减掉,把性能、兼容性、稳定性的问题修复,包括也支持了拆分打包。
第二,在后端搭建了一个功能支撑平台,帮RN框架增加了灰度更新升级、数据监控以及降级容灾功能,这些对业务来说是非常重要的。
第三,基于整个RN框架,结合京东的一些业务特点,封装了一套自己的业务组件,包括UI公共组件库。目的是为了让垂直业务开发者可以很快地使用框架进行业务开发,完全不用关心设计的样式跟交互,可以快速接入业务。
第四,打通Web端,实现了一套RN框架向ReactJS转换的工具。可以做到一次代码编写,直接部署到Android、iOS跟Web三端。
3.京东做的最重要的一点:三端融合
京东克服了RN不支持Web端的问题。我们做了一套Web转换的工具,打通了三端,减少了开发的工作量。
JDReact_JDReact2.jpg
参考:京东618:ReactNative框架在京东无线端的实践
八.React Native(Facebook)
极客学院:React Native 官方文档中文版 GitHub 地址
1. 什么是 React Native
要想了解 React Native,还得从 React 说起。
React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
具备以下特性:
不是一个 MVC 框架
不使用模板
响应式更新非常简单,单向响应的数据流
虚拟 DOM
HTML5 仅仅是个开始
其它的不多说,感兴趣可以去查,从 HTML5 仅仅是个开始
这一特性说明了它无限的可能。那么,React Native 就可以理解,它是从 React 扩展而来。
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码(Learn once, write anywhere)。
Facebook 已经在多项产品中使用了 React Native,并且将持续地投入建设 React Native。
2. React Native 入门
(1) 原生的 iOS 组件
有了 ReactNative,你可使用标准平台组件,比如 iOS 平台上的 UITabBar 和 UINavigationController。这可以让你的应用程序拥有和原生平台一致的外观和体验,并保持较高的品质。使用相应的 React 组件,如 iOS 标签栏和 iOS 导航器,这些组件可以轻松并入你的应用程序中。
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);
},
});
(2) 异步执行
JavaScript 应用代码和原生平台之间所有的操作都是异步执行,并且原生模块也可以使用额外线程。
这意味着我们可以解码主线程图像,并将其在后台保存至磁盘,在不阻塞 UI 的情况下进行文本和布局的估量计算,等等。
因此,React Native 应用程序的流畅度和响应性都非常好。通信也是完全可序列化的,当运行完整的应用程序时,这允许我们使用 Chrome Developer Tools 来调试 JavaScript,或者在模拟器中,或者在真机上。
(3) 触摸处理
iOS 有一个非常强大的系统称为 Responder Chain,可以用来响应复杂视图层级中的事件,但是在 Web 中并没有类似功能的工具。React Native 可实现类似的响应系统并提供高水平的组件,比如 TouchableHighlight,无需额外配置即可与滚动视图和其他元素适度整合。
var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;
var TouchDemo = React.createClass({
render: function() {
return (
<ScrollView>
<TouchableHighlight onPress={() => console.log('pressed')}>
<Text>Proper Touch Handling</Text>
</TouchableHighlight>
</ScrollView>
);
},
});
(4) 弹性框和样式
布局视图应该是简单的,所以 Facebook 将 Web 平台上的弹性框模块引入了 React Native。弹性框可用来搭建最常用的 UI 布局,比如代用边缘和填充的堆叠和嵌入。
React Native 还支持常见的 Web 样式,比如 fontWeight 和 StyleSheet 抽象,它们提供了一种优化机制来宣称你所有的样式和布局在组件中的应用是正确的,且组件把它们应用到了内网中。
var React = require('react-native');
var { Text } = React;
var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
render: function() {
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});
(5) 可扩展性
使用 React Native 无需编写一行原生代码即可创建出一款不错的应用程序,并且 React Native 可通过自定义原生视图和模块来进行扩展--也就是说你可以重用你已经构建的任何内容,并且可导入和使用你最喜欢的原生库。
为了在 iOS 中创建一个简单的模块,需要创建一个新的类来实现 RCTBridgeModule 协议,并将你想要在 RCT_EXPORT_METHOD 中对 JavaScript 可用的功能包装起来。另外,类本身必须可以用 RCT_EXPORT_MODULE() 显式导出;
// Objective-C
#import "RCTBridgeModule.h"
@interface MyCustomModule : NSObject <RCTBridgeModule>
@end
@implementation MyCustomModule
RCT_EXPORT_MODULE();
// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript
var React = require('react-native');
var { NativeModules, Text } = React;
var Message = React.createClass({
render: function() {
getInitialState() {
return { text: 'Goodbye World.' };
},
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
return (
<Text>{this.state.text}</Text>
);
},
});
自定义的 iOS 视图可以通过子类化 RCTViewManager,实现 -(UIView *)view 方法并用 RCT_EXPORT_VIEW_PROPERTY 宏导出属性的办法来公开。然后一个简单的 JavaScript 文件会连接这些点。
// Objective-C
#import "RCTViewManager.h"
@interface MyCustomViewManager : RCTViewManager
@end
@implementation MyCustomViewManager
- (UIView *)view
{
return [[MyCustomView alloc] init];
}
RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);
@end
// JavaScript
module.exports = createReactIOSNativeComponentClass({
validAttributes: { myCustomProperty: true },
uiViewClassName: 'MyCustomView',
});
3.关于热更新
React Native 官方并没有提供热更新的技术方案,但是它是支持热更新的。
React Native 中的热更新有点像 App 的版本更新,也就是根据查询 server 端的版本和手机端目前 App 的版本进行对比,然后来执行是否更新的操作。
根本原因在于 React Native 的加载启动机制:React Native 会将一系列资源打包成js bundle文件,系统加载js bundle文件,解析并渲染。所以,React Native热更新的根本原理就是更换js bundle文件,并重新加载,新的内容就完美的展示出来了。
更新流程图:
ReactNative.png
九. CodePush(微软)
在动态更新方面 React Native 只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善。
CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
(第四篇 Hybrid 中讲到了PhoneGap,而 Cordova 是贡献给 Apache 后的开源项目,是从 PhoneGap 中抽出的核心代码,是驱动 PhoneGap 的核心引擎。)
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库,开发者可以推送更新 (JS, HTML, CSS and images),应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性,也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。
CodePush 可以进行实时的推送代码更新:
直接对用户部署代码更新
管理 Alpha,Beta 和生产环境应用
支持 React Native 和 Cordova
支持 JavaScript 文件与图片资源的更新
CodePush开源了react-native版本,react-native-code-push 托管在GitHub上。
参考:React Native热更新部署/热更新-CodePush最新集成总结
十. NativeScript
1.介绍
NativeScript 是一家名叫 Telerik 的名不见经传保加利亚公司开发的项目。虽然 Telerik 并不是很出名,但是却已经在 hybrid app 和跨平台开发这条路上走了很久。
2.原理
NativeScript 的思路就是使用移动平台的 JavaScript 引擎来进行跨平台开发。逻辑部分自然无需多说,关键在于如何使用平台特性,JavaScript 要怎样才能调用 native 的东西呢。NativeScript 给出的答案是通过反射得到所有平台 API,预编译它们,然后将这些 API 注入到 JavaScript 运行环境,接下来在 Javascript 调用后拦截这个调用,并运行 native 代码。
3.对比 React Native
跟 React Native 一样,NativeScript 原生并不支持热更新方案,但是提供了实现热更新的土壤。
4.更多
想学习 NativeScript 可以看看 Telerik 的员工的写的这篇博客 以及发布时的 Keynote
参考:王巍onevcat博客
十一. Weex(阿里巴巴)
Weex 地址 https://github.com/apache/incubator-weex/
原 Weex 地址 https://github.com/alibaba/weex
1.背景介绍
2016 年 12 月 15 日,阿里巴巴宣布将移动开源项目 Weex 捐赠给 Apache 基金会开始孵化,Weex 有望成为中国移动领域的首个 Apache 顶级项目,这意味着中国移动技术开始反哺世界。据悉,这也是继 JStorm、RocketMQ 之后,阿里向 Apache 捐赠的第三个项目。
2.什么是 Weex ?
Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。
Weex 致力于使开发者能基于当代先进的 Web 开发技术,使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲,在集成了 WeexSDK 之后,你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。
Weex 的结构是解耦的,渲染引擎与语法层是分开的,也不依赖任何特定的前端框架,目前主要支持 Vue.js 和 Rax 这两个前端框架。
Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发的技术,使生产力和性能共存。在开发 Weex 页面就像开发普通网页一样;在渲染 Weex 页面时和渲染原生页面一样。
3.尝试 Weex
如果你只是想尝试 Weex,你并不需要安装任何东西。 Weex有一个在线编写代码的平台,你可以在上面写单个页面的例子,而不需要任何配置。在平台上源代码应该用 Vue.js 的单文件组件 语法来编写,在 Web 平台的渲染结果将显示在一个模拟的手机壳中。
4.一次编写,处处运行
Weex 可以只开写一份代码,开发出三端都可用的页面。
在多个端中使用相同的源代码可以显着提高开发效率,并简化测试,构建和发布流程。在此基础上,Weex 可以将前端的打包、测试流程与手机端监控、发布系统结合起来,提高开发效率。
尽管 Weex 多端都是用的同一份代码,但是仍然支持针对特定的平台开发功能。Weex 提供了 weex.config.env 和 WXEnvironment(它们是相同的)来获得当前的运行时环境。你可以用 WXEnvironment.platform 来确定代码运行在哪个平台上。除了平台以外,WXEnvironment 还包含其他环境信息,如 osVersion 和 deviceModel,参考 [Weex variable](../references/weex-variable.html 了解更多详细信息。
5.支持多个前端框架
前端框架对 Weex 而言只是一个语法层,它们和原生渲染器是解耦的。Weex 并没有强绑定与某个特定的前端框架,而是可以把渲染原生 UI 的能力赋予某些前端框架。
目前 Weex 将 Vue.js 和 Rax 作为其内置的前端框架。你可以阅读 前端框架 这篇文档了解更多信息。
然而 Weex 也不是只支持 Vue 和 Rax,你也可以把自己喜欢的前端框架集成到 Weex 中。
6.整体架构
Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。
开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面,然后编译成一段 JavaScript 代码,形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去,然后通过网络请求或预下发的方式传递到用户的移动应用客户端;在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎,并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践;同时,如果用户没有安装移动应用,他仍然可以在浏览器里打开一个相同的 web 页面,这个页面是使用相同的页面源代码,通过浏览器里的 JavaScript 引擎运行起来的。
Weex_architecture.png7.与 Web 平台的差异
(1) Weex 环境中没有 DOM:
DOM(Document Object Model),即文档对象模型,是 HTML 和 XML 文档的编程接口,是 Web 中的概念。Weex 的运行环境以原生应用为主,在 Android 和 iOS 环境中渲染出来的是原生的组件,不是 DOM Element。
(2) Weex 环境中没有 BOM:
BOM(Browser Object Model),即浏览器对象模型,是浏览器环境为 javascript 提供的接口。Weex 在原生端没有并不基于浏览器运行,不支持浏览器提供的 BOM 接口。
(3) 能够调用移动设备原生 API:
在 Weex 中能够调用移动设备原生 API,使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的,如 clipboard 、 navigator 、storage 等。
8.与 React Native 的对比
(1) JS引擎:
weex使用V8, ReactNative使用JSCore
(2) JS开发框架:
weex基于vue.js(2W+ star)。小巧轻量的前端开发框架,组件化,数据绑定,2.0引入virtual dom。
ReactNative使用React(4W+ star)。革命性的前端开发框架,组件化,数据绑定,virtual dom。
(3) Android版本要求:
ReactNative使用了Choreographer,因此必须在API16以上才可以使用。
weex使用handler来代替Choreographer,可以在API14以上使用。
weex 出来的初衷也是为了解决 ReactNative 使用过程中遇到的一些问题
9.选择使用 Weex 还是 ReactNative
(1) 学习成本
<1> 环境配置:
ReactNative需要按照文档安装配置很多依赖的工具,相对比较麻烦。 weex安装cli之后就可以使用
<2> vue vs react
react模板JSX学习使用有一定的成本 vue更接近常用的web开发方式,模板就是普通的html,数据绑定使用mustache风格,样式直接使用css
<3> 布局
两者实现了flexbox的相同子集(都使用了FaceBook的代码解析),基本没有区别
(2) 易用性
<1>sdk使用
ReactNative需要解决mvn依赖的问题,因此必须自己修改源码,打包发布
weex可以直接在mvn项目中使用
<2>调试
都可以在chrome中调试JS代码
weex支持在chrome中预览页面dom节点,ReactNative不支持
<3>页面开发
weex提供了一个playground,可以方便的预览正在开发的页面
ReactNative开发一个页面,需要建立一个native工程,然后编译运行
<4>即时预览
weex和ReactNative都有提供hot reload功能,可以边更改代码,边在手机上看到效果
<5>打包
ReactNative官方只能将ReactNative基础js库和业务js一起打成一个js bundle,没有提供分包的功能,需要制作分包打包工具
weex默认打的js bundle只包含业务js代码,体积小很多,基础js库包含在weex sdk中
<6>部署
斑马目前同时支持weex和ReactNative页面,但是中心已经转向weex
另外斑马提供了可以拖拽搭建weex活动页面的功能
<7>扩展性
组件的扩展上,weex和ReactNative具有一样的能力
三方库的接入上,weex对网络,图片,统计等常见的用户可能想自己定制的功能,提供了相应的适配接口,可以由用户方便的定制,ReactNative需要自己修改源码
<8>集团库接入
weex有默认的mtop接入实现,UT接入实现
windvane也提供了对weex页面的支持,可以复用app中的web容器
<9>跨平台
ReactNative支持Android iOS两个平台,需要自己扩展去支持web,windows和node-webkit的支持正在开发中
weex可以支持Android iOS web三个平台
<10>Moudle方法调用线程
weex 可以通过注解标注是否在UI线程执行
ReactNative在native_modules线程执行
<11>异步
weex只支持callback
ReactNative提供了Promise的支持
(3) 性能
<1>分包加载
ReactNative需要自己实现,从而优化JS加载执行时间
weex默认提供分包实现
<2>官方支持
ReactNative官方关注的重心目前并不在性能上
weex持续关注性能优化
<3>大块view渲染
ReactNative默认没有优化机制,长view渲染性能会比较差
weex提供了node和tree两种渲染模式,优化长view的渲染
<4>ListView Android
ReactNative目前采用scrollView使用,有一些性能问题
weex使用recyclerview实现,性能稍好
(4) 社区
ReactNative 5w+ star,issue,pull request, contributor多,社区活跃,围绕react产生了许多开发框架
weex开源较晚,目前只有7k+ star,contributor以阿里人为主,较少,issue和pull request也比较少,社区目前规模比较小
(5) 工具链
<1>debug tool
都有提供在chrome中调试的支持
<2>打包工具
ReactNative需要自己改造
weex默认提供的足够满足使用需求
<3>webpack,gulp,脚手架工程
weex有相应的插件,方便开发,部署使用
ReactNative有,但是很久未更新,需要自己维护
总的来说,weex的门槛相对比较低,更适合业务开发同学上手,我比较倾向于 Weex
10.Weex 后记
来自 alibaba/weex :
欢迎大家在 SegmentFault 的 Weex 版块进行中文讨论 https://segmentfault.com/t/weex
同时也鼓励有条件和能力的同学在英文社区贡献自己的力量:
邮件列表 (英文):http://mail-archives.apache.org/mod_mbox/#weex.incubator
问答平台 (英文):http://stackoverflow.com/questions/tagged/weex
十二. Flutter (谷歌)
1.介绍
Flutter是Fuchsia的开发框架,是一套移动UI框架,可以快速在iOS、Android以及Fuchsia上构建高质量的原生用户界面。目前Flutter是完全免费、开源的,其官方编程语言为Dart,也是一门全新的语言。所以说,上手成本比较高,对于移动端开发人员,语言以及框架都是全新的,整个技术栈的积累也都得从头开始。
2.学习资源
Flutter官方地址 https://github.com/flutter/flutter
微信公众号:闲鱼技术,里边有大量flutter的介绍
十三.补充:Android APP 热修复方案
1. 百川Hotfix
不仅仅只基于AndFix,而是灵活切换热部署和冷部署的方案;实现了资源、SO文件、类修复的实时生效,同时采用了傻瓜式接入方案,完全不侵入打包过程,对用户提供了可视化的UI界面打补丁。(阿里)
2. 美团Robust
在整个打Patch过程中,该方案正常的使用DexClassLoader,兼容性高;未反射注入,能够实时生效。该方案的缺点在于:因为在每端函数前插入代码,需要侵入打包过程;原来能被ProGuard内联的函数不能被内联了,所以可能导致方法数的增加,可能会超过65536限制,同时也会导致APK体积增大;该方案不支持SO文件和资源文件的修复。
3. 手机QQ空间
该方案类似谷歌的Multidex ,在保障稳定性的前提下兼容性很高。缺点是:不支持实时生效;在Davilk下,类加载存在性能问题;Art下,补丁包涵有类、父类以及引用该类的所有类,因此补丁包较大;由于原DEX中的类需要引用额外的DEX类,需要侵入式打包。
4. 微信Tinker
该方案中通过自研DexDiff算法,深度利用Dex的格式来减少差异的大小,从而做到补丁包足够小。其缺点在于:不支持实时生效;由于补丁DEX需要和原DEX合并,需要占用额外内存和磁盘空间,并且很容易因为内存消耗等原因合并失败;与QQ空间补丁技术相同,同样需要侵入式打包。