Flutter beta3 使用感受

作為一名iOS開發者, 受到了來自前端技術威脅輪的影響, 因此會時常關注各種新技術, 也去一一學習了React Vue等前端框架. 最近(其實已經出來一段時間了,不過谷歌2018大會帶火活了一吧)Flutter作為谷歌欽定的下一代移動作業系統Fuchsia的UI框架, 一下子成了眾人關注的香饃饃.

最近隨著Flutter官網教程的完善,我也試著學習了一下Dart以及Flutter框架.(注: Flutter還在Beta階段) 搭建開發環境非常簡單, 官網(https://flutter.io)提供了Windows、Mac OS、Linux三個平臺的詳細搭建教程(官網還細心的提供了中國區的映象).

以筆者使用的Mac OS為例:

1. 下載SDK
2. 解壓到任意目錄(建議放到一個固定的位置)
3. 更新系統變數, 方便直接在終端使用Flutter命令 (export PATH=pwd/flutter/bin:$PATH)

至此Flutter最基礎的開發環境就搭建好了,不過我們還缺少一個得心應手的編輯器. 我個人使用的是VS Code, 這也是Flutter官方推薦的編輯器之一.

開啟VS Code, 下載Flutter外掛(可能需要重新載入). Shift+Command+P開啟命令皮膚, 輸入Flutter:New Project建立專案. 然後它會一步一步提示你設定專案的名字、存放的位置.而這一切都是用了VS Code最新的技術, 都在命令皮膚中實現. 這個體驗要比在終端的體驗好很多.

這裡我的第一個感受就是,Flutter團隊對於開發環境的支援非常好. 官方的VS Code外掛已經非常強大, 從下載SDK到半視覺化工程建立, 都極大降低了初學者構建專案的門檻.(想起自己剛開始學RN時,光用腳手架構建專案就花了一個晚上...)

構建完專案之後, 首先看到的就是main.dart檔案.

Flutter使用了一個非常偏門的Dart語言, 據說是因為當時的Dart團隊就在Flutter開發團隊旁邊, 因此可以給到最大限度的技術支援. 當然可能還有很多其他原因, 但不可否認這也是Flutter最大的爭議點之一. Dart語言咋看上去其實並不難懂, 擁有現代計算機語言都有的簡潔語法、新特性, 相信有Swift基礎的同學上手應該不難. 當然如果你有ES6基礎閱讀起來就會更熟悉. 不過隨著你閱讀原始碼的深入, 你就會被無數的巢狀所搞暈.

這在任何一個語言中都是一場災難. 在我嘗試寫幾個控制元件的時候,寫到第三層我就幾乎無法準確定位我當前的UI層級(當然如果你的Widget層級太多,也許就是抽離子元件的時候了). 不過Flutter團隊顯然是發現了這個問題, 因此他們會自動在相應的層級後面加上該元件的名字(灰色的部分).這部分解決了層級混亂的問題, 但還需要適應一段時間. 我還是希望官方能夠提供更加友好的UI程式碼風格, 尤其是沒有視覺化UI構建的情況下.

預設的Demo已經提供了一些注視, 通過閱讀註釋你可以對Flutter的運作方式有一個大體的瞭解. 如果你之前有接觸過React或者Vue, 你可能會發現他處理資料和UI的方式和前者有極大的相似之處.甚至連setState等的方法名稱都一摸一樣. 很明顯Flutter使用了現在在前端大為流行的響應式程式設計風格, 而且Flutter與前端技術的相似之處還遠不止如此, 比如下面提到的Hot Reload.

Hot Reload(熱載入)這個在前端極其重要的技術能夠極大的加速開發的流程, 這是我們以往在純原生開發中不可想象的. 當你在使用Flutter的時候, 你就像在寫一個網頁一樣, 任何修改都能快速的反應到螢幕上. 不過目前Hot Reload在穩定性上還有一些問題. 另外, 測試環境下Hot Reload生成的UI元件效能不高, 但真正構建程式時會去除Hot Reload使元件效能最大化.

說到效能, 這也是Flutter引以為豪的特點之一. 不同於純Web, Flutter最終生成的是Native程式碼, 在執行效率上要高出不少. 不同於RN,他使用了自己的一套渲染引擎, 完全撇開了不同平臺不同渲染框架帶來的相容問題, 真正實現了一套程式碼搞定多平臺. 最最最重要的是, 他的效能要好於RN, 這也是將來能否取代RN的關鍵因素之一.

上面提到了多平臺相容, 這個美好的設想經歷了多次失敗的嘗試(Cordova、App Comparison)之後, 似乎終於要被Flutter修成正果. 從目前的體驗來看, Flutter確實做到了一份程式碼多個平臺. 這要歸功於他自己的渲染引擎. 可以想象, 如果將來出了其他平臺(比如Fuchsia, 甚至是現在的Windows和Mac OS), 如果能夠將這套渲染引擎移植, 那就可以實現更多端的覆蓋了.

不過這也沒有想象中那麼美好. 首先目前Flutter提供的基礎控制元件都是Material Design風格的, 這在apple產品上顯得尤為突兀. 不是說Material Design不好, 但在一款iOS產品上Material Design風格的app似乎是在告訴使用者你用的產品和其他app是不同的(這在RN應用上也是一樣的問題).

其次, 你渲染引擎再好, 能否跟原生控制元件PK還是個未知數.並不是說你能跑60幀就OK了, UITableView的回收機制, 高效的磨砂透明渲染,等等目前似乎都沒有. 最後的最後, Flutter能夠應付的是UI以及簡單的基礎功能. 當你需要處理圖片、音視訊, 對功能進行高度定製化修改的時候, 你必然離不開原生程式碼.

但是, Flutter的優點足夠讓大部分前端以及移動開發人員學習他了.所以你還在等什麼呢?

最後, Flutter中文網(https://flutterchina.club)已經對英文官網進行了全程翻譯, 再次降低了Flutter入門門檻. 官網的教程真的對新手非常友好, 是我自學這麼多框架以來為數不多不需要參考其他資料或視訊就可以迅速上手的教程.