大前端

Cordova

Ionic

微信小程序

H5+原生

React Native

Weex

快应用

JavaScript开发+原生渲染

Flutter

自绘UI+原生

PWA

增强版Web App

将APP的一部分需要动态变动的内容通过H5来实现

依赖Webview(浏览器内核)

JavaScript与原生API之间通信的桥梁

负责JavaScript与原生之间传递调用消息

必须遵守一个标准的协议，它规定了消息的格式与含义

依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具

混合开发框架的核心

WebView JavaScript Bridge

通过原生的网页加载控件WebView (Android)或WKWebView（ios）来加载

H5部分可以随时改变而不用发版，解决了动态化的需求

优点：动态内容是H5，使用web技术栈就可以开发，社区及资源丰富

缺点：性能不好，对于复杂用户界面或动画，webview不堪重任

优缺点

H5+原生(Hybrid)

布局消息传递； 将虚拟DOM布局信息传递给原生

原生根据布局信息通过对应的原生控件渲染控件树

RN中将虚拟DOM映射为原生控件的过程

将虚拟DOM映射为原生控件树

JavaScript解释器

为JavaScript提供运行环境

是JavaScript与原生应用之间通信的桥梁

渲染/排版引擎是集成到框架中，每个APP都需要打包一份，安装包体积较大

JavaScriptCore

React.js

与RN原理类似

Vue

阿里的Weex

美团的Picasso（未开源）

不支持Vue或React语法，采用原生JavaScript开发

渲染/排版引擎集成到ROM中，应用中无需打包，安装包体积小

代表

采用Web开发技术栈，社区庞大、上手快、开发成本相对较低

原生渲染，性能相比H5提高很多

动态化较好，支持热更新

优点

渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿

JavaScript为脚本语言，执行时需要JIT，执行效率和AOT代码有差距

由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后

在Android中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题将会变得非常棘手

其控件系统也会受到原生UI系统限制

缺点

Dart语言

Flutter提供了丰富的组件、接口

Flutter使用Skia作为其2D渲染引擎

Android系统已经内置了Skia

iOS系统并未内置Skia，构建iPA时，也必须将Skia一起打包

缺点：不支持动态下发代码和热更新

实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性

涉及其它系统能力调用，依然要涉及原生开发

性能高；由于自绘引擎是直接调用系统API来绘制UI，所以性能和原生控件接近

由于UI渲染不依赖原生控件，也就不需要根据不同平台的控件单独维护一套组件库，所以代码容易维护

由于组件库是同一套代码、同一个渲染引擎，所以在不同平台，组件显示外观可以做到高保真和高一致性

由于不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会非常灵活

灵活、组件库易维护、UI外观保真度和一致性高

为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）作为开发语言的框架那样动态下发代码

动态性不足

本质上是 Web App，看起来更像一个原生App

借助一些新技术也具备了 Native App 的一些特性，比如离线能力、本地缓存、和通知推送，兼具 Web App 和 Native App 的优

PWA完全使用前端技术栈，不过它需要手机和浏览器的支持，目前支持ServiceWorker和Google Play Service的Android手机，以及搭载11.3以上的iOS手机可以使用PWA

大前端