解讀 Flutter 全平臺開發的誤解與偏見

戀貓de小郭發表於2021-03-11

Flutter 2.0 釋出之後,Web 版本進入了 stable 分支,Desktop 版本也可以在 stable 分支通過 snapshot beta 映象開始預覽使用,導致最近關於 “Flutter 制霸全平臺” 之類的話題又被炒作起來,所以本篇主要對這個話題做一次解答。

1、Flutter 制霸全平臺

谷歌官方在 Flutter 2.0 的釋出上說過:“每個應用程式都可以通過 Flutter 2 進行免升級,因為它們現在可以在不重寫的情況下擴充套件到 Desktop 和 Web ” 。

事實上 Flutter 在 Android 和 iOS 平臺上的相容和適配確實很不錯,但是對於 Web 和 Desktop 目前來說顯然不是如此,“不重寫下擴充套件”這話估計谷歌自己都不信。

首先 “不重寫的情況下擴充套件到 Desktop 和 Web” 就很不現實 ,為什麼呢我們後面分析,這裡先說下 Flutter 的核心設計,瞭解過 Flutter 實現原理的應該知道, Flutter 的核心設計是 :

平臺只需要提供 Sufrace ,然後剩餘的控制元件和渲染邏輯都由 Engine 來完成,而 Engine 直接於 GPU 互動,控制元件也和所在平臺沒有關係,所以 Flutter 可以有不錯的效能和跨平臺能力。

1.1、 Web

但是 Flutter 在 Web 上卻並非完全如前面所述那樣,因為 Web 下的瀏覽器 JS/CSS/HTML 霸權是不可撼動的,所以 Flutter 一開始在 Web 上會通過 HtmlCanvas 來轉化為瀏覽器的原生標籤。

這有什麼問題?這就表示 Flutter 需要和 “Web 原生有不同程度的耦合關係”,從而造成了程式碼在不同平臺的表現形式和 API 的相容能力都會有所不同,而 Flutter 應對 Web 的這種情況,使用了大量的自定義標籤,從而導致在大小、效能和體驗上都還不是很好。

image.png

當然 Flutter 還提供了另外一種 Web 渲染能力,更接近 Mobile 和 Desktop 的 CanvasKit 渲染模式,CanvasKit 相當於是基於 WebGL 版本的 Skia 渲染,這種模式下效能肯定會更好,但是需要做的相容和適配工作量也更大。

flutter web 編譯是可以通過 --web-renderer 指定渲染模式,現在模式是 auto 模式,也就是在手機瀏覽器使用 HTML renderer, 在 PC 瀏覽器使用 CanvasKit renderer。

當然說那麼多我的意思並不是為了貶低 Web ,這裡只是想表達 Flutter Web 並不是也不能幹掉前端開發,更不足以挑戰 React、Vue 的地位,它更多的是 Flutter 的一種能力擴充:

Flutter 開發者恰好寫了一個 App 或者 Desktop 的頁面,那麼順手把它打包成 Web 用起來,雖然體驗不好但是又不是不能用的場景。

所以至少短時間內 Flutter Web 在前端領域就是“弟弟”,別說制霸了,能猥瑣發育就很難得了。

1.2、Desktop

在 PC 領域 Flutter 表現還是可以的,因為它和手機端具備類似的渲染邏輯,而對於 PC 端 Flutter 主要的考驗還是控制元件體驗和外掛支援的問題上。

因為不同於手機,桌面端大部分時候介面佈局和手機端本身就存在較大差異,甚至桌面端的介面通常是可大小調節,另外桌面端應用的輸入和控制元件焦點主要來源於滑鼠,所以迴歸到最前面的那段話“不重寫的情況下擴充套件到 Desktop 和 Web” 就很不現實。

那麼有沒有辦法讓介面同時適配 PC 和 Mobile 呢?還真有,比如 ResponsiveFramework 就是用於實現這種需求的,當然這種實現需要消耗效能和時間成本。

%E6%9C%AA%E5%91%BD%E5%90%8D.gif

另外 PC 和 Mobile 還是存在一些通用的場景,比如實現型別 2B 產品的像飛書系列的應用,在關於小程式的功能和那個,可以做到同一套邏輯在手機和 PC 端更有效率的同步釋出,同時還可能擁有不錯的效能。

最後 Flutter 對於 ReorderableListViewTextFieldTextFormField 等控制元件上也在 2.0 開始增加了增對桌面端的體驗,不過還是那句話,Flutter 在 PC 領域的路才剛剛開始,制霸是不可能制霸的,不過在 PC 端的未來確實會比 Web 更明朗。

經歷過多端開發的才明白一套程式碼在多端上通用的成本有多高,跨平臺能夠在 Android 和 iOS 上高效能低耦合的實現已經很難得了,如果想無縫擴充到 Web 和 Desktop 只會自己挖坑埋自己,所以部分邏輯全平臺,實際專案分平臺我覺得才是 Flutter 多平臺的未來

相關文章