阿裡妹導讀：Flutter從誕生到現在，已經成為了跨端開發的領跑者。閑魚應用在flutter能夠以子產品形式存在前，進行了很長時間的混合app架構的探索，對原生工程進行較多改動，在官方推出flutter子產品模式後，我們進行了大量調研，最終推出了一套開箱即用的混合工程腳手架flutter-boot，幫助大家快速搭建混合工程。
Google Flutter 産品經理推薦，精解Flutter企業級實踐，揭秘億級流量背後的技術秘籍，工程師不容錯過的學習寶典的《Flutter in action》，今天正式釋出，文末下載下傳。
作者 | 興往、向志明、馬引
背景
國内外越來越多的公司走上了flutter探索之路。Flutter的主要開發模式分成兩種，一種是獨立app的模式，以flutter為主，原生工程會被包含在flutter工程下；另一種是讓flutter以子產品（flutter module）的形式存在，分别內建在已有的iOS和android原生應用下，此時原生工程可以在任何的目錄結構下，和flutter工程位址不産生關聯，但需要在原生工程結構中聲明flutter工程的本地位址。
簡介
flutter-boot核心解決了混合開發模式下的兩個問題：flutter混合開發的工程化設計和混合棧。那flutter-boot是如何解決的呢？
首先在工程化設計的問題上，flutter-boot建立了一套标準的工程建立流程和友好的互動指令，當流程執行完成後，即擁有了混合開發的标準工程結構，這一套工程結構能夠幫助我們同時擁有flutter和native（原生）兩種開發視角，本地flutter開發和雲端flutter建構兩種flutter內建模式，其效果如圖：
另外在混合棧的問題上，flutter-boot能自動注入混合棧依賴，同時将核心的混合棧接入代碼封裝後注入到原生工程内，在使用者按提示插入簡單幾行模版代碼後，即可看到混合棧的效果。 使用flutter-boot搭建的混合工程，開箱即可使用，接下來讓我們了解下flutter-boot解決這些問題的詳細過程。
開源位址
https://github.com/alibaba-flutter/flutter-boot工程化設計
了解官方的Add Flutter to existing apps項目
在了解flutter-boot的工程化設計細節前，我們需要對Google官方提供的Add Flutter to existing apps方案有一個初步的了解。Add Flutter to existing apps項目會引導我們以module的形式建立flutter，module形态的flutter的工程結構如下：
some/path/
my_flutter/
lib/main.dart
.ios/
.android/ 在官方的工程結構下，.ios和.android是運作flutter時的模版工程，在flutter工程目錄下運作時即通過這兩個工程來啟動應用。那我們如何讓原生工程和産生關聯呢？這裡的關聯會分成三個部分，分别是flutter的framework，flutter的業務代碼，和flutter的插件庫。其中flutter插件庫分成 flutter plugin native（即插件原生代碼）和flutter plugin dart（即插件的dart代碼）兩個部分。這四部分的差異在于：
是以flutter framework隻需要在依賴管理中聲明即可，flutter plugin native可以直接以源碼的方式內建，flutter plugin dart隻有在被業務代碼引用時才有效，是以和業務代碼一樣，需要支援dart代碼的調試模式和釋出模式，是以dart代碼的關聯會侵入到app的建構環節，根據app建構的模式來決定dart代碼的構模組化式。
具體的實作，拿iOS來舉例，我們會在podfile檔案中增加一個自定義的ruby腳本podfilehelper的調用，podfilehelper會聲明flutter framework的依賴，聲明flutter plugin native的源碼引用，同時聲明業務代碼的路徑。接下來會介入建構流程，在xcode的build phase内加入shell腳本xcode_backend的調用，xcode_backend會根據目前構模組化式，來産出dart建構産物。
flutter-boot的補充
對于官方的混合工程項目，我們在體驗後發現有如下的問題：
- 檔案或配置的添加為手動添加，流程較長。
- 不支援在flutter倉庫下運作原生工程。
- 不支援flutter以獨立代碼倉庫部署時的遠端機器建構。
是以在flutter-boot腳手架中，為了解決這些問題，我們把混合工程的部署分為create，link，remotelink，update四個過程。
| create
create過程目的在于幫助我們搭建一個flutter module，包括flutter module的建立和git倉庫的部署，flutter module建立指令調用前，我們會做基礎的檢查來讓工程位置和命名的規範滿足官方的條件。在git倉庫部署時，我們會在gitignore中忽略部分檔案，同時我們會對倉庫的狀态進行檢查，在倉庫為空時，直接添加檔案，在倉庫非空時，會優先清理倉庫。
| link
link過程目的在于關聯本地的原生工程和flutter工程。關聯的過程中，我們會先請求擷取flutter工程的位址和原生工程的位址，然後我們将上面提到的需要手動內建的部分通過腳本的方式自動內建；為了獲得flutter開發視角（即flutter工程下運作原生工程），我們将原生工程進行了軟連結，連結到flutter工程的ios目錄和android目錄，flutter在運作前會找到工程下的ios或android目錄然後運作，在flutter工程下運作iOS工程會存在一個限制，即iOS工程的target需要指定為runner，為了解決這個問題，我們将原生工程的主target進行了複制，複制了一份名為runner的target。
同時，為了支援遠端建構的模式，我們flutter倉庫本地路徑的聲明根據構模組化式進行了區分，封裝在自定義的依賴腳本中，例如在iOS工程内，我們會添加fbpodhelper.rb腳本檔案。然後将flutter倉庫本地路徑添加到了配置檔案fbConfig.local.json中。
| remotelink
update remotelink過程目的在于遠端構模組化式下，能夠擷取flutter倉庫的代碼，并在遠端機器上進行建構。在遠端構模組化式下，我們會侵入依賴管理的過程，在依賴擷取時，拉取flutter倉庫的代碼，将代碼放置在原生工程的.fbflutter目錄下，并将該目錄聲明為flutter倉庫本地路徑，拉取flutter代碼并進行本地部署的過程，我們稱之為update過程。
這樣在遠端建構時就能和本地建構如出一轍。 那遠端模式和本地模式如何區分呢？為了區分遠端模式與本地模式，我們将遠端的flutter倉庫資訊記錄在fbConfig.json，同時在gitignore中忽略fbConfig.local.json檔案，這樣隻需要初始化混合工程的工程師運作一次remotelink，其他的開發協同者将不用關注遠端建構的配置流程。
| init
為了友善快速搭建，我們提供了一個指令集合，命名為init，我們将必備的環節以指令行互動的模式內建在了init指令中。
混合棧
混合棧是閑魚開源的一套用于flutter混合工程下協調原生頁面與flutter頁面互動的架構，目前是混合開發模式下的主流架構。在混合棧開源後，我們關注到大量開發者在內建混合棧時會産生各種環境配置或代碼添加導緻的內建問題。是以我們決定提供一套快速內建的方案。要做到快速內建我們面臨兩個問題：
- flutter和混合棧的版本相容；
- 混合棧demo代碼封裝及插入。
版本相容問題
目前混合棧釋出版本為0.1.52，支援flutter 1.5.4。當flutter更新時混合棧勢必要進行适配，即我們內建的混合棧版本也需要變更。是以我們将混合棧的版本配置通過檔案進行維護，記錄目前flutter所需要的混合棧版本。在初版的flutter-boot中，我們限定了混合棧的版本号，在新版本混合棧釋出時，我們将開放版本選擇的功能。
代碼封裝及插入問題
在調研了混合棧的使用過程後，我們将混合棧需要的demo代碼分成了四個部分：
- flutter引擎的托管；
- 頁面路由的配置 ；
- demo形式的dart頁面 ；
- 原生的測試跳轉入口。
| flutter引擎的托管
引擎的托管我們依賴于應用的初始化，由于初始化過程随着應用的複雜程度提升而提升，是以目前我們提供了一行代碼作為接口，使用者在應用初始化時加入這一行代碼即可完成托管。
| 頁面路由的配置
demo形式的dart頁面，路由配置即路由到某個辨別符時，flutter或原生頁面需要識别并跳轉相應頁面。路由的配置需要在原生和flutter兩側進行部署。在原生側，我們将混合棧的demo路由代碼進行了精簡，然後添加在了原生工程的固定目錄下。由于iOS僅添加代碼檔案是不會被納入建構範圍的，是以我們封裝了一套iOS側的代碼添加工具來實作檔案的插入。在flutter側我們對main.dart檔案進行了覆寫，将帶有路由邏輯的main.dart內建進來，同時提供了demo dart頁面的建立邏輯。
| 原生的測試跳轉入口
為了友善使用者快速看到混合工程的跳轉模式，我們在iOS和android雙端封裝了一個入口按鈕和按鈕的添加過程，使用者在測試的頁面手動加入一行代碼，即可看到跳轉flutter的入口。
效果
在使用flutter-boot前，開發者可能要花費數天來進行混合工程搭建，現在，使用者隻需要調用一個指令，加入兩行代碼即可完成混合工程的搭建，大大降低了開發者的開發成本。但flutter-boot的使命還未達成，我們期望使用者能更加流暢的進行flutter開發，未來我們會優化多人協同的開發流程，完善持續內建環境的搭建，讓使用者擁有更佳的開發體驗。
最後，福利來了，現在承載億級流量的閑魚将多年最佳實踐經驗整理成冊，《Flutter in action》 面世啦，本篇内容僅為書中的精華之一！
4大精彩看點，快速了解《Flutter in action》
Flutter開源工具大集合
閑魚Flutter應用架構Fish Redux、開發利器AspectD、FlutterBoost等一衆開發工具正式開源，現在《Flutter in action》一次幫你找全了。開源位址+技術解析，手把手教你Flutter應用架構和混合開發原理！
閑魚Flutter企業級應用實踐
随着無線，IoT的發展，5G的到來，移動研發越發向多端化發展。傳統的基于Native＋Web＋服務端的開發方式，研發效率低下，顯然已經無法适應發展需要。
而Flutter是Google開源的跨端便攜UI工具包，除了具有非常優秀的跨端渲染一緻性，還具備非常高效的研發體驗，豐富的開箱即用的UI元件，以及跟Native媲美的性能體驗。由于它的衆多優勢，也使得Flutter成為了近些年來熱門的新技術。
在這本書中将詳細講解閑魚Flutter＆FaaS雲端一體化架構，和閑魚基于Flutter的架構演進與創新，學習一套全面的Flutter架構應用方案。
混合開發實踐指南
你将在這裡看到閑魚技術團隊利用Flutter技術改造和上線複雜業務的混合工程改造實踐、抽取Flutter依賴到遠端的實作細節、以及使用Plugin橋接擷取裝置資訊、使用基礎網絡庫等混合開發實踐指南。
這些實踐遍布閑魚各大業務線和應用場景，為你使用Flutter打造自己的研發體系探索一條實踐之路。
Flutter的深入進階教程
在獲得開源工具與開發實踐指南後，你還将在本書中學到Flutter的更多應用場景。
它們包括了如何低成本實作Flutter富文本、設計一個高準确率的Flutter埋點架構、Flutter外接紋理、可定制化的Flutter相冊元件等等深入進階内容。
如何下載下傳
Google Flutter 産品經理推薦，揭秘億級流量背後的技術秘籍，工程師不容錯過的學習寶典，包括開源工具、峰會直達、混合開發、深入進階等，點選
下載下傳即可獲得完整資源。
原文釋出時間為：2019-10-17
本文來自雲栖社群合作夥伴“
阿裡技術”，了解相關資訊可以關注“
”。