篇外话

“Flutter是什么？”、“它出现的动机是什么？解决了哪些痛点？”、“相比React Native、Weex等跨平台技术，优势在哪里？”、“学不动了，555”...

相信大部分人看到Flutter的第一眼，满脑子都会充斥着类似的这些问题。没事别急，我会慢慢介绍给大家，让大家对Flutter有个全方位的认知和感受，全面了解后，上面的问题自然就会迎刃而解。
开始之前，（敲黑板）大家跟我读：f-l-u-t-t-e-r，['flʌtə]。为什么先纠正一下发音，因为我亲耳听到的不下于3个同事都读错了。当然，后面会接触到的Redux、Reducer等的读音也不要错...
下面，让我们一起愉快地切入正题，一起揭开Flutter的神秘面纱。

Flutter是什么？

Flutter到底是什么？先援引一下官方解释：

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

从官方解释可以看出，Flutter是谷歌出品的移动应用SDK，它可以制作高质量的具有原生体验的跨Android和iOS平台的应用。也可以基于原有代码进行开发，世界各地广受欢迎，开源且免费。
听上去，确实挺诱人。事实上，等到我们后面深入了解后，性能卓越、体验精美、跨平台、HotReload等等这些特点，无一不成为了Flutter成为跨平台方案的冉冉新星的强大优势。而且，有着谷歌强大的技术支持与背书，商业运作能力与号召力，Flutter成为主流只是时间问题。
当然，为了更深入了解Flutter，我们有必要先了解下Fuchsia、Skia、Dart这些名词。
依次来看：

Fuchsia

Fuchsia是谷歌开发的一款全新的操作系统，他不同于谷歌之前开发的系统，如ChromeOS、Android都是基于Linux内核，而Fuchsia是基于全新内核Zircon，对于硬件要求更低，性能更加卓越。
对于这款系统，谷歌一直很低调，就连最初的亮相也是因为于2016年8月份在Github开源的项目而公之于众而非官宣，但是对于这款操作系统的愿景和目的，谷歌也一直很隐晦，但是从谷歌的动作不难推测，它是想开发一款能够运行在所有不同设备的系统，智能手机、平板电脑、个人电脑等，胃口不可谓不大，大众一度推测，这款全新系统大有日后逐步取代Android的趋势。
而Flutter跟Fuchsia有什么关系呢？
Flutter是Fuchsia操作系统构建UI的SDK。这种关系，不需多言，Flutter的定位一下清晰了很多。

Skia

要想了解Flutter，另一个必须提及的当属Skia，它是一款用C++开发的性能彪悍的2d图像绘制引擎，于2005年被谷歌收购。因为其出色的绘制表现，被广泛应用，如ChromeOS、ChromiumOS、FirefoxOS、Android等产品，当然，Flutter的底层2D图像引擎用的就是Skia。
现在我们明白了，原来Flutter的实现思路，完全不同于React Native，Weex之类通过建立JSBridge/JSCore来桥接iOS/Android的原生控件，而是做的比较彻底，直接基于全新的2d图像引擎Skia来绘制图像！
这是一项伟大的突破，因为，真正的跨平台，如果不甩开JSBridge，就如同带着脚铐跳舞。而Flutter做到了，这也是其相比于其他方案的绝对优势之一。

Dart

Dart之所以最后提及，是因为它尤为重要，要重点说一下。
Flutter的开发语言不是JS，不是Java，不是Kotlin，而是Dart。
Dart是谷歌推出的编程语言，谷歌一直想拥有一门能够完美编写后端、后端的语言，而自家的Go语言，是静态强类型、编译型，显然不适合谷歌想Productive编写前端应用的愿景。
为什么没有选择JS呢？JS作为一名编程语言界的冉冉新星，粉丝拥簇，Google而没有选择它，理由很社会：Dart语言组就在自己隔壁，Flutter需要的一些新特性，Dart能够快速落地实现，而如果选择了JS，Google如果想为语言添加新特性，就必须经过各种委员会和浏览器提供商的决议...。
而事实上，Dart的确做到了亲兄弟间的密切支持，2018年2月份发布的Dart2.0，本月（12月份）最新发布的Dart2.1，就是为Flutter量身定制了许多语法特性以及改善了很多语法结构。
当然，选择Dart，还有其他更坚定的理由：

• Dart支持即时编译JIT（Just In Time）和事前编译AOT（Ahead of Time）。
  JIT为Flutter的HotReload（热加载）提供了可能。热加载是，当你在编辑器上修改了代码想看效果，不像传统的iOS/Android开发那样必须重新编译运行等待好长时间才能看结果（当然，现在Android/RN等也可以）。而Flutter的热加载，实现了在不到1秒的时间内就能看到修改后的结果，真是溜到飞起。要知道，热加载是开发者提高生产力的关键。
  而AOT将Dart编译成更加高效的本地代码，代码性能和用户体验更加卓越。
• Dart是一门易于上手的语言，事实上，Dart作为一门现代化语言，集百家之长，可以随处可见Java、Swift、JS的影子，降低了跨语言开发的学习成本。
• 富有语言表现力，如对函数式编程的支持相比于其他语言如Java要强太多。
• 性能卓越。如在VM方面，谷歌凭借着其在Dalvik、Go的技术沉淀，Dart VM在内存回收、吞吐量都有着不错的表现。

Dart是一门优秀的语言，有着诸多优势。但是，Dart的生态相比于其他热门语言，确实要冷清不少，开发者和三方库有限。相信有好多开发者如果不是Flutter，可能一辈子都不会接触到这门语言。但是，凭借着Flutter的火热，以及谷歌强劲的商业运作能力，Dart语言的前景，应该不会差。

综上，相信大家现在已经初步了解了Flutter到底是什么了。下面我们来深入探讨一下

跨平台方案对比

对于跨平台方案，有大概如下三种方案：

这里先只做简单的对比，后期计划写一篇深度一点的对比文章。

1、基于WebView跨平台方案（Ionic之类）

说白了，就是嵌套WebView。现在业界也有很多公司采用这种跨平台方案，由于是基于WebKit，原生端只需要提供一个WebView，再做一些JS交互即可完成跨平台开发，开发技术较低。
目前典型代表有：Cordova、Ionic、MUI、NativeScript、微信小程序等。
但是缺点也是比较致命，由于这种方案是操纵DOM，这是非常昂贵的操作，所以这种方案的性能比较受限，用户体验不好。

2、JSBridge方案（RN之类）

JSBridge建立了JS和原生控件的双向通信，说白了就是桥接作用。JS写一套代码，引擎底层自动根据平台（如iOS、Android）来桥接原生控件渲染。具体步骤概括下面两步：

• 布局消息传递：将虚拟DOM布局信息传递给原生；
• 原生根据布局信息通过对应的原生控件渲染控件树；

由于是原生控件，性能和体验自然比上面的WebApp体验要好很多。

但是，别高兴太早，桥接通信也是有代价的。每次用户的操作，这个桥接通道一般需要双向通信。
如下图：

flutter-01.png

当然，RN作为一款优秀的跨平台框架，一直在竭尽所能优化性能，如Visual DOM、Diff算法等。
而近日硅谷名厂AirBnb官方宣布停止使用ReactNative，并将其从代码库中移除，转而使用 Swift/Objective-C/Java/Kotlin。点击查看文章。这件事情多多少少还是令人震惊，要知道，RN是2015年推出，AirBnb在2016就在公司内部高调推广使用了，并且为RN社区输出了很多突出贡献，也发布了多篇技术文章来记录使用RN的问题及方案，极具参考价值。如今的突然退出着实让人意外。当然，正如AirBnb解释所言，之所以弃用，是因为 React Native 未能实现完全的跨平台抽象，有时候仍然需要针对特定平台单独编写代码来解决问题，做大量的基础桥接工作，降低了功能迭代效率，违背了选型初衷。但是，AirBnb的退出并不妨碍RN还是一款优秀的跨平台框架。

3、Flutter方案

之所以Flutter单独一类出来，是因为Flutter跟RN等的实现原理完全不同。上面在介绍Flutter也提到了，Flutter基于独有的一套渲染图像引擎Skia，不需要桥接，不基于WebKit。跨平台方案解决地比较彻底，可以说是所有跨平台解决方案中的一股清流。通过上文的简述，我们也能够了解到Flutter的优势，下面这个小节，详细总结一下其优势。

Flutter的优势

• 摒弃JSBridge，性能卓越
  不得不承认，JSBridge会是应用的性能瓶颈，而且也会是开发的瓶颈，有些Error很难调试。而Flutter是直接编译成本地代码，用Skia渲染展示，如同原生的渲染逻辑一样，无需桥接，不管用户体验还是调试，都有出色的表现。
• HotReload
  上文也已经介绍了热加载的概念和优势，这里不再赘述。不得不承认，HotReload大大提高了开发生产力。
• 富有表现力，漂亮的用户界面：自带的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果。
• 响应式框架：使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。
• 统一的应用开发体验：Flutter拥有丰富的工具和库，可以帮助开发者轻松地同时在iOS和Android系统中实现想法和创意。
• 访问本地功能和SDK：Flutter可以复用现有的Java、Swift或OC代码，访问iOS和Android上的原生系统功能和系统SDK。
• ...

环境搭建

上面介绍了这么多，相信你已经对Flutter有了基本的了解，同时充满了美好的憧憬。
话不多说，我们搭建一下环境，下篇文章我们会真正进入好玩的Flutter的编程世界。
其实，环境的搭建大家对着官方文档一步一步来就没问题，但是由于你懂得的一些原因，作为谷歌的产品，Flutter的国内环境搭建还是有一些注意的地方的。我总结一下环境搭建直通车：
因为我的是Mac，所以这里只介绍Mac平台的环境搭建，其他平台大同小异。

• 1、配置镜像的环境变量。

vim ~/.bash_profile

然后把下面两个变量写进去

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

刷新窗口数据

source ~/.bash_profile

2、下载Flutter SDK并配置环境变量
点击下载Flutter SDk
下载后解压，然后将flutter拖到一个固定的位置，如Home目录。即~/文件夹下。
然后，配置一下flutter bin的环境变量。配置方法同上，注意写对路径。如我的如下：（ZK是我的名字）

export PATH=/Users/ZK/flutter/bin/:$PATH

3、上面步骤走完后，Flutter命令已经可以用了。运行一下doctor命令，会触发自动检查程序。

flutter doctor

运行完后，直接在终端就会展示检查报告，你可以根据根据提示去逐个修复，很简单这里不再赘述。
我的运行完，如下：

localhost:~ ZK$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.1 18B75, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 2.3)
[✓] VS Code (version 1.29.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

至此，Flutter的环境已经搭建完毕，很简单吧。顺利的话，10分钟内完全可以搞定。

IDE的配置

由于我用的是MicroSoft开发的编程神器VSCode，所以这里只介绍VSCode的Flutter扩展安装。

• 1、打开VSCode
• 2、Shift + Cmd + p，框中输入install，选择Extensions: Install Extensions
• 3、输入flutter，搜索到后点击安装，reload一下即可
• 4、Shift + Cmd + p，如果选项框中有Flutter: New Project，就安装成功了。

后话

正如上文所言，Flutter是一款优秀的跨平台开发解决方案，而且确实弥补了如今跨平台开发的短板，解决了业界痛点。而且，谷歌一直有着不错的号召力，我觉得，未来2年内，Flutter一定会有长足的发展，不远的将来，会从现在的非主流正式踏入主流之列。
接下来的系列文章，让我们真正踏入Flutter的世界，领略Flutter之美。

参考链接：

https://en.wikipedia.org/wiki/Google_Fuchsia
https://www.cnet.com/news/google-fuchsia-challenger-to-windows-android/
https://flutter.io/docs/