2019 Joyy Flutter 總結

YYDev發表於2020-01-20

前言

從2017年5月份Flutter釋出第一個開發版本,再到2018年12月的第一個穩定版本,Flutter在2019年迎來了各方面爆發式增長。回顧前陣子GitHub剛釋出的2019年總結資料:

  • GitHub 開源貢獻者數量位居第三

2019 Joyy Flutter 總結

  • GitHub 開源貢獻者增長量位居第二

2019 Joyy Flutter 總結

Joyy從2018年開始關注Flutter技術興起及Google對其支援的動向,並運用到實際專案之中:

  • 為Flutter落地到業務鋪路,實現了16個基礎中介軟體,覆蓋公司內部大部分基礎服務呼叫。
  • 對外開源Flutter UIflutter_orm_pluginflutter-custom-dialogflutter-animation-setSVGAPlayer
  • Flutter動態化探索
  • IOS包體積壓縮探索
  • Flutter的跨平臺特性與中臺理念契合:直播間中臺Flutter解決方案以及IM中臺Flutter解決方案
  • 在Joyy內網部落格以及Joyy掘金賬號釋出多篇Flutter相關技術文章。

開源專案

flutter-ui

開源Flutter UI元件專案,配套對應文章以及官方翻譯。專案自2019年1月28日開始啟動,到現在積累了1.1k star。

2019 Joyy Flutter 總結

flutter_orm_plugin

flutter_orm_plugin 是一款高效能ORM操作庫,解決了Flutter目前資料持久化儲存方案不足的痛點。

  • Android orm框架測試對比:

2019 Joyy Flutter 總結

2019 Joyy Flutter 總結

  • IOS orm框架測試對比:

2019 Joyy Flutter 總結

2019 Joyy Flutter 總結

瞭解flutter_orm_plugin更多細節:

移動端orm框架效能測評

手把手教你在Flutter專案優雅的使用ORM資料庫

手把手教你在Flutter專案優雅的使用ORM資料庫--下篇

包地址

flutter-custom-dialog

flutter-custom-dialog 對全域性彈窗的功能封裝,用語義化的方式對彈窗內部的內容進行填充,目前提供的功能:

  1. 支援少數語義化元件的方法,填充彈窗內部的元件內容
  2. 支援自定義語義化元件的方法,供開發者自由填充彈窗內部的元件內容
  3. 支援設定彈窗背景色、前景色、位置、動畫、點選外部消失等功能,具體看下文
  4. 支援無Context呼叫彈窗

dialog_demo

2019 Joyy Flutter 總結
divider
2019 Joyy Flutter 總結
body
2019 Joyy Flutter 總結
head&body
2019 Joyy Flutter 總結
listTile
2019 Joyy Flutter 總結
ListRadio
2019 Joyy Flutter 總結
progress
2019 Joyy Flutter 總結
progress&body
2019 Joyy Flutter 總結
bottom sheet
2019 Joyy Flutter 總結
notice
2019 Joyy Flutter 總結
pop menu
✅ Support for custom locations

dialog_gravity

2019 Joyy Flutter 總結
bottom
2019 Joyy Flutter 總結
top
2019 Joyy Flutter 總結
left
2019 Joyy Flutter 總結
right
2019 Joyy Flutter 總結
center
2019 Joyy Flutter 總結
left bottom
2019 Joyy Flutter 總結
left top
2019 Joyy Flutter 總結
right bottom
2019 Joyy Flutter 總結
right top

dialog_animation

2019 Joyy Flutter 總結
scaleIn
2019 Joyy Flutter 總結
fadeIn
2019 Joyy Flutter 總結
rotateIn
2019 Joyy Flutter 總結
customIn
✅ Support for custom animations

如需瞭解flutter-custom-dialog更多細節,請訪問倉庫地址

flutter-animation-set

flutter-animation-set簡化Flutter交錯動畫。用動畫配置的形式,通過時間線去驅動Flutter的交錯動畫。你可以

  1. 使用Flutter Animation Set現有的動畫元件
  2. 使用Flutter Animation Set去建立新的動畫元件
  3. 貢獻你的Flutter Animation Set動畫元件
  4. 在專案的example中觀看所有的Curves動畫效果

transition_animations

2019 Joyy Flutter 總結
YYRotatingPlane
2019 Joyy Flutter 總結
YYDoubleBounce
2019 Joyy Flutter 總結
YYWave
2019 Joyy Flutter 總結
YYWanderingCubes
2019 Joyy Flutter 總結
YYFadingFour
2019 Joyy Flutter 總結
YYFadingCube
2019 Joyy Flutter 總結
YYPulse
2019 Joyy Flutter 總結
YYThreeBounce
2019 Joyy Flutter 總結
YYThreeLine
2019 Joyy Flutter 總結
YYCubeGrid
2019 Joyy Flutter 總結
YYRotatingCircle
2019 Joyy Flutter 總結
YYPumpingHeart
2019 Joyy Flutter 總結
YYRipple
2019 Joyy Flutter 總結
YYRotateLine
2019 Joyy Flutter 總結
YYCubeFadeIn
2019 Joyy Flutter 總結
YYBlinkGrid

behavior_animations

2019 Joyy Flutter 總結
YYFadeButton
2019 Joyy Flutter 總結
YYSingleLike
2019 Joyy Flutter 總結
YYLove
2019 Joyy Flutter 總結
YYSpringMenu
2019 Joyy Flutter 總結
YYFoldMenu

如需瞭解flutter-animation-set更多細節,請訪問倉庫地址

SVGAPlayer-Flutter

SVGAPlayer 是一個輕量的動畫渲染庫。你可以使用工具Adobe Animate CC 或者 Adobe After Effects 中匯出動畫檔案,然後使用 SVGAPlayer 在移動裝置上渲染並播放。

SVGAPlayer-Flutter 通過 Flutter CustomPainter 原生渲染動畫,為您帶來高效能,低成本的動畫體驗。

如需瞭解SVGAPlayer更多細節,請訪問官方網站,或開源倉庫

基礎中介軟體

為了讓Flutter可以落地到更多應用,中介軟體團隊致力於基礎中介軟體的開發,讓Flutter可以無縫對接到公司的基礎服務。

應用落地

在基礎中介軟體完備的前提下,因Flutter跨平臺特性,UI和互動只需要一端開發即可,相比起原來需要兩端人力,節省大約40%人力成本。

2019 Joyy Flutter 總結

技術探索

探索動態化方案

作為跨平臺解決方案,動態化算是一個比較重要的功能之一,通過查資料&翻文件&技術群交流討論,發現目前在Flutter中主要有以下三種實現方案:

  1. 類似React Native 框架。
  2. 替換Flutter編譯產物。
  3. 頁面動態元件框架。
方案名稱 效能 成本 動態性 兩端是否一致
類似RN的方案 影響較大 很高 較高 一致
動態元件方案 影響較小 一般 有限 一致
編譯產品方案 影響較小 較小 很高 不一致

如需瞭解更多細節,可以檢視本賬號之前發過的文章:Flutter 動態化方案探索

探索減少包體體積方案

目前通過深度定製Flutter產物生成流程和engine的載入流程,實現IOS包體積壓縮近 1/3 包體積,後續會發布單獨推文。

總結

2019年,雖然目前Flutter專案中仍然有多個待解決的問題。但在多個團隊共同努力下,克服了主要困難,最終把Flutter落地到生產專案之中。過程有所沉澱,為之後的開發鋪平一段道路。

2020年我們將會繼續對Flutter動態化、減少包體積這些痛點問題繼續探索,爭取落實到業務之中為業務帶來更大的人效收益。

即將release的Flutter for Web,Flutter for desktop,還有2020即將釋出的Fuchsia系統,將會給Flutter的未來帶來更大想象空間。

KM(內部版)瞭解更多

相關文章