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入門門檻. 官網的教程真的對新手很是友好, 是我自學這麼多框架以來爲數很少不須要參考其餘資料或視頻就能夠迅速上手的教程.