聊聊FlutterEngage大會中的特性落地

做者：閒魚技術——蕭湘

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便可體驗。

但有如下幾點須要重點關注：

一、依賴的Flutter plugin需支持web 對於跨平臺的plugin，須要從新支持web

二、響應式佈局 相對於原有移動設備屏幕小，web端可能會運行在各類屏幕下，各類交互方式須要進行優化。

三、頁面跳轉/導航 頁面的跳轉從移動設備的單窗口，變成瀏覽器下的多窗口，多tab

四、桌面設備交互風格(鼠標、鍵盤) 支持瀏覽器下更加經常使用的鼠標鍵盤等的交互方式

五、渲染模式（HTML/CanvasKit） 須要根據業務需求選擇flutter web的渲染方式（HTML渲染方式安裝包小，性能較差，CanvasKit渲染方式安裝包大，性能好）

目前存在的問題

由於瀏覽器的特性存在決定了，如要對一些於操做系統強相關的plugin庫進行web的特性支持時，會存在困難，好比文件系統，各類社交媒體登陸分享sdk等。所以進一步縮小了其使用的場景。

閒魚觀點：

flutter web的渲染性能雖不如基於操做系統架構的原生flutter應用，但優於能部署在服務器，但又比通常的web渲染性能稍好，因此很是適合對性能在有要求的web活動業務場景中使用。或做爲原生flutter界面崩潰時的一種業務降級兜底方案，在緊急場景業務充當救火隊員的角色。

支持嵌入式

大會中介紹了豐田公司把flutter遷移到了嵌入式場景，但大會中也沒有貼出詳細的進展以及相關特性。只能繼續期待了。

支持多屏設備

這是微軟爲將自家設備surface duo設備，開闢一個獨立的分支給flutter支持多屏特性。

支持的特性能很好的支持多屏設備的特色，好比：

1.Extended Canvas: 雙屏共享一個大canvas2.List-Detail: 左列表，右詳情3.Two Page:多頁，看書應用4.Dual View:雙屏，相同內容不一樣角度的雙屏5.Companion Pane:左顯示，右配置

代碼樣例：

好比TwoPanel是新增的Widget，panel一、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[1] ，issue24756[2]） ，感興趣的能夠去到下方連接瞭解概況 devblogs.microsoft.com/surface-duo… [3]

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，開發者們能夠放心使用了。

使用的方式也很是直觀

1.編譯某個平臺下的動態庫2.Dart代碼中加載動態庫，將Dart的函數和動態庫的函數綁定3.Dart調用已綁好的函數便可

FFI更多詳細看這裏pub.dev/packages/ff…

優勢

由靜態庫遷移到動態庫後，能夠減小安裝包大小

相比於注入plugin模式去調用操做系統的接口，FFI更加友好，真正的按需加載，建議對於不經常使用頻次少的的系統調用可以使用FFI，對於優化整個engine初始化的加載速度有很好益處。

閒魚觀點： 相對於舊的platform channel這種與C交互而言，FFI因須要動態庫加載和符號綁定，性能不佔優點，開發者們在選擇這兩種技術方案時是要權衡的。

社區其餘

混合棧的跳轉有官方支持了嗎？

對於衆多團隊而言，最初都是由原生的應用引入flutter，因此如何在原生界面和flutter界面跳轉變成開發者很是強需求的功能點，flutter boost的推出是爲解決混合棧界面跳轉而提出的解決方案，但該方案也並不是完美，最大問題在於多個flutter界面跳轉時須要多開engine，沒法共享engine中相同內存。針對這個問題flutter2中已經支持了engine多實例[4]，但官方也說了，這是一個正式實驗中有風險的功能，但官方未提供不一樣技術棧之間的跳轉方案（iOS/Android->flutter，flutter->iOS/Android），但在官方對於這個問題的技術路線圖中也說到，之後這個特性是須要須要繼續開發的，但目前仍是建議使用futter boost方案。

多flutter界面技術路線：docs.google.com/document/d/…

細枝末節

除了以上的一些比較大的功能點外，還有一些提高效率小工具

•flutter fix[5]:dart代碼分析工具，能高亮廢棄代碼等•dartPad2.0[6]: 瀏覽器運行flutter小工程，所見即所得，驗證小問題神器•FFI Gen[7]FFI Dart代碼生成器，根據C接口批量生產FFI的Dart接口

展望

從做爲開發者的角度而言，flutter2擴展了更多的平臺，讓它在跨平臺的路上越走越遠。但與此同時，衆多平臺推出的同時，也會帶來更多細枝末節的小問題，小issues，同時從官方的下一步的動做看，接下來將會彙集在支持一個社區中響應度比較大的好幾個問題中

•爲解決混合棧中內存過大而開發的多引擎實例特性•爲解決開發時出現的性能UI調試難的問題，在着力開發devtools工具•dart語言因缺乏命名空間，正在開發的相似特性等等

這些問題咱們也在持續跟進中，若有進一步的進展，咱們也會和你們持續的探討。 更多flutter相關技術熱點，歡迎你們持續關注閒魚技術。

References

[1] issue77156: github.com/flutter/flu…
[2] issue24756: github.com/flutter/eng…
[3] devblogs.microsoft.com/surface-duo… : devblogs.microsoft.com/surface-duo…
[4] engine多實例: flutter.dev/docs/develo…
[5] flutter fix: flutter.dev/docs/develo…
[6] dartPad2.0: dartpad.dev/flutter
[7] FFI Gen: pub.dev/packages/ff…