最近一段时间 Flutter 的技术热度很是高，常常在逛 Github 的时候瞄到，出现的多了，也就引发了个人兴趣；而后来看看这是个什么玩意。前端
稍微搜一下大概能知道：web
Flutter 是 Google 一个新的用于构建跨平台的手机 App 的 SDK，同时也将是 Google Fuchsia 下开发应用的主要工具。编程
它在 2017 年发布初始版本，很明显是一个为了解决不一样平台 App 重复开发的问题，这也不是什么新技术，相似的还有 React Native、Weex。canvas
简单说就是达到 “write once, run everywhere” 的目的，怎么这么耳熟呢。。。小程序
深刻了解能够看一下这篇：为何说 Flutter 是革命性的后端
Dart
Flutter 使用 Dart 语言开发，Dart 能够被编译（AOT）成不一样平台的本地代码，让 Flutter 能够直接和平台通信而不须要一个中间的桥接过程，从而提升了性能。微信小程序
这里，有必要提一下 React Native，也是一种流行的跨平台构建方案，是 Facebook 在 2015 年左右搞出来的，要比 Google 早的多。浏览器
Facebook 最明智的一点就是让 RN 采用 JS 做为开发语言。由于 JS 拥有很是好的群众基础和较低的学习门槛，因此 RN 不只能够吸引大量的前端开发者加入，并且能够和 React 社区造成正向互补，进一步巩固 Facebook 在前端领域的统治力。基本上全部合格的前端开发者均可以低成本的学习并使用 RN 进行跨端开发。微信
Google 让 Flutter 采用 Dart 进行开发，多是基于对将来的判断，但愿 Dart 能够逐步取代 JS 成为前端的开发标准。实际上 Dart 的语法更接近原生开发语言，用 Java 或者 Swift 的开发者会更加喜欢。架构
RN 采用了桥接系统服务，顺带将系统 UI 也桥接到了 JaveScript 中，可经过原生 UI 系统进行渲染，效率方面确定比 Flutter 差一点，可是成熟度与方便程度与新发展的 Flutter 根本不是一个量级，不事后续怎样咱们继续看吧。
跨平台方案的发展
WebView
第一个跨平台的框架基于 JavaScript 和 WebView，例如 PhoneGap, Apache Cordova, Ionic 等，在苹果发布 iOS 以前，他们鼓励第三方开发者为 iPhone 构建网页应用程序，所以使用 Web 技术构建跨平台应用程序是瓜熟蒂落的一步。
我感受这跟咱们以前说的用 HTML5 响应式布局写差很少，既能够简单打包成 App，又可让手机直接在浏览器中访问，不过像 JavaScript 这样的语言很难直接与本地代码（例如服务）进行通讯，所以他们会经过一个在 JavaScript 代码和原生代码的“桥梁”进行上下文切换，由于平台服务一般不会常常被调用，因此这并不会致使太大的性能问题。
React Native
响应式视图火起来后，他们经过使用从响应式编程中借用的编程模式来简化 Web 视图的建立过程。2015 年， React Native 将响应式视图的许多优点带给了移动应用程序。
由于 JavaScript 时常会访问原生 UI 组件，因此它也必须通过这些“桥接器”，界面上的 UI 控件一般被频繁地访问（在动画、转化或者用户用手指“滑动”屏幕上的某些东西时，每秒被访问高达 60 次），所以这极可能会致使性能问题。
这是理解 React Native 性能的其中一个关键，JS 代码和原生代码自己都是很快的，瓶颈常常发生在当咱们视图从一边转向另外一边时。 将来构建高质量的应用程序时，咱们必须将使用桥接的次数控制到最小。
桥接器是 RN 的核心，相比 WebView 它不光桥接了系统服务，还把 UI 顺便也桥接了过去，这样写出来的 UI 最终也会被渲染为原生控件，这也让它在混合开发的时候变得容易。
对于 JS 开发者来讲， 画 UI 只须要画到 Virtual DOM 中，不须要特别关心具体的平台, 仍是原来的单线程开发，仍是原来 HTML 组装 UI（JSX），仍是原来的样式模型（部分兼容 )。
不过 UI 的渲染是比较频繁的，想要不卡顿还必需要 60FPS+，这对性能是个不小的挑战。
由于 RN 是采用 JS 开发，还须要一个 JS 的环境，不过这个不用太操心，想多了解下 RN，能够看一下：React Native运行原理解析
Flutter
和 React Native 同样，Flutter 也提供响应式的视图，Flutter 采用不一样的方法避免由 JavaScript 桥接器引发的性能问题，即用名为 Dart 的程序语言来编译。
Dart 是用预编译的方式编译多个平台的原生代码，这容许 Flutter 直接与平台通讯，而不须要经过执行上下文切换的 JavaScript 桥接器。编译为原生代码也能够加快应用程序的启动时间。
实际上，Flutter 是惟一提供响应式视图而不须要 JavaScript 桥接器的移动 SDK，这就足以让 Fluttter 变得有趣而值得一试，但 Flutter 还有一些革命性的东西，例如它是如何实现 UI 组件的。
组件(Widgets)
这应该是最重要的一块东西，咱们能够轻松的用 Web 技术模拟出原生的界面或者符合预期的界面与动画，可是让他们拥有原生组件的特性与流畅度或者事件绑定是比较难的，比较这些模拟的组件最终仍是外来物，再说性能方面也是一个问题。
Flutter 的系统架构包含大量赏心悦目、快速、可定制、可扩展的 Widgets。没错，Flutter 不须要使用系统 UI 组件（或 DOM WebViews），它自带了 Widgets。
Flutter 将 UI 组件和渲染器从平台移动到应用程序中，这使得它们能够自定义和可扩展。Flutter 惟一要求系统提供的是 canvas，以便定制的 UI 组件能够出如今设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。
Dart 程序和执行数据编码与解码的原平生台代码之间仍然有一个接口（参考上图中的蓝绿色部分），但这能比 JavaScript 桥接器快几个数量级。
Flutter 最大的改进之一就是它的布局，它大大简化了布局的“规则”，例如咱们都用过的 CSS3 定义了 375 个属性，规则能够相互影响甚至发生冲突，要处理他们之间的关系很是复杂，然而咱们经常使用的一些规则占比很是小，因此 Flutter 改变了传统的布局方式。
体验过 Flutter 的基本都能感受到界面是很是顺滑的。
虚拟DOM
现有的响应式 web 视图库都引入了虚拟 DOM，DOM 表明 HTML 的文档对象模型，虚拟 DOM 则表明 JS 利用 DOM API 抽象出来的版本。
在响应式 Web 视图（由 ReactJS 和其余系统实现）中，虚拟 DOM 是不可变的，每次更改，全部的东西都得重建。系统将虚拟 DOM 与真正的 DOM 进行比较，生成一组最小的更改，而后执行这些更改，以更新真正的 DOM。最后，平台从新绘制真实的 DOM 到画布中。
这听起来增长了不少额外的工做，但它是值得的，由于操纵 HTML DOM 是很是耗费系统资源的。
React Native 也作相似的工做，可是是在移动应用程序当中进行的。它会操控移动平台上的原生组件而不是 DOM。它构建一个 UI 组件的虚拟树，与原生组件进行比较，并只更新已更改的部件。
结语
其实不管 RN 仍是 Flutter 都有至关大的野心实现全平台制霸。除了 Android、iOS 平台以外，RN 已经能够经过第三方工具支持 Windows UMP、Web、Desktop、macOS，甚至近期京东开源的 Alita 项目已经实现 RN 到微信小程序的打通。
RN 当下仍是最成熟的一个解决方案，毕竟已经发展的多年，资料也比较多，即便这样官方 Github 也有很多的 issue 未处理，更不要说新兴的 Flutter，不过从长远看，Flutter 也必将是一场革命吧。
最后我想说，JS NB！，加上 Node、Vue、React、Element 的加持，还有什么不能写，前端、后端、桌面 GUI、App 通吃，不知道明天又会被玩出什么花样来。