GMTC-闲鱼Flutter实践效果访谈

简介:

闲鱼技术-国有

在2018 GMTC大会上,Google Flutter宣布了首个发布预览版。同台亮相的闲鱼,是国内首个将Flutter用于大型实践,并用在重要场景的应用。同时闲鱼对Flutter技术演进也产生了重要的影响。做为新一代的高效移动开发技术,Flutter受到了国内开发者的密切关注。

本文邀请GMTC演讲嘉宾闲鱼架构负责人王树彬,分享闲鱼的实践效果和一些常见问题。

闲鱼为什么选择了Flutter?

Flutter是Google下一代操作系统Fuchsia的UI框架,在保持原生性能的条件下实现了跨端编程,为未来的移动开发格局变革提供了巨大的机会和想象力。

很多朋友好奇,闲鱼这样一个业务快速发展的App,为什么敢于使用Flutter这样的新技术。我想这一方面是因为闲鱼对技术的追求;另一方面,闲鱼在正式引入Flutter前,对Flutter的原理、团队、趋势做了充分的预研。

现有流行的跨端解决方案中,通常性能无法做到最好,很难达到与原生一样的流畅体验。虽然闲鱼一些页面使用了现有的动态化跨端方案,但出于个性化交互及流畅体验的考虑,主链路页面(首页、详情、发布、消息、交易等)一直无法使用,只能用原生开发。Flutter通过自建绘制引擎,AOT编译,线性布局和渲染等机制,达到了与原生一样甚至更好的性能。仔细去了解Flutter的原理,会发现很多优秀的设计。

闲鱼Flutter解决了哪些问题?

在没有经过大规模应用验证的情况下,框架成熟度和稳定性有很大的风险和挑战。此外,闲鱼希望将现有的Native页面渐进式迁移到Flutter,这种混合开发,闲鱼之前业界也没有成熟的先例。

闲鱼做了个大胆的尝试,挑选重要且复杂商品详情页作为第一个迁移到Flutter的页面。通过这个方式,快速暴露和解决Flutter相关问题,最终项目顺利成功。详细可以到GMTC下载闲鱼专场分享的文档GMTC,或者关注“闲鱼技术”公众号查看更多深入的文章。

闲鱼遇到的通用问题,已经在Flutter官方中同步修复。一些混合编程的私有问题,闲鱼会沉淀为文档供大家参考,必要的组件也可以沉淀为Package。

解决的一些典型问题举例如下

混合问题

  • 混合工程
  • 混合编译,构建
  • 混合页面栈管理
  • Native视频播放器复用
  • Native页面组件混合

兼容性问题

  • Armv7编译
  • 视频播放白屏
  • 中文字体
  • icu data
  • 截图
  • 图片内存溢出Crash

当然,我们还在继续,有新的问题发现时会不断优化和完善。

能说说引入Flutter的实际效果和收益吗?

性能上,Flutter页面和Native页面体验接近,甚至数据上看在一些低端机上Flutter会更流畅,人肉眼已经很难区别。

研发效率上:

  • 旧页面迁移到Flutter的过程,效率是下降的。 以前沉淀的UI组件,需要在Flutter上重新实现。
  • 对于全新的页面需求,或者是已经迁移完成的页面上的新需求,可以明显看到Flutter跨端带来的效率提升。除了两端变一端的好处外,还有协同减少、一致性提升、Hotreload开发等好处。
  • 此外,Flutter线上仍然有一些Crash存在,虽然比例不高,但还是会带来一定的排查成本。定位这类问题需要对Flutter的原理有一定的理解。

包大小的问题你怎么看?

Android的Apk增加8M,iOS压缩包增加16M。
包大小确实是大家需要权衡的问题。我的理解,非常大的App(100M+)以及非常小的App(10M-),通常会对包大小很敏感,根据自己应用的情况来选择。

评估包大小问题时,几个额外信息提供大家方便参考:

  • 包大小是官方正在重点优化的一个问题。以Android为例,我觉得一年内有希望优化到5M以下。
  • 考虑到Flutter有Treeshaking技术,无用的代码不会被编译到安装包中,所以随着依赖包的变多,Flutter与Native相比,占用的空间会更小,这也是Flutter的一个优势。如果把一些Native页面迁移到Flutter页面,Native依赖的减少,有希望抵消Flutter基础包的大小。 这也需要根据实际情况评估。

Flutter支持动态性吗?

Flutter目前还不支持线上动态性,虽然有解决方案,但闲鱼也并未将动态做为重点。跨端、动态、性能目前还是三角形制约关系,无法兼得。

Android上通过更新Flutter产物,较容易实现动态。iOS上由于审核原因,实现动态的成本很高。

有些策略可以一定程序缓解动态要求,但无法完全解决:

  • 建设更快速的发版能力及更完备的自动化测试。
  • 将页面组件化,由服务端组装组件并推送到客户端。

Flutter的线上稳定性目前怎么样了?

大家可以关注闲鱼已经迁移完成的页面,目前是商品的详情页。详情页用到的Flutter接口和功能,目前已经线上验证OK,达到生产稳定性的要求。闲鱼正在逐步将Flutter应用在更多的页面,覆盖的场景会越来越多,欢迎关注闲鱼后续进展。

详情页覆盖的主功能包括:

  • 视频播放
  • 图片
  • ListView
  • 键盘
  • 浮层
  • 动画
  • 截屏

总结

闲鱼会继续与Google和社区紧密合作,完善Flutter,并基于Flutter建设全新的一体化研发模式。希望为业界类似App提供架构参考。

欢迎敢于挑战,有勇气改变世界的同学,加入闲鱼,一起打造新一代高效研发架构,一起实现让天下没有闲置的梦想。

欢迎联系树彬: guoyou@alibaba-inc.com

相关文章
|
4月前
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
33 10
|
4月前
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
36 2
|
4月前
|
Web App开发 新零售 前端开发
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
43 1
|
4月前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
5月前
|
设计模式 编解码 API
Flutter UI设计模式与实现:深入探索与实践
【7月更文挑战第20天】Flutter以其独特的声明式UI模式和丰富的UI组件库,为移动应用开发提供了强大的支持。通过深入理解Flutter的UI设计模式和实现技巧,开发者可以构建出高性能、可维护性强的UI界面。同时,随着Flutter生态的不断完善和发展,相信未来Flutter将在移动应用开发领域发挥更加重要的作用。
|
6月前
|
Dart 监控 测试技术
在Flutter开发中,注重代码质量与重构实践显得尤为重要
【6月更文挑战第11天】随着Flutter在跨平台开发的普及,保持高质量代码成为开发者关注的重点。良好的代码质量关乎应用性能、稳定性和开发效率。为提升Flutter代码质量,开发者应遵循最佳实践,编写可读性高的代码,实施代码审查和自动化测试。重构实践在应对代码复杂性时也至关重要,包括识别重构时机、制定计划、逐步操作及利用重构工具。注重代码质量和重构是Flutter开发成功的关键。
79 3
|
7月前
|
Dart 前端开发 安全
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
【4月更文挑战第30天】本文探讨了Flutter中线程管理和并发编程的关键性,强调其对应用性能和用户体验的影响。Dart语言提供了`async`、`await`、`Stream`和`Future`等原生异步支持。Flutter采用事件驱动的单线程模型,通过`Isolate`实现线程隔离。实践中,可利用`async/await`、`StreamBuilder`和`Isolate`处理异步任务,同时注意线程安全和性能调优。参考文献包括Dart异步编程、Flutter线程模型和DevTools文档。
231 1
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
|
7月前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
82 0
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
7月前
|
前端开发 Linux iOS开发
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
【4月更文挑战第30天】Flutter扩展至桌面应用开发,允许开发者用同一代码库构建Windows、macOS和Linux应用,提高效率并保持平台一致性。创建桌面应用需指定目标平台,如`flutter create -t windows my_desktop_app`。开发中注意UI适配、性能优化、系统交互及测试部署。UI适配利用布局组件和`MediaQuery`,性能优化借助`PerformanceLogging`、`Isolate`和`compute`。
443 0
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
|
7月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
279 0