作者：閒魚技術——蕭湘
flutter engage大會已經過去一段時間，閒魚團隊作爲國內較早大規模使用flutter的團隊，對flutter的每一次升級都感到興奮無比，網上已經有很多介紹大會的flutte 2特性的介紹文章，就不會贅述具體特性，今天會從開發者的角度如何看待以及評論這些新特性，評估這些特性在業務場景應用，最後對flutter未來的展望，將來還有哪些值得期待的功能。
flutter2新特性
全面支持Windows、MacOS、Linux、Web、iOS、Android六大平臺
本次flutter engage大會最大的亮點莫過於支持更多平臺，在原有移動端的基礎上，新增桌面、web端，從此flutter往真正的多平臺邁向了更加堅實的一步，flutter2看起來更像全新的引擎。
桌面平臺
flutter2全面支持目前主流的Windows、MacOS、Linux桌面平臺，其實對於fluttre架構而言，因底層使用skia本身就跨多平臺的緣故，從移動端擴展到桌面端是非常順暢。
優點：
開發者編寫一份Dart渲染代碼，便可以部署到多個平臺，是一個非常流暢的開發方式。
目前存在的問題
除了編寫Dart渲染代碼外，還需要關注工程所依賴的庫是否都完美的支持了桌面版平臺。谷歌聲稱其官方維護所有pub庫已經全部支持web/macos/windows等平臺，除此外社區其他的庫還需要等待作者們升級，要想流暢升級的開發者們可能還需要尚待時日。
想要遷移至桌面平臺的開發者們可以自行評估自己的工程所依賴的庫。如果依賴的庫大部分來自谷歌官方，且都支持了桌面平臺，較少平臺相關庫，升級過程應該是非常順暢的。
閒魚觀點
相比於業內其他成熟的跨平臺桌面開發框架，學習成本比Qt偏小（Dart語言），性能比electron好，但現成的組件沒有electron成熟，非常適合工具類的應用從移動端平滑的遷移到桌面端。
flutter web
flutter web最開始的設計思路時使用Dart代碼操作css或者Dom接口進行渲染，而到flutter2後已升級爲framework和渲染層完全隔離，使用同一份Dart代碼可以編譯成多個平臺。下面兩圖是基於操作系統的flutter架構和基於瀏覽器的flutter架構。
Windows/MacOS/Linux/iOS/Android架構
web架構
flutter web推薦場景
相同一份Dart代碼如今能跑在各種平臺下了，部署到服務器上也能跑在web端了，那麼在上面常見下使用flutter web是最合適的呢?
谷歌推薦使用flutter web的場景有
- Progressive Web Apps(PWA)
- Single Page Apps（SPA）
- 現有app遷移
PWA和SPA是相對於傳統web應用而言，傳統web網頁遵循請求-應答協議，網頁內容的刷新和加載伴隨着多次的網絡請求。而PWA和SPA相對則會請求少，或者請求時回包的數據。
比如PWA，可以簡單理解爲這是一種期望運行在各種設備，接近Native應用保持一致體驗的使用web應用。簡單而言這是在用web技術模擬原生應用，這個應用渲染大部分代碼無需網絡請求，即開即用，可以無網絡時離線運行，和普通原生功能一致，只是這是使用web技術編寫，運行在瀏覽器的應用。常見的例子是安裝在android設備的web twitter應用。
而SPA和PWA界限在於，SPA的界面代碼第一次需要網絡請求，而後每次的請求都是純數據的請求。
PWA應用原理
SPA應用原理
這三種場景使用flutter web的初衷是充分利用它相比傳統web網頁優越的渲染性能。如果使用flutter web來編寫非常經典的web應用則既失去了利用flutter web優越渲染性能，又沒法和傳統web一樣充分利用其成熟的生態。
如何遷移flutter web？
無需配置特別的設置，直接使用IDE（VSCode或者Android Studio）編寫flutter 工程後，使用flutter build web即可體驗。
但有以下幾點需要重點關注：
1、依賴的Flutter plugin需支持web
對於跨平臺的plugin，需要重新支持web
2、響應式佈局
相對於原有移動設備屏幕小，web端可能會運行在各種屏幕下，各種交互方式需要進行優化。
3、頁面跳轉/導航
頁面的跳轉從移動設備的單窗口，變成瀏覽器下的多窗口，多tab
4、桌面設備交互風格(鼠標、鍵盤)
支持瀏覽器下更加常用的鼠標鍵盤等的交互方式
5、渲染模式（HTML/CanvasKit）
需要根據業務需求選擇flutter web的渲染方式（HTML渲染方式安裝包小，性能較差，CanvasKit渲染方式安裝包大，性能好）
目前存在的問題
因爲瀏覽器的特性存在決定了，如要對一些於操作系統強相關的plugin庫進行web的特性支持時，會存在困難，比如文件系統，各種社交媒體登錄分享sdk等。因此進一步縮小了其使用的場景。
閒魚觀點：
flutter web的渲染性能雖不如基於操作系統架構的原生flutter應用，但優於能部署在服務器，但又比一般的web渲染性能稍好，所以非常適合對性能在有要求的web活動業務場景中使用。或作爲原生flutter界面崩潰時的一種業務降級兜底方案，在緊急場景業務充當救火隊員的角色。
支持嵌入式
大會中介紹了豐田公司把flutter遷移到了嵌入式場景，但大會中也沒有貼出詳細的進展以及相關特性。只能繼續期待了。
支持多屏設備
這是微軟爲將自家設備surface duo設備，開闢一個獨立的分支給flutter支持多屏特性。
支持的特性能很好的支持多屏設備的特點，比如：
- Extended Canvas: 雙屏共享一個大canvas
- List-Detail: 左列表，右詳情
- Two Page:多頁，看書應用
- Dual View:雙屏，相同內容不同角度的雙屏
- Companion Pane:左顯示，右配置
代碼樣例：
比如TwoPanel是新增的Widget，panel1、panel2傳入兩個不同屏幕的widget
Widget build(BuildContext context) {
return TwoPane(
pane1: _widgetA(),
pane2: _widgetB(),
paneProportion: 0.3,
panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.pane1,
);
}
但目前這個分支由微軟維護，暫未合入到flutter的主分支中
flutter github中開闢的兩個issue在專門跟進
（issue77156 ，issue24756）
，感興趣的可以去到下方鏈接瞭解概況
https://devblogs.microsoft.com/surface-duo/flutter-dual-screen-foldable/
Dart語言新特性
flutter2中除了新增平臺等新特性外，配套的Dart語言也推出新特性
Sound null safety
Sound null safety我們暫且稱爲空安全聲明，目的是通過顯式聲明可能爲null的變量，增加Dart語言的魯棒性。
因爲Dart語言變量可以存null或者具體的值，因此在日常的開發中可能因爲忘記賦值或者變量延遲賦值，導致訪問某個變量時爲null，導致程序運行時拋出exception。
這個功能推出後，可以從源碼級解決null異常導致的錯誤。
簡單的操作是在類型聲明後添加？以標識這個變量是可以爲null的。
- 如何遷移？
爲Dart了這個語法糖，對於已有的項目如何升級?谷歌對此也提供了配套的升級工具，只需要在工程目錄下使用dart migrate，就可以幫助你掃描整個工程中潛在的待替換的變量
優點
緩解因變量爲null而拋出exception而引發的白屏，用戶無法操作等體驗問題。
目前存在的問題
但是開發者對於現存工程，一旦Dart代碼一下子全部改造，無疑會增加系統風險，而且對於測試範圍也會是非常繁重的任務。
閒魚觀點：
這個特性很好的將風險提前暴露在了編碼階段，又能順帶解決神出鬼沒的null問題，性價比很高。但大規模改造也會引來問題，但這個特性非強制性的原因，爲解決大規模改造可能導致的系統性風險，可以採取分批改造的方法進行。
FFI(Foreign Function Interface)
動態庫函數調用特性。特性的目的是讓開發者更加方便的調用操作系統的動態庫。
這個特性其實很早就已經有了，如今正式轉正stable，開發者們可以放心使用了。
使用的方式也非常直觀
- 編譯某個平臺下的動態庫
- Dart代碼中加載動態庫，將Dart的函數和動態庫的函數綁定
- Dart調用已綁好的函數即可
FFI更多詳細看這裏https://pub.dev/packages/ffigen
優點
由靜態庫遷移到動態庫後，可以減少安裝包大小
相比於注入plugin模式去調用操作系統的接口，FFI更加友好，真正的按需加載，建議對於不常用頻次少的的系統調用可使用FFI，對於優化整個engine初始化的加載速度有很好益處。
閒魚觀點：
相對於舊的platform channel這種與C交互而言，FFI因需要動態庫加載和符號綁定，性能不佔優勢，開發者們在選擇這兩種技術方案時是要權衡的。
社區其他
混合棧的跳轉有官方支持了嗎？
對於衆多團隊而言，最初都是由原生的應用引入flutter，所以如何在原生界面和flutter界面跳轉變成開發者非常強需求的功能點，flutter boost的推出是爲解決混合棧界面跳轉而提出的解決方案，但該方案也並非完美，最大問題在於多個flutter界面跳轉時需要多開engine，無法共享engine中相同內存。針對這個問題flutter2中已經支持了engine多實例，但官方也說了，這是一個正式實驗中有風險的功能，但官方未提供不同技術棧之間的跳轉方案（iOS/Android->flutter，flutter->iOS/Android），但在官方對於這個問題的技術路線圖中也說到，以後這個特性是需要需要繼續開發的，但目前還是建議使用futter boost方案。
多flutter界面技術路線：https://docs.google.com/document/d/1fdKRufqUzQvERcqNIUSq-GdabXc4k8VIsClzRElJ6KY/edit#
細枝末節
除了以上的一些比較大的功能點外，還有一些提升效率小工具
- flutter fix:dart代碼分析工具，能高亮廢棄代碼等
- dartPad2.0: 瀏覽器運行flutter小工程，所見即所得，驗證小問題神器
- FFI GenFFI Dart代碼生成器，根據C接口批量生產FFI的Dart接口
展望
從作爲開發者的角度而言，flutter2擴展了更多的平臺，讓它在跨平臺的路上越走越遠。但與此同時，衆多平臺推出的同時，也會帶來更多細枝末節的小問題，小issues，同時從官方的下一步的動作看，接下來將會聚集在支持一個社區中響應度比較大的好幾個問題中
- 爲解決混合棧中內存過大而開發的多引擎實例特性
- 爲解決開發時出現的性能UI調試難的問題，在着力開發devtools工具
- dart語言因缺少命名空間，正在開發的類似特性等等
這些問題我們也在持續跟進中，如有進一步的進展，我們也會和大家持續的探討。
更多flutter相關技術熱點，歡迎大家持續關注閒魚技術。