Flutter 是當下移動端領域非常熱門的跨端架構，各個大廠都在積極探索這項技術，并在主營業務上實作落地。
在 Google Trends 上對比 Flutter 和 React Native 的熱度，可以看到 Flutter 已完全超過 React Native，成為當下最熱門的移動端跨端技術方案。
1
Why Flutter?
為什麼選擇這項技術？
Flutter 到底具備什麼魅力，讓這些大廠如此着迷？
我想這是每個移動端從業者都好奇的問題。Flutter 作為一門前沿技術，目前尚未在行業内全面普及，也許有的開發者已經看到機會，想要展現自己才華，那麼該如何快速入門 Flutter 技術呢？
而技術管理者可能更想知道 Flutter 這門新技術存在哪些“坑”，自己的團隊是否能夠駕馭，能夠更好地創造業務價值。
這些問題在本文中都會得到解答。筆者目前就職于某一線網際網路公司，擔任某商業項目的 Flutter 負責人，在業務中大量落地 Flutter 技術，并取得了良好的業務收益，将在本文中跟大家分享他的心路曆程。
在 Flutter 誕生之前，業界已有大量移動端跨端技術，其中比較知名的有 React Native、Weex、小程式等。為什麼有了這麼多解決方案，Flutter 的推出仍會讓大家如此興奮呢？
衡量一項跨端技術的好壞可以從以下次元入手。
跨端一緻性：一套代碼在多端得到一緻的展示效果，這是跨端方案的基本要求。
運作效率：跨端代碼運作效率也是一個跨端方案的重要考量因素，運作效率直接影響到能否落地核心業務。
開發效率：許多人會混淆運作效率與開發效率，兩者實則是不同的概念。運作效率高指的是這個架構“跑得快”，進而能夠勝任更多複雜頁面。開發效率高指的是“開發速度快”，決定了研發效率的高低。
原生能力導出：對于跨端架構來說，如何整合兩個系統能力也是一個難點。優秀的跨端架構能夠形成一個擴充開源生态，提供了多種多樣的擴充庫，供開發者快速接入。
動态性：原生開發采用應用商店發版更新的模式，必須經過應用商店稽核、使用者下載下傳的釋出流程，導緻無法随時更新，這是移動端開發的固有限制。很多跨端項目因為基于腳本引擎，能夠實作動态下發，繞過這一限制，不過同時也面臨着稽核風險。
包體積：使用者對應用的安裝包體積也是比較敏感的。如果安裝包較小，使用者在使用流量上網時也更加願意下載下傳安裝，進而有利于積累使用者。
目前市面上的跨端技術主要分為以下幾類。
基于網頁的跨端方案：常用的WebView或者小程式都屬于這一類。這類技術的優點是技術棧成熟，開發效率高，并且天然具備動态性，是目前采用最廣泛的跨端形式。缺點是執行效率遠低于原生應用，尤其在性能較低的手機上，這導緻一些複雜的互動效果不夠流暢，或出現卡頓掉幀的情況。
端渲染方案：如 React Native、Weex，它們将渲染流程橋接到原生，是以執行效率大大提升。同時依然複用前端技術棧，保證了高開發效率。這類方案的最大缺點是跨端一緻性問題，由于最終渲染出來的還是 Android、iOS的原生視圖，雙端對原生視圖的實作原理不同，是以總有一些細微之處是難以對齊的。另外，因為使用 JavaScript 腳本引擎，是以運作效率仍低于原生開發。
這些次元之間此消彼長，很難實作兼顧。Flutter 針對現有架構存在的問題進行專門改進，在各個次元上都進行了突破。
Flutter的優勢具體可以梳理為以下幾個方面：
像素級别的雙端一緻性：Flutter自帶Skia圖形繪制引擎，采用自繪制方式，不論在 Android 還是iOS上，Flutter應用的渲染都不走系統原生，都統一走 Flutter 的Skia引擎進行繪制。是以兩端渲染過程是完全一緻的，能夠實作像素級别雙端一緻性。
接近原生的執行效率：Flutter 實作了接近原生的執行效率，遠遠超出同類架構。首先在程式設計語言上，Flutter 采用 Dart 語言，這是一種非常先進的程式設計語言，支援多種編譯方式，既能夠以 JIT 方式編譯，也能夠以 AOT 方式編譯。第二點在繪制引擎上，Flutter 采用內建Skia引擎自渲染，實作了從執行到渲染的閉環，沒有跨層帶來的性能損耗。
高度雙端代碼複用：在 Flutter 中，由于采用自渲染方案，兩端從運作時環境到底層渲染都完全一緻，是以可以實作最大化的雙端複用。在實際工作中，基本 90% 的代碼能夠實作雙端複用，剩下的 10% 即兩端差異化适配代碼。
更高的開發效率：Flutter 選用 Dart 語言進行開發，Dart 語言是一門容易上手、功能強大的語言。Flutter 借鑒 React 設計了一套自己的元件聲明式架構。元件聲明式架構是前端開發效率高于傳統原生的一個重要因素。同時 Flutter 支援 Hot Reload 特性，代碼更改可以直接應用到裝置中，實作“亞秒級”的效果實時展示，大幅提高了開發效率。
跨端動畫效果：Flutter 由于自建繪制引擎，在動畫的性能上有先天優勢，能夠實作接近原生的執行效率，這是超越同類跨端架構的。在開發效率上，Flutter 提供了一套功能強大、簡單易用的動畫架構，能夠友善地實作各種動畫效果。同時 Flutter 的動畫效果也是雙端像素級别對齊的，實作了真正的動畫代碼雙端複用。
先進的應用架構理念：Flutter 雖然沒有直接采用前端 JavaScript 生态，但它在設計中大量借鑒了前端架構理念，不論是元件化架構還是全局狀态管理器均有 Dart 下的實作。前端流行的架構模式在 Flutter 下均有對應實作，同時 Flutter 開源生态中也發展出了帶有 Flutter 特色的新架構模式。通過這些架構模式，Flutter具備開發複雜的商業項目的架構基礎。
未來發展潛力巨大：Flutter 的技術特點使其跨端能力極強，不僅能夠跨移動端，也能夠運作在 Web 端以及桌面平台。更廣泛的跨端能力是 Flutter 當下發展的重點。在 Google 的規劃中，Flutter 已不僅是一個移動端跨端架構，而是要成為一個跨 Web、桌面、移動端的全覆寫跨端架構。對于學習者來說，學習 Flutter 投入回報非常高。
2
純 Flutter 應用 or 混合開發
既然 Flutter 有這麼多優勢，我們怎麼把它用起來呢？在落地 Flutter 時通常有兩種實作形式：純 Flutter 應用和混合開發。
純Flutter應用
純 Flutter 應用指整個工程是一個标準的 Flutter Application，并且主要邏輯都由 Flutter 實作。
純 Flutter 應用不是說不能使用 Native 技術，但大多數場景都需要使用 Native 技術來擴充 Flutter 的能力。主要有以下方式。
● 在 Flutter Application 下同時包含Android、iOS原生工程，這些工程都是傳統的原生工程，可以按照原生思路進行開發，比如導入原生 SDK 進行初始化操作等。
● Native 與 Flutter 間可以通過 Channel 機制實作通信，Channel支援雙向通信。
● 通過 Flutter Plugin 擴充，可以直接實作原生能力快速接入。
總結來說，純 Flutter 應用是以 Flutter 代碼為主體，以 Native 功能為擴充的開發方式。通過與下文的混合開發做比對，能夠更好地了解兩者的差異。
純 Flutter 應用是 Google Flutter 官方所支援的開發方式，能夠做到開箱即用，穩定性也最有保障。
當立項一個新項目的時候，如果該項目對顯存的 Native 項目代碼依賴比較少，或者現有 Native 項目可以友善地封裝為 Flutter Plugin 進行擴充，建議選用純 Flutter 方式開發，能夠具備遠高于原生的開發效率。
混合開發
對于大多數已有的商業項目，大量業務和基礎設施都由 Native 實作，全部遷移 Flutter 成本過高，此時會選擇進行混合開發。
在混合開發中，Native 業務為主體，Flutter 業務更類似于”WebView“，作為相對獨立的二級子子產品使用。
混合開發就需要一個像“WebView”一樣的 Flutter 容器進行承載。Flutter 官方對混合開發的支援力度較弱，無法滿足複雜的業務場景。
業界推出了多種混合路由架構來填補這一短闆，比較知名的是鹹魚推出的 Flutter Boost 架構。混合路由架構通過對 Flutter 容器棧和 Flutter Navigator 頁面棧的統一維護，打通了原生應用與 Flutter 子產品間的混合跳轉路徑，使得開發者可以像WebView一樣使用 Flutter 容器。
即便有了混合路由，在混合場景下進行開發的難度相較于純 Flutter 應用開發也要難一些，尤其是在大型的商業項目中。難點主要展現在與現有 Native 架構融合，以及性能穩定性優化方面，這部分會在下文講 Flutter 的“坑”中進行介紹。
總結來說，對于已有的商業項目想要落地 Flutter，隻能選擇混合開發的方式。混合開發需要引入或者研發混合路由架構，會對 Flutter 的 Embedder層原有邏輯做一些調整，是以适配難度會加大。
3
Flutter的“坑”
筆者在最近一年裡負責完成了一系列大型商業項目混合開發的從 0 到 1，并負責搭建了部門的 Flutter 技術體系，從最初試水到現在大規模業務落地，這期間積累了大量經驗，也摸清了 Flutter 的“脾氣”。
對于技術管理者來說，對 Flutter 這門技術的先進性大家普遍都是認可的，最擔心的還是它的落地風險。
對于一門新技術，其風險來自幾個方面。
能否創造商業價值：在商業項目中，技術不是越新越好，而是要能夠産出商業價值，為業務服務。由于 Android 和iOS生态差異性，同一個功能需要多次開發，開發效率問題長久以來都是移動端開發的痛點。經過筆者探索和驗證，純移動端背景的同學首次上手 Flutter 就能夠帶來開發效率提升，并且熟練度和後續低維護成本也有助于提升開發效率。
上手難度：Flutter 開發方式與移動端開發不同，如何能夠快速上手 Flutter 呢？Flutter 自成一套體系，盡管采用易于學習的 Dart 語言群組件聲明式架構，但仍具備一定的學習成本。筆者編寫的《Flutter 開發執行個體解析》一書，就是根據筆者長期以來的 Flutter 商業項目實戰經驗總結而成，其特色是不僅講基礎，也講如何對 Flutter 項目進行高品質的架構設計，精選了大家最需要的部分，同時輔以大量完整執行個體項目，手把手帶領讀者進行實踐，實作快速上手。
穩定性：穩定性是管理者最關心的方面，即使技術再好，如果上線不穩定，也會造成一種騎虎難下的困境。穩定性又可以細分為兩個方面。
技術自身成熟度：Flutter經過多年發展，自身已經十分成熟。對于純 Flutter 應用開發來說，Flutter 可以作為開箱即用的方案，穩定性是有保障的。對于混合開發來說，知名的混合路由架構經過多年打磨，也已比較完善。但是混合開發由于其自身的複雜性，穩定性也取決于原生架構與 Flutter 引擎、混合路由架構的融合程度。同時對于混合開發來說，由于原生業務已經有一定的性能、記憶體開銷，引入 Flutter 後會提高記憶體水位，需要經過打磨、調優才能達到最佳狀态。
技術團隊底層架構能力：對于純 Flutter 應用開發來說，基于 Flutter 團隊成熟的技術方案，一般隻需要關注業務開發即可。但對于混合開發來說，Flutter 不是一個開箱即用的方案，需要團隊對 Flutter 的底層原理、混合路由原理、外接紋理，以及自身 Native 業務架構都了解透徹，才能夠進行較好融合。如果融合不好，會遇到一些 Crash、OOM 等問題。是以，混合開發更加考驗技術團隊的底層架構能力。
盡管混合開發有一定難度，但還是可行的，從各個大廠都已經大規模落地實踐中就能夠證明。同時筆者負責的多個商業項目都采用混合開發，并且大規模全量落地，在穩定性和體驗上與之前能夠保持持平。
未來發展：每年都有大量的新技術誕生，作為有經驗的管理者，在采用新技術時都比較慎重，會考慮其未來的發展潛力。
項目的生命周期：很多項目官方推出時聲勢浩大，可沒過一兩年就不維護了，進入一種“棄坑”狀态，Flutter 會不會棄坑呢？從目前 Google 對 Flutter 的定位和火熱程度上來看，機率是極低的。Flutter 是作為 Fuchsia 的 GUI 開發架構被提出的，Fuchsia 則是 Google 開發中的下一代作業系統。不論是 Flutter 在移動端提前開花結果，Fuchsia 的穩步推進，還是 Flutter 對 Web、Desktop 的泛跨端支援，都表明這項技術還處在早期的蓬勃發展階段，在未來的 3～5 年内都會保持高速發展。
等一等會不會有更好的？Flutter 是吸取前人的經驗的基礎上進行了突破，會不會再有新架構吸取 Flutter 進行突破呢？如果有，再等一等豈不是更好？回答這個需要回顧前問對 Flutter 的介紹，Flutter為了實作綜合突破，引入了 Dart 語言、Skia渲染引擎，并自研了一套類 React 元件聲明式架構，同時還包括一整套完善的開發、調試環境。這種強大的工程能力不是一般公司能夠比拟的。筆者之前也作為核心作者自研了一套跨端架構，深知其中的難度。Flutter 将跨端技術推向了一個新的高度，不排除全球網際網路巨頭會推出更先進的架構，但難度已經越來越大。
4
It's time for Flutter
今年随着 Flutter 2.0 的推出，Flutter正式邁向成熟。在 Flutter 2.2 中又推出了新的多引擎概念，新增一個引擎記憶體開銷隻有 180KB，可謂消除了混合開發中最大的難點。
在 Flutter 1.x 時代，運作 Flutter 還需要飽受架構 Bug 的折磨，比如一個著名的梗是說 Flutter 的官方 Repo 裡有 1w 個 issue 沒有關。對于混合開發來說，最為頭疼的是多個 Flutter 容器如何複用底層一個Window，通過 Flutter Surface 殘影的方式實作兩個 Flutter 容器間的過場切換。
這些問題，在 Flutter 2.0 之後都得到了極大的改善。
同時，在 Flutter 1.x 時代落地的商業項目，所采用的老版本反而成了技術包袱。正所謂船大難掉頭，好不容易落地 Flutter，大家目前都處于拿去商業收益的階段，沒有精力也沒有動力更新 Flutter 2.0。而新落地的項目則沒有這個負擔，可以享受到更強、更穩定的 Flutter 引擎帶來的好處。
Flutter for Web Release 釋出，是 Flutter 2.0 的推出的一個亮點。在《Flutter開發執行個體解析》一書中，筆者為大家示範了如何一行代碼都不修改，就能将一個原生應用跑在 Web 端和桌面端，并且具備完全一緻的展示效果和使用體驗。筆者在寫作時使用的還是 Flutter 1.x，那時 Flutter for Web 仍處于Beta，就已經提供了良好的體驗，在 Release 版中這項新特性真正具備了可落地的商業價值。