篇外話
“
Flutter是什么？”、“它出現(xiàn)的動機是什么？解決了哪些痛點？”、“相比React Native、Weex等跨平臺技術，優(yōu)勢在哪里？”、“學不動了，555”...
相信大部分人看到Flutter的第一眼，滿腦子都會充斥著類似的這些問題。沒事別急，我會慢慢介紹給大家，讓大家對Flutter有個全方位的認知和感受，全面了解后，上面的問題自然就會迎刃而解。
開始之前，（敲黑板）大家跟我讀：f-l-u-t-t-e-r，['fl?t?]。為什么先糾正一下發(fā)音，因為我親耳聽到的不下于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平臺的應用。也可以基于原有代碼進行開發(fā)，世界各地廣受歡迎，開源且免費。
聽上去，確實挺誘人。事實上，等到我們后面深入了解后，性能卓越、體驗精美、跨平臺、HotReload等等這些特點，無一不成為了Flutter成為跨平臺方案的冉冉新星的強大優(yōu)勢。而且，有著谷歌強大的技術支持與背書，商業(yè)運作能力與號召力，Flutter成為主流只是時間問題。
當然，為了更深入了解Flutter，我們有必要先了解下Fuchsia、Skia、Dart這些名詞。
依次來看：
Fuchsia
Fuchsia是谷歌開發(fā)的一款全新的操作系統(tǒng)，他不同于谷歌之前開發(fā)的系統(tǒng)，如ChromeOS、Android都是基于Linux內核，而Fuchsia是基于全新內核Zircon，對于硬件要求更低，性能更加卓越。
對于這款系統(tǒng)，谷歌一直很低調，就連最初的亮相也是因為于2016年8月份在Github開源的項目而公之于眾而非官宣，但是對于這款操作系統(tǒng)的愿景和目的，谷歌也一直很隱晦，但是從谷歌的動作不難推測，它是想開發(fā)一款能夠運行在所有不同設備的系統(tǒng)，智能手機、平板電腦、個人電腦等，胃口不可謂不大，大眾一度推測，這款全新系統(tǒng)大有日后逐步取代Android的趨勢。
而Flutter跟Fuchsia有什么關系呢？
Flutter是Fuchsia操作系統(tǒng)構建UI的SDK。這種關系，不需多言，Flutter的定位一下清晰了很多。
Skia
要想了解Flutter，另一個必須提及的當屬Skia，它是一款用C++開發(fā)的性能彪悍的2d圖像繪制引擎，于2005年被谷歌收購。因為其出色的繪制表現(xiàn)，被廣泛應用，如ChromeOS、ChromiumOS、FirefoxOS、Android等產(chǎn)品，當然，Flutter的底層2D圖像引擎用的就是Skia。
現(xiàn)在我們明白了，原來Flutter的實現(xiàn)思路，完全不同于React Native，Weex之類通過建立JSBridge/JSCore來橋接iOS/Android的原生控件，而是做的比較徹底，直接基于全新的2d圖像引擎Skia來繪制圖像！
這是一項偉大的突破，因為，真正的跨平臺，如果不甩開JSBridge，就如同帶著腳銬跳舞。而Flutter做到了，這也是其相比于其他方案的絕對優(yōu)勢之一。
Dart
Dart之所以最后提及，是因為它尤為重要，要重點說一下。
Flutter的開發(fā)語言不是JS，不是Java，不是Kotlin，而是Dart。
Dart是谷歌推出的編程語言，谷歌一直想擁有一門能夠完美編寫后端、后端的語言，而自家的Go語言，是靜態(tài)強類型、編譯型，顯然不適合谷歌想Productive編寫前端應用的愿景。
為什么沒有選擇JS呢？JS作為一名編程語言界的冉冉新星，粉絲擁簇，Google而沒有選擇它，理由很社會：Dart語言組就在自己隔壁，Flutter需要的一些新特性，Dart能夠快速落地實現(xiàn)，而如果選擇了JS，Google如果想為語言添加新特性，就必須經(jīng)過各種委員會和瀏覽器提供商的決議...。
而事實上，Dart的確做到了親兄弟間的密切支持，2018年2月份發(fā)布的Dart2.0，本月（12月份）最新發(fā)布的Dart2.1，就是為Flutter量身定制了許多語法特性以及改善了很多語法結構。
當然，選擇Dart，還有其他更堅定的理由：
-
Dart支持即時編譯JIT（Just In Time）和事前編譯AOT（Ahead of Time）。
JIT為Flutter的HotReload（熱加載）提供了可能。熱加載是，當你在編輯器上修改了代碼想看效果，不像傳統(tǒng)的iOS/Android開發(fā)那樣必須重新編譯運行等待好長時間才能看結果（當然，現(xiàn)在Android/RN等也可以）。而Flutter的熱加載，實現(xiàn)了在不到1秒的時間內就能看到修改后的結果，真是溜到飛起。要知道，熱加載是開發(fā)者提高生產(chǎn)力的關鍵。
而AOT將Dart編譯成更加高效的本地代碼，代碼性能和用戶體驗更加卓越。 -
Dart是一門易于上手的語言，事實上，Dart作為一門現(xiàn)代化語言，集百家之長，可以隨處可見Java、Swift、JS的影子，降低了跨語言開發(fā)的學習成本。 - 富有語言表現(xiàn)力，如對函數(shù)式編程的支持相比于其他語言如Java要強太多。
- 性能卓越。如在VM方面，谷歌憑借著其在
Dalvik、Go的技術沉淀，Dart VM在內存回收、吞吐量都有著不錯的表現(xiàn)。
Dart是一門優(yōu)秀的語言，有著諸多優(yōu)勢。但是，Dart的生態(tài)相比于其他熱門語言，確實要冷清不少，開發(fā)者和三方庫有限。相信有好多開發(fā)者如果不是Flutter，可能一輩子都不會接觸到這門語言。但是，憑借著Flutter的火熱，以及谷歌強勁的商業(yè)運作能力，Dart語言的前景，應該不會差。
綜上，相信大家現(xiàn)在已經(jīng)初步了解了Flutter到底是什么了。下面我們來深入探討一下
跨平臺方案對比
對于跨平臺方案，有大概如下三種方案：
這里先只做簡單的對比，后期計劃寫一篇深度一點的對比文章。
1、基于WebView跨平臺方案（Ionic之類）
說白了，就是嵌套WebView。現(xiàn)在業(yè)界也有很多公司采用這種跨平臺方案，由于是基于WebKit，原生端只需要提供一個WebView，再做一些JS交互即可完成跨平臺開發(fā)，開發(fā)技術較低。
目前典型代表有：Cordova、Ionic、MUI、NativeScript、微信小程序等。
但是缺點也是比較致命，由于這種方案是操縱DOM，這是非常昂貴的操作，所以這種方案的性能比較受限，用戶體驗不好。
2、JSBridge方案（RN之類）
JSBridge建立了JS和原生控件的雙向通信，說白了就是橋接作用。JS寫一套代碼，引擎底層自動根據(jù)平臺（如iOS、Android）來橋接原生控件渲染。具體步驟概括下面兩步：
- 布局消息傳遞：將虛擬
DOM布局信息傳遞給原生； - 原生根據(jù)布局信息通過對應的原生控件渲染控件樹；
由于是原生控件，性能和體驗自然比上面的WebApp體驗要好很多。
但是，別高興太早，橋接通信也是有代價的。每次用戶的操作，這個橋接通道一般需要雙向通信。
如下圖：
當然，RN作為一款優(yōu)秀的跨平臺框架，一直在竭盡所能優(yōu)化性能，如Visual DOM、Diff算法等。
而近日硅谷名廠AirBnb官方宣布停止使用ReactNative，并將其從代碼庫中移除，轉而使用 Swift/Objective-C/Java/Kotlin。點擊查看文章。這件事情多多少少還是令人震驚，要知道，RN是2015年推出，AirBnb在2016就在公司內部高調推廣使用了，并且為RN社區(qū)輸出了很多突出貢獻，也發(fā)布了多篇技術文章來記錄使用RN的問題及方案，極具參考價值。如今的突然退出著實讓人意外。當然，正如AirBnb解釋所言，之所以棄用，是因為 React Native 未能實現(xiàn)完全的跨平臺抽象，有時候仍然需要針對特定平臺單獨編寫代碼來解決問題，做大量的基礎橋接工作，降低了功能迭代效率，違背了選型初衷。但是，AirBnb的退出并不妨礙RN還是一款優(yōu)秀的跨平臺框架。
3、Flutter方案
之所以Flutter單獨一類出來，是因為Flutter跟RN等的實現(xiàn)原理完全不同。上面在介紹Flutter也提到了，Flutter基于獨有的一套渲染圖像引擎Skia，不需要橋接，不基于WebKit。跨平臺方案解決地比較徹底，可以說是所有跨平臺解決方案中的一股清流。通過上文的簡述，我們也能夠了解到Flutter的優(yōu)勢，下面這個小節(jié)，詳細總結一下其優(yōu)勢。
Flutter的優(yōu)勢
- 摒棄
JSBridge，性能卓越
不得不承認，JSBridge會是應用的性能瓶頸，而且也會是開發(fā)的瓶頸，有些Error很難調試。而Flutter是直接編譯成本地代碼，用Skia渲染展示，如同原生的渲染邏輯一樣，無需橋接，不管用戶體驗還是調試，都有出色的表現(xiàn)。 - HotReload
上文也已經(jīng)介紹了熱加載的概念和優(yōu)勢，這里不再贅述。不得不承認，HotReload大大提高了開發(fā)生產(chǎn)力。 - 富有表現(xiàn)力，漂亮的用戶界面：自帶的
Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果。 - 響應式框架：使用
Flutter的現(xiàn)代、響應式框架，和一系列基礎widget，輕松構建您的用戶界面。 - 統(tǒng)一的應用開發(fā)體驗：
Flutter擁有豐富的工具和庫，可以幫助開發(fā)者輕松地同時在iOS和Android系統(tǒng)中實現(xiàn)想法和創(chuàng)意。 - 訪問本地功能和SDK：
Flutter可以復用現(xiàn)有的Java、Swift或OC代碼，訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK。 - ...
環(huán)境搭建
上面介紹了這么多，相信你已經(jīng)對Flutter有了基本的了解，同時充滿了美好的憧憬。
話不多說，我們搭建一下環(huán)境，下篇文章我們會真正進入好玩的Flutter的編程世界。
其實，環(huán)境的搭建大家對著官方文檔一步一步來就沒問題，但是由于你懂得的一些原因，作為谷歌的產(chǎn)品，Flutter的國內環(huán)境搭建還是有一些注意的地方的。我總結一下環(huán)境搭建直通車：
因為我的是Mac，所以這里只介紹Mac平臺的環(huán)境搭建，其他平臺大同小異。
- 1、配置鏡像的環(huán)境變量。
vim ~/.bash_profile
然后把下面兩個變量寫進去
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
刷新窗口數(shù)據(jù)
source ~/.bash_profile
2、下載Flutter SDK并配置環(huán)境變量
點擊下載Flutter SDk
下載后解壓，然后將flutter拖到一個固定的位置，如Home目錄。即~/文件夾下。
然后，配置一下flutter bin的環(huán)境變量。配置方法同上，注意寫對路徑。如我的如下：（ZK是我的名字）
export PATH=/Users/ZK/flutter/bin/:$PATH
3、上面步驟走完后，Flutter命令已經(jīng)可以用了。運行一下doctor命令，會觸發(fā)自動檢查程序。
flutter doctor
運行完后，直接在終端就會展示檢查報告，你可以根據(jù)根據(jù)提示去逐個修復，很簡單這里不再贅述。
我的運行完，如下：
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的環(huán)境已經(jīng)搭建完畢，很簡單吧。順利的話，10分鐘內完全可以搞定。
IDE的配置
由于我用的是MicroSoft開發(fā)的編程神器VSCode，所以這里只介紹VSCode的Flutter擴展安裝。
- 1、打開
VSCode - 2、
Shift + Cmd + p，框中輸入install，選擇Extensions: Install Extensions - 3、輸入
flutter，搜索到后點擊安裝，reload一下即可 - 4、
Shift + Cmd + p，如果選項框中有Flutter: New Project，就安裝成功了。
后話
正如上文所言，Flutter是一款優(yōu)秀的跨平臺開發(fā)解決方案，而且確實彌補了如今跨平臺開發(fā)的短板，解決了業(yè)界痛點。而且，谷歌一直有著不錯的號召力，我覺得，未來2年內，Flutter一定會有長足的發(fā)展，不遠的將來，會從現(xiàn)在的非主流正式踏入主流之列。
接下來的系列文章，讓我們真正踏入Flutter的世界，領略Flutter之美。
參考鏈接：
https://en.wikipedia.org/wiki/Google_Fuchsia
https://www.cnet.com/news/google-fuchsia-challenger-to-windows-android/
https://flutter.io/docs/
