Flutter 简介
Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。由于背靠google，技术上支撑是足够的，且已经支持 iOS、Android、Web、Windows、macOS、Linux、Fuchsia（Google新的自研操作系统）等众多平台，目前GitHub已经有134K的start，具体的地址：https://github.com/flutter/flutter
跨平台演进
一套代码，多端运行，PC时代的Java程序给了我们很好的启示，java之所以可以跨平台，依赖的是JVM，但是我们需要注意的是，跨平台的是Java程序，不是JVM。JVM是用C/C++开发的，是编译后的机器码，不能跨平台，不同平台下需要安装不同版本的JVM。来到移动时代后，跨平台又有哪些演进的过程呢？
Web 容器（H5 + 原生）时代
基于 Web 相关技术通过浏览器组件来实现界面及功能，典型的框架代表有：Cordova(PhoneGap) https://cordova.apache.org/、Ionic https://github.com/ionic-team/ionic-framework和微信小程序
这些框架的主要原理是将 App 中需要动态变动的内容通过HTML5（简称 H5）来实现，通过原生的网页加载控件WebView （Android）或 WKWebView（iOS）来加载。H5代码是运行在 WebView 中，而 WebView 实质上就是一个浏览器内核，其 JavaScript 依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。为此WebView 中 JavaScript 与原生 API 之间就需要一个通信的桥梁，主要负责 JavaScript 与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge , 简称 JsBridge，它也是混合开发框架的核心。
整体个框架图如下：
web容器时代架构图
采用了 Web 开发技术，社区和资源非常丰富，开发效率也很高。但，一个完整 HTML5 页面的展示要经历浏览器控件的加载、解析和渲染三大过程，性能消耗要比原生开发增加 N 个数量级。如果你的app本身没有复杂的交互或者复杂的动画，使用web容器的方案无可厚非，但是需要大量的跟原生系统交互或者有大量的动画渲染，那么该方案的缺点就显现出来了，那么还有更好的解决方案嘛？答案是有
泛 Web 容器时代（javaScript 开发 + 原生渲染）
泛 Web 容器时代的解决方案优化了 Web 容器时代的加载、解析和渲染这三大过程，把影响它们独立运行的 Web 标准进行了裁剪，以相对简单的方式支持了构建移动端页面必要的 Web 标准，也保证了便捷的前端开发体验；同时，这个时代的解决方案基本上完全放弃了浏览器控件渲染，而是采用原生自带的 UI 组件实现代替了核心的渲染引擎，仅保持必要的基本控件渲染能力，从而使得渲染过程更加简化，也保证了良好的渲染性能。
在这个时代不得不提到大行其道的RN了，React Native （简称 RN ）是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架，是 Facebook 早先开源的 Web 框架 React 在原生移动应用平台的衍生产物，目前支持 iOS 和 Android 两个平台。RN 使用JSX 语言（扩展后的 JavaScript，主要是可以在 JavaScript 中写 HTML标签）和 CSS 来开发移动应用。
整体的架构图如下：
泛 Web 容器时代架构
泛 Web 容器时代主要优点如下：
1，采用 Web 开发技术栈，社区庞大、上手快、开发成本相对较低。
2，原生渲染，性能相比 H5 提高很多。
3，动态化较好，支持热更新。
不足：
1，渲染时需要 JavaScript 和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿。
2，JavaScript 为脚本语言，执行时需要解释执行 （这种执行方式通常称为 JIT，即 Just In Time，指在执行时实时生成机器码），执行效率和编译类语言（编译类语言的执行方式为 AOT ，即 Ahead Of Time，指在代码执行前已经将源码进行了预处理，这种预处理通常情况下是将源码编译为机器码或某种中间码）仍有差距。
3，由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后；除此之外，其控件系统也会受到原生UI系统限制，例如，在 Android 中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题将会变得非常棘手。这就会导致，如果需要自定义原生渲染组件时，开发和维护成本过高。
前面的两个框架都依赖原生进行绘制，那么有没有不依赖原生进行UI绘制的呢？答案是有
自绘引擎时代（自绘UI + 原生）
说起自绘引擎时代，我们应该绕不开QT，这个当初诺基亚用来抵挡android和ios的武器。
Qt 是一个1991年由 Qt Company 开发的跨平台 C++ 图形用户界面应用程序开发框架。2008年，Qt Company 科技被诺基亚公司收购，Qt 也因此成为诺基亚旗下的编程语言工具。2012年，Qt 被 Digia 收购。2014年4月，跨平台集成开发环境 Qt Creator 3.1.0 正式发布，实现了对于 iOS 的完全支持，新增 WinRT、Beautifier 等插件，废弃了无 Python 接口的 GDB 调试支持，集成了基于 Clang 的 C/C++ 代码模块，并对 Android 支持做出了调整，至此实现了全面支持 iOS、Android、WP，它提供给应用程序开发者构建图形用户界面所需的所有功能。
虽然Qt在PC端大行其道，但是扩展到移动端，就显得乏力了，主要有如下几点原因：
第一：Qt 移动开发社区太小，学习资料不足，生态不好。
第二：官方推广不利，支持不够。
第三：移动端发力较晚，市场已被其它动态化框架占领（ Hybrid 和 RN )。
第四：在移动开发中，C++ 开发和Web开发栈相比有着先天的劣势，直接结果就是 Qt 开发效率太低。
虽然Qt在移动端没有成功，但是它的理念被Flutter继承了，并使用更高级的语言来实现。
到了这里，你可能会问，自绘UI是个什么鬼？Flutter是如何实现统一的UI布局的？
Flutter 底层使用 Skia 作为其 2D 渲染引擎，Skia 是 Google的一个 2D 图形处理函数库，包含字型、坐标转换，以及点阵图，它们都有高效能且简洁的表现。Skia 是跨平台的，并提供了非常友好的 API，目前 Google Chrome浏览器和 Android 均采用 Skia 作为其 2D 绘图引擎。Skia 引擎会将使用 Dart 构建的抽象的视图结构数据加工成 GPU 数据，交由 OpenGL 最终提供给 GPU 渲染，至此完成渲染闭环，因此可以在最大程度上保证一款应用在不同平台、不同设备上的体验一致性。
当然除了UI外，其他的系统能力还需要针对不同的系统进行插件化处理，当然了Flutter会给你配置好的。
整个框架的架构如下：
自绘引擎时代架构
自此，跨平台方案的三个时代的演进已经讲解完全，具体的优缺点对照如下：
各个跨平台方案对比
我们在进行技术选型时，应该根据自身的项目复杂度、项目维护成本、社区活跃度、技术储备来进行对比选择。
综合比较，目前来说RN的活跃度是最高的，但是就技术前景来说，Flutter应该是后续发展的方向，我们应该本着学习新知识，新技术的目的去探索和玩转Flutter，毕竟学习是无止境的。
网友评论