現在所在公司的App出於提高效率和代碼復用的原因, 采用 React Native 來開發, 已經過去了三年多了. 這中間, Weex, Flutter陸續登場, 最終舞台上留下的只剩下了 React Native 和 Flutter. 緊跟時代的潮流, 我司App現在開始了遷移到Flutter的過程, 其中遇到不少問題, 開發之余將在這里進行總結. 同時開發中的App的代碼已經准備開源(現在代碼還很簡陋, 敬請期待).
在這過程中我也有幸和幾個同行聊了一下App跨平台的選擇, 目前, React Native相對來說已經比較成熟穩定了, 在很多較大的公司之前也用的比較廣了. Flutter 相對來說還是比較新, 不管是Flutter代碼倉庫還是開發工具IDEA插件, 甚至Dart語言本身及其開發工具, 相對來說bug都有點多, 簡言之, 不是太穩定. 原因我想主要是這幾個方面:
1. Flutter 平台的參與團隊有點多, Dart 語言和 Flutter 工具平台本身都是Google的, 當然其實也有Google的Android團隊和下一代操作系統Fuchsia的參與, 但是對應的開發工具, 則被Jetbrains拿走了Dart語言開發插件, 導致很多問題出現的時候, 需要跨公司跨團隊溝通, 導致bug數量太多, 相比之下React Native基本上就是Facebook一家來主導的;
2. Dart 語言和Flutter的定位有些太廣泛, 目前支持App和Mac, Linux, Windows 平台的UI開發, 還要支持服務端開發, 功能多了, 對比 React Native 當然算是優勢了, 自然穩定性也就打個折扣了;
3. Flutter 的一些 API 尚處於快速迭代狀態, 導致新舊版本會出現不兼容問題;
4. Flutter由於使用了Dart作為基本語言, 基本上也就告別復用廣大的 NPM 庫了, 導致很多前端人員積極性不是很高, 推廣上略微有些困難;
5. Flutter 對 iOS 特性基本上是模擬狀態, 目前組件庫相對來說不成熟, 也不夠廣泛, 國內的生態都是以模擬iOS 界面為主;
6. Flutter 的萬物皆Widget設計理念, 在過於復雜的布局上, 由於樣式無法獨立控制, 感覺寫起來有點很頭疼, 一大片代碼的可讀性有點困難.
Flutter Web版當前還是beta階段, 由於兼容性的問題, 導致Flutter Web平台還是采用DOM模擬的方式來執行, 這點和React/VUE等模式比起來, 優勢就不是太明顯了.
說了這么多缺點, 談一下體會到的優點:
0. 性能和UI一致性! Flutter App 版相當於做了一套游戲引擎, 開發人員只是在寫引擎腳本, 界面都是獨立於桌面系統單獨進行渲染的(或許這是大部分公司入坑的主要原因);
1. Flutter 的UI庫對Material Design的支持非常好, 對安卓開發人員來說是個福音, 甚至支持暗黑模式切換;
2. Flutter 的依賴庫管理比 Node.js 好很多, 比較簡易, yaml 格式也比較容易加注釋;
3. Flutter 是目前唯一能看到三端統一希望的一套框架(iOS, Android, Mobile Web);
4. Dart庫是強類型語言, 可以減少很多不必要的bug;
5. 開發工具 Flutter IDEA 插件很好用而且免費, 對應的性能診斷工具也很猛, 相比起來 React Native並沒有特別好的開發工具(WebStorm需要加裝本人開發的 React Native Console 插件才完美);
6. Flutter的布局相對來說比較可控, 不如CSS那樣容易起歧義.
現在開始聊正題: React Native 遷移到 Flutter 的思路和實踐.
思路上, 我們的App不是很復雜, 需要解決下面幾個問題就可以完成遷移:
1. JSX, ES6語法到 Dart 的轉換, 遺憾的是還沒有自動化工具可用, 好一點的是語法差異不是太大;
2. 網絡請求和JSON轉換;
3. 常用的自定義仿iOS UI庫;
4. 組件化(多代碼倉庫);
5. 頁面間通信;
6. 和原生應用的通信問題以及原生組件的路由問題.
1. 語法的轉換
Dart和TypeScript非常相似, 區別是Dart是一種強語言類型的, 所有對象都繼承自Object, 雖然也可以用dynamic.
異步處理上, Dart 有 async, await和Future.
由於Dart是強類型的, 所以要注意類型轉換的問題. 參考: https://www.jianshu.com/p/a0854e897f50