美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)

dd05cdd20e3b0bcd6c2691d9de9e1457.gif

*本次Flutter技术交流会的全部演示文稿资料,已全部整理到“快手星球”微信公众号上,欢迎大家关注“快手星球”微信公众号,回复KFM下载。

作为跨端开发框架,Flutter 自 Google 提出以来在整个业界吸引了越来越多的关注,也为在 iOS 和 Android 上构建高质量的应用提供了更多的便捷。

为了聚焦各公司 Flutter 技术的动向与实践,为开发者们提供一个线下交流学习的机会,快手中学在北京总部举办了“首届快手 Flutter 技术交流会”(Kwai Flutter Meetup),邀请到来自 Google、美团、腾讯、360 以及快手 Flutter 技术团队的众多技术人才共同交流探讨。快手应用技术部负责人刘春雨在开场致辞时,从开发效率、多端功能逻辑统一、运行性能问题等方面对 Flutter 进行了分析,表达了对 Flutter 在技术上的认可及快手在 Flutter 领域持续投入的希冀。

24bb980fd2abe1876d6721cd4994eb0b.png

Google:

Custom Widgets in Flutter

cf083c38148fbcf9e77b201b8e1c5d4c.png

▲    Justin McCandless(Google)

来自 Google Flutter 团队的 Justin McCandless 介绍了即将发布的 InteractiveViewer Widget,并分享了如何编写定制 Widget 的方法。InteractiveViewer 提供了很强的交互能力,支持手势进行移动、缩放及旋转,应用场景非常丰富。InteractiveViewer Widget 的 Pull Request 现已建立(https://github.com/flutter/flutter/pull/44015),并且欢迎开发者发表评论。此外,Justin 还对 Flutter 定制化 Widget 进行了介绍,并附上了 Flutter 团队的交流方式。

c85d1bf1f0696e021746b82ae3cad065.png
_____
6136641d533afdb9f636524f4b75c84b.png
_____
_____

团:

美团外卖Flutter混合开发生态建设实践

53d2e3a3f471ed511c82701a1918cfc6.png

▲   李会超(美团)

美团外卖从用户端调研到多个事业部中后台业务线上应用 Flutter 用了1年时间,已经形成了完善的工程化体系。李会超介绍道,美团B端业务对多端一致性、性能稳定性、开发效率的要求都比较高,而 Flutter 能非常好地满足这些要求。

ee2608d6b9b9a94fc335b71f411f5306.png
_____
9f169b0b02bf40f89360789c39bc835f.png
_____
0181e8e04a9a68f70e91a801295a609a.png
_____
_____

MTFlutter 工具链提供了 SDK 定制、工程构建、集成工具、混合容器、UI 代码自动生成、组件插件库、CI/CD、运维能力、产物托管、运维能力等多项功能。其中的每个步骤都依托于美团自有的云服务,实现了高性能和中台化。其标准工具流为工程初始化→开发→调试→构建→测试→发布→集成原生工程→原生工具链,且每个阶段都提供了完备的脚手架和自动化工具。

MTFlutter 还在业务支撑上做出了很多有趣的探索,比如 UI 代码自动生成等。到目前,已有多个事业部的中后台业务应用,接入到了 MTFlutter 基础设施并上线迭代。

腾讯:

Flutter 在腾讯企鹅辅导上的实践之路

42ebf3fb2595c7a5202f2fc9b1e591f4.png

▲   涂金林(腾讯)左、曹海歌(腾讯)右

以企鹅辅导为例,涂金林和曹海歌分别从手机端、Pad 端、Web 端介绍了腾讯在 Flutter 的实践经验。主要内容有 MJFlutter 框架、性能优化、Flutter for web 等。

78eddb288510672a015e9c61fb91606d.png
_____
0762763a6658e2298444fbbbd84eea32.png
_____
_____

MJFlutter 是一个腾讯自研的 Flutter 接入框架,对常用组件、Channel通信、页面栈等进行了良好的封装,做到了开箱即用。而关于性能优化,涂金林主要介绍了来自引擎的内存泄漏及图片增量内存过大等问题的优化,并介绍了一些常用的提升性能的代码习惯。

曹海歌站在 Web 前端工程师的角度对 Flutter 进行了解读,现场给出了使用 Flutter for web 技术构建的企鹅辅导页面供现场观众体验。对于Flutter for web 未来的发展,他认为“ Flutter 其实可以理解为一种渲染技术,前端一直在和 UI 打交道,Flutter 也是还原 UI 的技术,Web 前端与 Flutter 技术,本质上也是同根同源的,而从前端视角来看,组件化、工程化、一体化,都是未来有待尝试的”。

360:

探索Flutter中的状态管理

c698f3f94af838ae35340582e1fe8e77.png

▲   陈晗(360)

陈晗所在团队,利用 Flutter 技术构建了“南瓜屋故事”,一款故事社区 App。在实践过程中形成了一套对于状态管理的独到理解。

8a61de12a4203c13f2d601c25203971b.png
_____
4e06f3f5df590a960df1ce0c584d25ed.png
_____
_____

陈晗认为,“状态就是应用在不同时间节点表现的一种形态”。Flutter 作为一个声明式框架,遵循范式逻辑,即输入不同的 state,就会呈现不同的 UI。

对于状态管理方案的选型,陈晗认为应该根据项目的业务复杂度来决定。一个好的状态管理方案,应该具备三个特点:可预测、渐进式、高性能。同时他也建议开发者不要为了使用而使用,技术本身是服务于产品、服务于业务的,在选择和使用状态管理方案时,要三思而后行,做好多方面的权衡。

快手:

快手Flutter技术实践

f66a9c06101c28d513542860d8b69470.png

▲    张天宇(快手)左 、邓敏(快手)右

来自快手北京研发团队的张天宇与深圳研发中心的邓敏,分别分享了 Flutter 平台团队以及业务团队的尝试。快手在 Flutter 进行了一定技术积累之后,形成了一套自有的平台能力,包括集成发布、一键发车、Channel 强类型化、Property 生成、依赖管理、自动化埋点、混合栈管理等。

0ff8da13c8918208416d431553a534b1.png
_____
b47ac3c53adec3d07d4db782c6d5e6a7.png
_____
_____

Flutter 作为接近 Native 体验开发框架,理论上要承载比 H5 更复杂业务,这可能会导致 Flutter 与 Native 通信会比 H5 与 Native 通信更复杂。弱类型的方案会导致业务维护相当困难,张天宇对比介绍了快手内部使用的两套强类型的封装方案:基于 dart 的 IDL 生成工具和 gRPC。

b109da999863f9576a713450857a0d72.png
_____
369825aeb216ec30ecf0b4a84a111628.png
_____
_____

埋点作为客户端上非常常见的需求,为了提高开发效率,减少出错概率,业务团队自研了一套自动化埋点方案,覆盖了所有常见埋点场景,优雅地解决了埋点数据采集和上报时机的问题。邓敏随后又介绍了快手自研的混合栈管理,除了完美实现现有页面栈能力外,还增加了引擎释放、页面主动销毁等功能来应对内存占用问题。

圆桌讨论

b6807166b689b6d6d516ca8bea5769bc.png

在随后的圆桌讨论环节,嘉宾们对会前收集到的快手同学们感兴趣的话题进行了讨论,如 Flutter 前期落地成本、前端同学是否适合做 Flutter 开发、Flutter 的技术边界等。此次活动干货满满,同学们也觉得收获很大,“了解了 Flutter 的动态和企业级应用流程、各个公司踩过的坑以及优化方案,在探讨中学习,也让自己在以后的工作中可以绕开这些坑,更重要的是结识了很多同样乐于钻研、解决问题的伙伴,希望以后可以多组织此类交流会”。

在跨平台开发慢慢成为主流趋势的今天,Flutter 的重要性逐渐凸显。作为快手内部的人才发展平台,“快手中学”旨在以学习沟通和分享交流为主,为快手同学提供每一个职业阶段的培训与发展机会。此次“快手中学”与应用技术部一起举办快手Flutter 技术交流会,既是对快手和业界同行一道建设 Flutter 社区、维护社区生态,把 Flutter 技术应用到更广泛领域的美好希冀,同时也为未来能够探索出更多最佳实践、造福大前端开发者,提升大前端开发者独特的幸福感提供了更多可能性。

3fb227a8576a87cecd9b53085bab3c1a.png 我叫快手星球,是快手人聚集的地方 发源于“宇宙中心”五道口,刚刚迁居“中国硅谷”西二旗 我忙着听快手人的故事,也忙着写他们的故事 关注我,我会给你讲故事~~1f7e96c32dd24490926c6eb6dffb72a0.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值