混合开发调研

混合开发有三种方式

1. js和html打包在app里，内容在webview里显示
2. js代码调用原生控件
3. 我们现在的开发方式，原生代码+webview，定义一些交互方式

第一种方式：ionic github 32.6k stars

PhoneGap是一个封装了js调用原生系统api的框架，比如相机，定位。
PhoneGap后来给apache维护了，改名叫Cordova

Ionic对Cordova（PhoneGap）再次封装,包含了打包，调试，一套UI（相当于Bootstrap）

语法：Ionic1基于Angular1 Ionic2基于Angular2

优点：

1. Web Android Ios可以用同一套代码
2. 可以热更新

缺点：

1. 本身还是基于webview，滑动，切换时还是有些卡顿
2. Angular1和Angular2不兼容，Angular2几乎重写了，现在最新版本是Angular4，Ionic2优化体验还不够好，使用Ionic1又会面临以后升级大量代码要重写，这是Angular本身的坑，Google自己都没多少项目使用Angular（Angular默认使用TypeScript，点赞， 但是基于模版，相比React有很多模版语法）
3. 打出来的包比较大

第二种方式：React Native github 56.9k stars

这两年很火的项目，语法基于React。有一套自己API，相当于这套API映射到原生的控件，所以最终调用的是原生控件，有接近原生控件的流畅度，
实现有两种方式

1. 整体是ReactNative开发，部分ReactNative没封装的功能，比如友盟分享，需要分别调用Android和Ios的原生代码。比如自定义控件，需要Android和Ios各自写控件，然后ReactNative封装。
2. 整体是原生App，由于RN可以热更新，一些经常要改的页面，比如活动页可以调用RN。缺点是引入RN会让App包变大很多，不建议使用

优点

1. 流畅度比webview好
2. React和Angular一样，实现了数据绑定，代码量少，js代码不需要编译，修改了代码，刷新下界面就更新了，开发比原生快，更可以复用大部分代码
3. 热更新
4. React语法舒服
5. 社区活跃度比Ionic更好

缺点

1. 上手难度大，需要学习React语法
2. 三端代码不可以用同一套。比如，前端用React 客户端用ReactNative，React里标签是<button>，ReactNative里标签是<Button>,虽然业务逻辑的语法可以一样，但是代码不能完全复用。
   而且Android和Ios的代码也不能用同一套，因为RN的原理是RN的API映射到Android和Ios的API，比如有的API已经封装了可以映射到Ios控件，但是Android这边的映射有缺失，那Android这边只能用另外的API，两端大概可以复用80%的代码
3. 流畅度还是不如原生，一方面js映射到原生控件有损失，一方面api没有覆盖所有原生控件，比如，Android这边在界面切换的时候不是调用原生控件，而是用js实现的动画，流畅度不好（可以改变界面切换动画来规避）
4. 对于自定义控件需要ios和Android各自写一套，然后用RN分别调用

第三种方式：VasSonic QQ今年开源的框架 github 6k stars

通常混合开发的时候需要下载H5，这个过程比较慢。Ionic是规避了这一点，把H5和Js打包到本地，但是要通过ajax请求数据。VasSonic的策略是加快H5下载。
VasSonic在内容请求方面用了三招：

1. 动态缓存
2. 增量更新
3. 并行加载

通过对HTML内容添加注释来定义了一个自定义的格式，对HTML文档进行分块。动态缓存：指在页面范围内，对分块后的同容进行更细化(全局、局部)的缓存。

增量更新：有缓存的情况下，只对分块后的局部内容进行增量更新。

并行加载：VasSonic使用终端应用层原生传输通道取代系统浏览器内核自身资源传输通道来请求页面主资源。就是通过VasSonic在ＷebView初始化过程中时，同步并行从服务器加载页面，而不是webview初始化后再去请求。

优点

1. 原生+H5的方式和现在改动不大
2. 加载页面快
3. 更新页面最简单

缺点

1. H5返回的内容有自定义格式，需要后台和客户端都加入这个框架，侵入性太高。
   而且我们有很多第三方贷款平台，他们的页面没做特殊处理，就体验不到更快的加载速度（这一点Ionic和RN也一样）
2. 还是基于webview，虽然加载快了，流畅度还是不如原生和RN

总结

1. 流畅度 RN>Ionic=VasSonic
2. 代码复用 Ionic=VasSonic>RN
3. 热更新 VasSonic>Ionic=RN (之前有appstore不准RN热更新的传言，不知道以后Ios会不会改变审核规则..)
4. 加载速度 RN=Ionic>VasSonic