混合开发到底怎么个混法?（混合式开发）

引言

最近几年混合开发越来越火，从PhoneGap到Cordova到Ionic，再到ReactNative，到Flutter。同时在搜索引擎中诸如

Ionic VS ReactNative

RN和Weex+Vue哪个好

该学RN还是学Flutter

这样的问题也越来越多，那到底这些混合开发技术真正的差异是什么？今天我们从他们是怎么个混合法（技术原理）来说说。

一、混合开发流派

H5加壳派: 以Ionic和Uni-App为代表，基于WebView（Android下是WebView，iOS下是WKWebView）控件加载H5页面，同时通过框架预先实现的一些能力，实现对设备摄像头、文件系统等设备能力的调用。

JS Run原生派：以RN和Weex为代表，使用JS进行编写，在运行时映射成原生控件运行。

自成一派：以Flutter为代表，这货直接自己弄了个引擎和运行时，自带体系（UI组件和渲染器），除了设备能力外UI方面全权Handle。

二、H5加壳

这类混合开发是最早出现的，早在2011年7月PhoneGap就发布了1.0版本，初步实现了一套代码两个平台的目的。

这类App实际上就是H5加了个壳，典型的代表有Ionic和Uni-app开发者通过使用Angular或者Vue等Web前端方式编写后运行在WebView中，由于WebView的许多限制，当这类App需要使用原生能力时就需要通过JsBridge来进行桥接，这个JsBridge就是框架提供的API和插件。

其运行机制简单示意图如下：

Web App运行机制示意

这类App通常性能较差，通常用于那些UI和业务都相对简单，并且对性能没有特别要求的App。虽然它性能较差但是确实快，只要你会前端你就能开发，所以在很多外包公司都有其一席之地，尤其是在2012年-2016年。

需要吐槽的是Ionic，升级是好事，咱能把版本兼容好好做做不？

三、JS Run原生派

这个流派以React Native和Weex为代表，RN是开山祖师。这类App在现在的手机上能应对觉大多数的业务和UI需求，性能也够，称得上是很不错的方案。

这类App使用JS编写代码，在编译和运行时候会直接把对应的UI映射成原生UI，所以最终运行在设备上的还是原生的页面。这要求程序员对对应平台的原生开发有一定基础，尤其是需要自己写自定义控件的时候。

其整个机制较为复杂，不展开讲。

四、自成一派

Flutter自成一派，实现了一个自绘引擎，使用Flutter自己的布局和绘制系统。Flutter在框架设计上借鉴了非常多的RN的思想。某种程度上可以理解为RN的升级版。

Flutter目前已经发布了正式版，且版本更新很快，但是目前github上的Issues还是非常感人

Flutter架构图如下：

最后：其实可以看出，随着时间的推移混合开发的方案越来越多，同时性能也越来越好，这本就是这个行业的趋势。也是你薪水上升的依据。