Hybrid-Native+H5，主流框架深度分析

导语：
近年来，随着移动端app的广泛使用，对于降低app的开发成本，热更新等诉求日益增多。更多的APP采用了Native结合H5的混合开发模式，因此也衍生了大量的Hybrid框架。这其中有对载入H5做通信和性能优化的框架，如Phonegap等，也有使用JS脚本生成本地代码的框架，如Facdbook推出的react native这一类的框架。

weex / react native / ionic 技术选型

React Native

中文网站
GitHub12818 提交 1608 贡献

ReactNative 快速入门笔记

正如项目的名称表露的那样，React Native的目的是构建真正Native的应用。不同于传统Hybrid框架，React Native完全脱离WebView进行开发，因为它挣脱了复杂的DOM，高效率渲染、流畅交互使用户体验得到非常多的提升。

它能使用够使用同样的语言同时支持iOS、Android平台，减少了我们在跨平台开发时对Native语言的不熟悉而产生的障碍。

使用React Native需要了解HTML、CSS、JavaScript与同为Facebook开源的React框架等相关知识且不易掌握；能看出React Native对于新手来说不太友善，不过React Native背后有着强大的Facebook技术团队的支持以及其知名度，吸引了相当多的开发人员了解并使用它，使我们在成长的路上不会那么的孤单、无力。

优点

1. 相对于基于Web开发的hybrid框架，渲染效率、交互流畅度有明显提高
2. 使用相同的语言开发便能同时开发iOS、Android

缺点

1. 需了解的知识面较广、学习成本较高
2. 虽然使用可以使用相同的语言开发两种平台，但是依然需要了解原生平台的相关特性
3. 无法实现列表视图的重用机制，使在列表视图拥有巨大数量时，导致内存攀升

Weex

iOS 开发者的 Weex 伪最佳实践指北
GitHub 10204 提交 140 贡献者
weex sdk 原理详解

如何用weexpack创建weex项目并构建app
网易严选 App 感受 Weex 开发
[WEEX系列 我的第一个WEEX DEMO]
(https://segmentfault.com/a/1190000012061141)
Weex从入门到超神
原有native工程集成weex sdk 教程和demo for iOS
Vue.js 目录结构
Vue 登陆组件开发
Vue官网

最近较火的移动端框架 除了Reactnative，还有Weex，Weex官方的口号是Write once, run everywhere, Weex解决了的最大痛点就是使用者只要编写一次代码，就可以跨平台运行。它能帮助开发者解决跨平台的适配问题，同时，又拥有着Native原生App的性能问题。Weex目前的大优势是借助阿里的大平台，快速的迭代更新，有大批的用户帮助其完善Hybrid框架，目前已较为成熟，文档丰富，接入方便快捷。

优点

轻量，分模块加载，Write Once Run Everywhere,

缺点

H5 标签支持较少

Cordova

中文网站
GitHub

使用Cordova开发iOS App -- 环境搭建
使用Cordova开发iOS App -- 开发iOS插件
使用Cordova开发iOS App -- 打包插件及JS脚本
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

中文网站
GitHub 6456提交 261贡献者

Mac下安装ionic和cordova,并生成iOS项目
Ionic2实战-iOS版打包
ionic热更新
cordova Ionic 和cordova的区别是什么
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.英文文档丰富，中文文档较少
3.社区成熟，活跃度高

缺点

1.有一定的学习门槛
2.没有完善的技术支持

综合分析

从跨平台，性能，发布方式，学习成本，热度进行综合评估

名称	性能	发布方式	学习成本	热度	框架
React Native	Native的渲染 效率高	发布方式	文档丰富 学习成本高 需要了解原生平台的相关特性	Facebook技术支持以及其知名度	重量级
Ionic	Native的渲染 性能高	通过PhoneGap发布	了解AngularJS	有强大的社区	轻量级
weex	Native的渲染 性能高	weexpack 打包	了解 VueJS	阿里技术支持	轻量级
Cordova	Webkit做渲染 性能低	发布方式	低	热度低	重量级

参考链接1:Hybrid-Native+H5，主流框架深度分析
参考链接2: 基于React Native的移动平台研发实践分享
参考链接3:移动跨平台解决方案