Google發布了一個實驗性專案Hummingbird,要讓Google的UI工具包Flutter也能在網頁上執行。雖然受限於網頁瀏覽器沙盒化網頁應用程式,限制了部分功能,但是Flutter網頁引擎仍提供了Flutter引擎包括小工具與布局等多數的功能。Google預計在Hummingbird程式碼穩定後,便會在GitHub上開源。

Flutter的版圖已經從原本的行動裝置作業系統擴散,朝全平臺發展,Google正在進行的Flutter Desktop Embedding專案,雖然還在早期階段,但目標是要將Flutter帶上三大桌面作業系統,另外,Google也在樹莓派上測試Flutter,以展示對於不完整桌面的嵌入支援方法。而Google同時也釋出了實驗性專案Hummingbird,嘗試在網頁上執行Flutter。

Flutter是一個多層系統,對開發者來說,越高層越容易使用,並能以很少的程式碼,完成很多工作,而低層的系統雖然比較複雜,但是卻賦予開發者更多的控制能力。開發者可以存取Flutter引擎以上每一層的系統,當高層所提供的控制力不足時,便可以使用較低層的系統。Flutter引擎以最低階的函式庫dart:
ui向外開放功能,該函式庫能夠完全的控制小工具(Widgets)、物理、動畫和布局,把這些元素組合到螢幕中成為像素。

要讓Flutter在網頁上執行,Google提到,有三件事情要做,第一需要編譯Dart程式碼,因為Flutter是用Dart編寫的,要讓Flutter在網頁上執行,就需要在網頁上執行Dart。再來,便是選擇要在網頁上執行的Flutter子集,Flutter中有許多程式碼是專用於特定平臺,對於網頁平臺無用。第三件事,選擇足夠的網頁功能子集,Google提到,隨著發展網頁平臺會累加功能產生新功能,像是開發者能使用HTML+CSS、SVG、Canvas和WebGL繪製圖形。Google表示,決定支援特定Flutter系統層,便決定了要用的網頁技術。

最初Google製作了三個層次的原型,包括只支援小工具、小工具加上自定義布局以及Flutter網頁引擎。最後Google留下了第三種原型Flutter網頁引擎,該原型保留了dart:ui之上的所有層,並提供了在瀏覽器中運行的dart:
ui實作。Google認為,Flutter最有價值的功能之一,便是可以跨平臺移植,允許使用單一程式碼庫,編寫多個平臺的應用程式。Flutter網頁引擎設計原型提供平臺間,最高等級的程式碼重用。

以基於Flutter網頁引擎開發的應用程式,具有良好的互操作性。Flutter網頁應用程式可以完全呼叫現存網頁上的所有Dart函式庫,而且也完全支援Dart與JavaScript互相操作套件,包括package:js與dart:js。不過,Google表示,應該避免在Flutter中使用CSS,在頁面中任意使用CSS可能會導致Flutter不可預測的行為,且由於在設計時,Flutter需要在呈現畫面時知道所有布局屬性,但由於運作方式的限制,CSS的對Flutter來說就像黑盒子一般不可知。另外,為了保持Flutter程式碼跨平臺可移植性,避免使用CSS,還可以在Android和iOS上執行相同的程式碼。

目前Flutter還不支援嵌入現有的網頁應用程式中,Google正在研究要以<iframe>或shadow DOM的方式加入支援。而Google也尚未提供非Flutter元件嵌入Flutter網頁應用程式的支援,但這項需求正在討論中,在未來可能會增加。

Google提到,雖然他們的目標是要盡可能的把Flutter移植到網頁上,但並不代表Flutter應用程式移植到網頁上不需要修改程式碼,因為Flutter網頁應用程式仍是網頁應用程式,在瀏覽器被沙盒化,只能執行網頁瀏覽器允許的操作,因此當Flutter應用程式帶有像是ARCore的本機插件,必定無法在網頁上執行,同樣地,也沒辦法直接存取檔案系統或是低階網路權限。

Hummingbird中已經建構了網頁引擎來渲染大部分的Flutter Gallery,所有Material小工具、Material Theming,以及Shrine和Contact Profile已經都可以在網頁上執行,只剩下iOS小工具Cupertino尚未移植。Google將在程式碼穩定後,在GitHub上開源Hummingbird專案。

 

 


Advertisement

更多 iThome相關內容