React Native star 72024 (learn once， run everywhere)
文档完善，上手体验快
社区活跃，坑基本都被踩过
需要了解 react-native reactJs redux iOS Android JSX
react-native可以实现从零开始开发一个跨平台的app
安装配置很多依赖的工具，相对比较麻烦
BSD + 专利许可证 （百度要求内部全面停止使用 React / React Native 国内大厂正在逐步替换， 创业公司无影响）
Airbnb在宣布放弃后，Facebook 正在重构 React Native
Weex star 11351 (write once， run everywhere)
简介：Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。
2016年6月开源。
在 weex 中，主要包括三大部分：JS Bridge、Render、Dom，分别对应WXBridgeManager、WXRenderManager、WXDomManager，三部分通过WXSDKManager统一管理。
JS Bridge 主要用来和 JS 端实现进行双向通信，比如把 JS 端的 dom 结构传递给 Dom 线程。Dom 主要是用于负责 dom 的解析、映射、添加等等的操作，最后通知UI线程更新。而 Render 负责在UI线程中对 dom 实现渲染。
weex 所有的标签也不是真实控件，JS 代码中所生成存的 dom，最后都是由 Native 端解析，再得到对应的Native控件渲染。
weex组件少
按照weex官方提供的文档在Mac下直接搭建开发环境很难一次点亮
文档不友好，很多细节没有介绍，直接下载官方案例可以跑起来
需要了解 weex vue iOS Android
weex构建一个新的跨平台应用，大面积使用了vue的语法，开发起来简单
weex主要面向的是web前端开发者
weex可以实现从零开始开发一个跨平台的app也可以集成到现有的app
踩坑：
1.路由挂载
不支持router-link 仅支持事件触发
创建router.js 在一个router.js文件中配置所有组件模块
2.属性支持 支持不完全
3.build
webpack两个配置weex-loader vue-router
在weexEntry配置所有的文件
15456336878354.jpg
Flutter star 46792
简介：Flutter是谷歌出品的移动应用SDK，2017年5月发布 第一个版本，它可以制作高质量的具有原生体验的跨Android和iOS平台的应用。也可以基于原有代码进行开发，世界各地广受欢迎，开源且免费。
Fuchsia：谷歌全新的操作系统，Flutter是Fuchsia操作系统构建UI的SDK
Skia：C++开发的2d图像绘制引擎，Flutter的底层2D图像引擎，不同于React Native，Weex之类通过建立JSBridge/JSCore来桥接iOS/Android的原生控件，而是做的比较彻底，直接基于全新的2d图像引擎Skia来绘制图像！
Dart：Flutter的开发语言，是一种强类型、跨平台的客户端开发语言， 2011年10启动，最新发布的Dart2.1
与Weex对比
1.JSBridge方案
JSBridge建立了JS和原生控件的双向通信，就是桥接作用。JS写一套代码，引擎底层自动根据平台（如iOS、Android）来桥接原生控件渲染。具体步骤概括下面两步：
- 布局消息传递：将虚拟DOM布局信息传递给原生；
- 原生根据布局信息通过对应的原生控件渲染控件树；
渲染工作交还给了系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架本身和App开发者绑在了系统的控件系统上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。
不支持热重载 不能直连真机调试 （可以下载playground查看效果）
支持热更新
更适合单页面/简单/少底层交互/热更新需求的页面的需求快速开发
- Flutter方案
Flutter基于独有的一套渲染图像引擎Skia，不需要桥接，不基于WebKit。跨平台方案解决地比较彻底。
摒弃JSBridge，Flutter是直接编译成本地代码，用Skia渲染展示，如同原生的渲染逻辑一样，无需桥接
实现120fps的渲染性能，运行效率极高
Hot Reload 热重载 直连真机重载调试 JSBridge需build打包
不支持热更新Hot Fix
iOS Android Web ReactNative
Flutter 部分的底层功能在 Android 系统上已经有实现，因此 Android 上适配要好（Android包要比iOS小很多）
从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染依靠跨平台的Skia实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。
更适合开发整体App
Dart
优势
- 健全的类型系统，同时支持静态类型检查和运行时类型检查。
- 代码体积优化（Tree Shaking），编译时只保留运行时需要调用的代码（不允许反射这样的隐式引用），所以庞大的Widgets库不会造成发布体积过大。
- 丰富的底层库，Dart自身提供了非常多的库。
- 多生代无锁垃圾回收器，专门为UI框架中常见的大量Widgets对象创建和销毁优化。
- 跨平台，iOS和Android共用一套代码。
- JIT & AOT运行模式，支持开发时的快速迭代和正式发布后最大程度发挥硬件性能。
基本概念
- 所有变量的值都是对象，也就是类的实例。甚至数字、函数和null也都是对象，都继承自 Object 类。
- 虽然Dart是强类型语言，但是显式变量类型声明是可选的，Dart支持类型推断。如果不想使用类型推断，可以用 dynamic 类型。
- Dart支持泛型，List表示包含int类型的列表，List则表示包含任意类型的列表。
- Dart支持顶层（top-level）函数和类成员函数，也支持嵌套函数和本地函数。
- Dart支持顶层变量和类成员变量。
- Dart没有public、protected和private这些关键字，使用下划线“_”开头的变量或者函数，表示只在库内可见。参考 库和可见性 。
代码实例：
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 告诉Flutter state已经改变, Flutter会调用build()，更新显示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 当 setState 被调用时，这个方法都会重新执行.
// Flutter 对此方法做了优化，使重新执行变的很快
// 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}