2019 Joyy Flutter 总结

从2017年5月份Flutter发布第一个开发版本,再到2018年12月的第一个稳定版本,Flutter在2019年迎来了各方面爆发式增长。回顾前阵子GitHub刚发布的2019年总结数据:

  • GitHub 开源贡献者数量位居第三
  • GitHub 开源贡献者增长量位居第二

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。

flutter_orm_plugin

flutter_orm_plugin 是一款高性能ORM操作库,解决了Flutter目前数据持久化存储方案不足的痛点。

  • Android orm框架测试对比:
  • IOS orm框架测试对比:

了解 flutter_orm_plugin 更多细节:

  1. 移动端orm框架性能测评

  2. 手把手教你在Flutter项目优雅的使用ORM数据库

  3. 手把手教你在Flutter项目优雅的使用ORM数据库--下篇

  4. 包地址

flutter-custom-dialog

flutter-custom-dialog 对全局弹窗的功能封装,用语义化的方式对弹窗内部的内容进行填充,目前提供的功能:

  1. 支持少数语义化组件的方法,填充弹窗内部的组件内容
  2. 支持自定义语义化组件的方法,供开发者自由填充弹窗内部的组件内容
  3. 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能,具体看下文
  4. 支持无Context调用弹窗
dialog_demo
divider
:white_check_mark:
body
:white_check_mark:
head&body
:white_check_mark:
listTile
:white_check_mark:
ListRadio
:white_check_mark:
progress
:white_check_mark:
progress&body
:white_check_mark:
bottom sheet
:white_check_mark:
notice
:white_check_mark:
pop menu
:white_check_mark: Support for custom locations
dialog_gravity
bottom
:white_check_mark:
top
:white_check_mark:
left
:white_check_mark:
right
:white_check_mark:
center
:white_check_mark:
left bottom
:white_check_mark:
left top
:white_check_mark:
right bottom
:white_check_mark:
right top
:white_check_mark:
dialog_animation
scaleIn
:white_check_mark:
fadeIn
:white_check_mark:
rotateIn
:white_check_mark:
customIn
:white_check_mark: Support for custom animations

如需了解 flutter-custom-dialog 更多细节,请访问 仓库地址

flutter-animation-set

flutter-animation-set 简化Flutter交错动画。用动画配置的形式,通过时间线去驱动Flutter的交错动画。你可以

Flutter Animation Set
Flutter Animation Set
Flutter Animation Set
Curves
transition_animations
YYRotatingPlane
:white_check_mark:
YYDoubleBounce
:white_check_mark:
YYWave
:white_check_mark:
YYWanderingCubes
:white_check_mark:
YYFadingFour
:white_check_mark:
YYFadingCube
:white_check_mark:
YYPulse
:white_check_mark:
YYThreeBounce
:white_check_mark:
YYThreeLine
:white_check_mark:
YYCubeGrid
:white_check_mark:
YYRotatingCircle
:white_check_mark:
YYPumpingHeart
:white_check_mark:
YYRipple
:white_check_mark:
YYRotateLine
:white_check_mark:
YYCubeFadeIn
:white_check_mark:
YYBlinkGrid
:white_check_mark:
behavior_animations
YYFadeButton
:white_check_mark:
YYSingleLike
:white_check_mark:
YYLove
:white_check_mark:
YYSpringMenu
:white_check_mark:
YYFoldMenu
:white_check_mark:

如需了解 flutter-animation-set 更多细节,请访问 仓库地址

SVGAPlayer-Flutter

SVGAPlayer 是一个轻量的动画渲染库。你可以使用 工具Adobe Animate CC 或者 Adobe After Effects 中导出动画文件,然后使用 SVGAPlayer 在移动设备上渲染并播放。

SVGAPlayer-Flutter 通过 Flutter CustomPainter 原生渲染动画,为您带来高性能,低成本的动画体验。

如需了解 SVGAPlayer 更多细节,请访问 官方网站 ,或 开源仓库

基础中间件

为了让Flutter可以落地到更多应用,中间件团队致力于基础中间件的开发,让Flutter可以无缝对接到公司的基础服务。

应用落地

在基础中间件完备的前提下,因Flutter跨平台特性,UI和交互只需要一端开发即可,相比起原来需要两端人力,节省大约40%人力成本。

技术探索

探索动态化方案

作为跨平台解决方案,动态化算是一个比较重要的功能之一,通过查资料&翻文档&技术群交流讨论,发现目前在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的未来带来更大想象空间。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章