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

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

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

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

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

Google:

Custom Widgets in Flutter

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

▲    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 团队的交流方式。

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第3张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第4张图片
_ _ _ _ _
_ _ _ _ _

团:

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

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

▲   李会超(美团)

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第6张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第7张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第8张图片
_ _ _ _ _
_ _ _ _ _

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

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

腾讯:

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

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

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

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第10张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第11张图片
_ _ _ _ _
_ _ _ _ _

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

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

360:

探索Flutter中的状态管理

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

▲   陈晗(360)

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第13张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第14张图片
_ _ _ _ _
_ _ _ _ _

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

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

快手:

快手Flutter技术实践

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

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

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第16张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第17张图片
_ _ _ _ _
_ _ _ _ _

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第18张图片
_ _ _ _ _
美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第19张图片
_ _ _ _ _
_ _ _ _ _

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

圆桌讨论

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

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

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

美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第21张图片 我叫快手星球,是快手人聚集的地方 发源于“宇宙中心”五道口,刚刚迁居“中国硅谷”西二旗 我忙着听快手人的故事,也忙着写他们的故事 关注我,我会给你讲故事~~美团flutter_直击现场!最前沿的Flutter干货都在这里(内含全部资料)_第22张图片

你可能感兴趣的:(美团flutter)