Flutter動態化-Fair接入實踐記錄

語言: CN / TW / HK
時間 2023-02-09 14:15:13
主題:

Flutter動態化-Fair接入實踐記錄

一，動態化方案調研

目前移動端應用的版本更新， 最常見的方式是定期發版，無論是安卓還是iOS，都需要提交新的安裝包到應用市場進行稽核。稽核通過後，使用者在應用市場進行App的下載更新。而動態化， 就是不依賴更新程式安裝包， 就能動態實時更新頁面的技術。

因為定期發版更新應用的方式存在一些問題，比如:

  1. 稽核週期長， 且可能稽核不通過。 週期長導致發版本不夠靈活， 緊急的業務需求不能及時上線。
  2. 線上出現急需修復的bug時，需要較長修復週期，影響使用者體驗。
  3. 安裝包過大， 動輒幾十兆幾百兆的應用升級可能會讓使用者比較抗拒。
  4. 即使上線了，也無法達到全部使用者升級， 服務端存在相容多版本App的問題。

面對這些問題，如果能實現app增量、無感知更新，實現功能同步。無論是對公司還是使用者都是非常重要的需求，能實現app動態化更新就顯得非常重要，能很好的解決以上問題:

  1. 隨時實現功能升級。
  2. 線上bug可以實時修復，提高使用者體驗。
  3. 減小發版功能包體積。
  4. 發版後用戶同步更新，不存在舊版本相容問題。

為了解決以上痛點，團隊決定開啟Flutter動態化的調研，學習之路。

經過團隊近期的調研和學習，對業界Flutter動態化框架進行了如下總結:

  • MXFlutter: 使用js編寫dart, 其拋棄了 Dart 生態，維護困難。
  • MTFlutter: 佈局，邏輯都使用Dart,增加語法解析和執行時, 由於其未開源，無從深入研究。
  • Fair: 使用轉換AST+JS的方式，通過下發bundle 和 js實現熱更新。 代表框架 Fair。

綜上， MXFlutter官方已經停止更新， 而且需要使用js寫Dart，而這種方式讓開發效率受到極大影響； MTFlutter目前未開源，無從繼續研究。 所以在接下來團隊開始著重調研和嘗試使用 Fair。

二，Fair接入初體驗

這裡參考了Fair團隊出品的 Fair 配套工具鏈介紹。通過使用Fair配套工具鏈，體驗了完整的Fair工程的建立流程。

步驟一：工具安裝

安裝 Faircli 命令列工具

dart dart pub global activate faircli

安裝 AS 外掛

暫時支援本地安裝，後續會發布到外掛市場。FairTemplate-1.0.0.zip 外掛下載

  • 本地安裝：開啟AS選單欄/Android Studio/Preference/Plugins/Install Plugin from Disk... 安裝後即可使用。

準備工作完成後，下面進入開發使用流程。

步驟二：Faircli-工程建立

工程分為載體工程及動態化工程。動態化的功能模組需要在動態化工程中開發。載體工程提供 bundle 下載、載入及基礎能力支援。

建立動態化工程

dart faircli create -n dynamic_project_name

dynamic_project_name: 動態化工程名

建立載體工程

dart faircli create -k carrier -n carrier_project_name

carrier_project_name: 載體工程名

步驟三：IDE外掛-功能開發

模板程式碼使用

image-20221213163802206

選擇程式碼模板，生成對應的程式碼檔案。

image-20221213165015572

在生成的程式碼中，進行二次開發。

一鍵打包

功能開發完成後，可使用 AS 外掛進行一鍵打包。

image-20221213165212957

步驟四：啟動本地熱更新服務

打包完成之後，可啟動本地熱更新服務，進行開發功能預覽。

img

當控制檯列印如下資訊，表示成功啟動本地熱更新服務。

img

開發者選項

執行載體工程，進入開發者選項頁面。

image-20221213165333161

輸入 host，載入 bundle 列表。選擇對應的 bundle，進行功能預覽。

手機搖一搖，可觸發重新載入功能。

步驟五：IDE外掛-上傳 bundle 到線上環境

image-20221213165429900

根據文章中的步驟，和官方群裡及時的疑問解答， 我們構建了fair載體工程以及本地服務工程。

從建立載體工程，建立動態化工程，到編寫FairWidget的整個流程。 以及在更新程式碼後， 使用外掛工具重新生成產物，並啟動本地服務，體驗了完整的熱更新流程。

三，對於業務頁面

Screenshot_20221222_140723.png

四，配套開發工具推薦

Faircli配套工具鏈

官方為了讓開發者快速上手，降低接入門檻， 解決在接入過程中的痛點。 Fair團隊開發了Faircli配套工具鏈，主要包含三個部分:

  • 工程建立：快速搭建Fair載體工程及動態化工程。
  • 模板程式碼：提供頁面及元件模板。
  • 本地熱更新：線下開發使用，實現開發階段快速預覽Fair動態化功能。

在安裝了工具鏈提供的dart命令列工具及AS外掛後， 通過建立模板， 構建產物， 本地啟服務，體驗熱更新功能，開發者可以輕鬆接入並體驗Fair。

Fair語法檢測外掛

官方為了讓開發者在Fair開發過程中，出現不正確或者不支援的語法問題。 開發了配套外掛去提示使用者使用Fair語法糖。

檢視以下示例:

1,build方法下if的程式碼檢測，及提示引導資訊

44b58320-e608-420f-854f-799b5bf03cf5image

2,點選more action 或者 AS程式碼提示快捷鍵

41094a86-2aea-43e6-b7f0-69aef1c653c0image

3,根據提示點選替換

image.png

通過外掛，在編寫fair過程中，可以快速識別並解決不支援的語法問題。 提高開發Fair效率。

熱更新平臺

官方提供了FairPushy的熱更新平臺，可以clone部署到自己伺服器，就可以實現平臺搭建。這裡記錄一下本人搭建熱更新平臺時所踩過的坑吧。

1、我們需要建立一個本地的mysgl資料庫，注意這個資料庫一定不能用最新的8.x的版本，因為fair pushy連結資料庫的外掛貌似不支援這麼高版本的驗證。方式，所以會連結失敗。這個問題我倒騰了半天才解決。

2、上傳patch時，選擇本地檔案的功能在pushy的專案裡是不包含的，需要我們自己來接入上傳方式才行，當你接入完前後端準備上傳patch時，選擇本地檔案總是失敗，那不是你的錯，是還沒有整合這個功能。如果你沒有接本地上傳功能，也可以通過先將patch上傳到我們的指定雲端儲存，再將連結新增到 pushy平臺來發布。

3、在pushy搭建完成後我們要在app裡整合pushy的sdk 來下載patch。當初始化patch時我們需要傳入一個updateUrl，這個updateUrl如果不說明可能大家都不知道這是什麼東西。

``` FairPushy.init( appID:'30', updateUrl:"http://localhost/app/patch", debug:true);

將上面的updateUrl的http://localhost換成你自己pushy server端域名即可

```

4、這個問題大家不一定都能碰到，如果你的服務端也是用docker來部署的，那就要學習一下dockerfile的編寫才行，而且在下載fltter sdk時需要翻牆，當 然也可以從本地匯入。這主要就是docker的學習了。如果你的服務端不需要 docker那就直接用一個伺服器來搞定前後端就行啦。

5、在部署完前後端後，我們需要將前端dart_dio.dart檔案中的 static const StringbaseUrl='http://localhost/'; 變數中的http://localhost 換成對應的server端的域名才行。這樣後端才能為前端提供服務。

五，總結

通過近期對Fair在Flutter動態化方向上的探究方案。 發現相比較於業界其他Flutter動態化方案，有著較大的優勢。

Fair通過Fair Compiler工具對原生Dart原始檔的自動轉化，使專案獲得動態更新Widget Tree和State的能力。目前官方維護力度較大， 社群活躍，並且有比較全面的Fair生態工具。 期待 Fair 團隊可以解決在開發Fair過程中一些體驗問題，如語法支援不全等， 讓Fair成為真正能夠讓開發者可以快速接入，能夠達到和正常開發Flutter接近的體驗。 為廣大Flutter開發人員解決動態化的痛點。

「」