Hybrid-Native+H5,主流框架深度分析
导语:
近年来,随着移动端app的广泛使用,对于降低app的开发成本,热更新等诉求日益增多。更多的APP采用了Native结合H5的混合开发模式,因此也衍生了大量的Hybrid框架。这其中有对载入H5做通信和性能优化的框架,如Phonegap等,也有使用JS脚本生成本地代码的框架,如Facdbook推出的react native这一类的框架。
React Native
正如项目的名称表露的那样,React Native的目的是构建真正Native的应用。不同于传统Hybrid框架,React Native完全脱离WebView进行开发,因为它挣脱了复杂的DOM,高效率渲染、流畅交互使用户体验得到非常多的提升。
它能使用够使用同样的语言同时支持iOS、Android平台,减少了我们在跨平台开发时对Native语言的不熟悉而产生的障碍。
使用React Native需要了解HTML、CSS、JavaScript与同为Facebook开源的React框架等相关知识且不易掌握;能看出React Native对于新手来说不太友善,不过React Native背后有着强大的Facebook技术团队的支持以及其知名度,吸引了相当多的开发人员了解并使用它,使我们在成长的路上不会那么的孤单、无力。
优点
- 相对于基于Web开发的hybrid框架,渲染效率、交互流畅度有明显提高
- 使用相同的语言开发便能同时开发iOS、Android
缺点
- 需了解的知识面较广、学习成本较高
- 虽然使用可以使用相同的语言开发两种平台,但是依然需要了解原生平台的相关特性
- 无法实现列表视图的重用机制,使在列表视图拥有巨大数量时,导致内存攀升
Weex
最近较火的移动端框架 除了Reactnative,还有Weex,Weex官方的口号是Write once, run everywhere, Weex解决了的最大痛点就是使用者只要编写一次代码,就可以跨平台运行。它能帮助开发者解决跨平台的适配问题,同时,又拥有着Native原生App的性能问题。Weex目前的大优势是借助阿里的大平台,快速的迭代更新,有大批的用户帮助其完善Hybrid框架,目前已较为成熟,文档丰富,接入方便快捷。
优点
轻量,分模块加载,Write Once Run Everywhere,
缺点
H5 标签支持较少
Cordova
Cordova是由phonegap演变而来,在接触的多家公司中,一开始大多数采用phonegap的解决方案,这种
前身为phonegap,历史比较久远,有很多公司在一开始接触Hybrid用的都是这种方式,早起,让不会Native的人,可以快速的用H5和js开发一个App,早起,iOS和Android都是使用的webview,现在,iOS和安卓,都有用jsCore, 大大提高了性能。
优点:
1.可以使用原生的js、html、css来构建一个应用
2.支持很多的插件来去调原生的API的,这种插件的库和它的生态是非常完善的,也就是说一个前端开发者不需要懂原生就可以做
相对来说比较稳定;
缺点:
1.性能瓶颈就是在于webview的性能,如果像Android 4.1以下的webview它的性能并不是很好,在Cordova打包出来的APP性能就会有问题。
这个框架是一个比较重的框架,做Hybrid开发的话,集成在原生的app里面,使得整个APP比较重;
Ionic
Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性的应用。它可以用框架中的CSS 实现有 native 风格的设计,不过相对于使用完整的 Ionic,更建议搭配 AngularJS 一起开发,从而创建完美的应用。
它有如下特点:
1 . 性能高,运行速度快,操作最少的DOM,非 jQuery且和硬件加速过渡;
2 . 设计简单,并且实用,它为当前移动设备呈现了完美的设计;
3 . 以原生SDK为蓝本,便于移动端开发人员的理解,完成时通过PhoneGap发布,达到一次开发,处处使用的效果;
4 . 核心架构是为开发专业应用创建,框架轻量级;
5 .一个命令就可以创建,构建,测试,部署你的应用程序在任何平台上,只需要npm install -g ionic 就可以创建您的应用。
6 . 代码标准,后台维护人员专注,具有强大的社区。
缺点
在了解Ionic的同时,还需要了解AngularJS,为开发增加了一定的复杂以及难度;
NativeScript
Native script是一个开源项目,用 JavaScript 语言编写 app ,它和Weex有点类似,只需要编写一次,然后它可以针对不同的操作系统(包括 Android,iOS 和 Windows Phone)产生对应的可执行代码,打包后,应用是按原生程序的方式运行的,并没有打开和运行浏览器,框架是将js脚本翻译成原生应用的api来执行的。
优点
1.一次编写,跨平台运行
2.英文文档丰富,中文文档较少
缺点
1.有一定的学习门槛
2.没有完善的技术支持