闲鱼基于Flutter的移动端跨平台应用实践

IsobelCovin 1年前
   <h2>闲鱼为什么使用 Flutter</h2>    <p>Flutter 作为 Google 新一代的跨平台框架,有较多的优点,但跟其他跨平台解决方案相比,最吸引我们的是它的高性能,可以轻松构建更流畅的 UI。虽然各跨平台方案都有各自的特点,但 Flutter 的出现,给闲鱼、给大家都提供了一种新的可能性。</p>    <p>那么,Flutter 为什么会有高性能呢?</p>    <p><img src="https://simg.open-open.com/show/d264b527d08bacaffee5e23c3d6a6323.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2336" height="1266"></p>    <p>首先,Flutter 自建了一个绘制引擎,底层是由 C++ 编写的引擎,负责渲染,文本处理,Dart VM 等;上层的 Dart Framework 直接调用引擎。避免了以往 JS 解决方案的 JS Bridge、线程跳跃等问题。</p>    <p>第二,引擎基于 Skia 绘制,操作 OpenGL、GPU,不需要依赖原生的组件渲染框架。</p>    <p>第三,Dart 的引入,是 Flutter 团队做了很多思考后的决定,Dart 有 AOT 和 JIT 两种模式,线上使用时以 AOT 的方式编译成机器代码,保证了线上运行时的效率;而在开发期,Dart 代码以 JIT 的方式运行,支持代码的即时生效(HotReload),提高开发效率。</p>    <p>第四,Flutter 的页面和布局是基于 Widget 树的方式,看似不习惯,但这种树状结构解析简单,布局、绘制都可以单次遍历完成计算,而原生布局往往要往复多次计算,“simple is fast”的设计效果。</p>    <p>下面截图是目前闲鱼已经上线的商品详情页面:</p>    <p><img src="https://simg.open-open.com/show/22f269f9ca906322f4824505a1aa8d02.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2266" height="1252"></p>    <p>商品详情页包含混合栈、视频、动画、原生组件、多图、留言盖楼等功能,页面较复杂,有代表性,也是闲鱼最重要的页面之一。选择商品详情页做为第一个 Flutter 页面,是闲鱼能成功快速使用起 Flutter 的重要因素。</p>    <p>接下来介绍一下,闲鱼的实践过程和总结。</p>    <h2>Flutter 与 Native 混合开发实践</h2>    <h3>Flutter Hybrid 工程实践(研发时)</h3>    <p>我们把 Flutter 和闲鱼现有的 APP 做渐进式的整合,App 中会同时有 Native、Flutter 和 H5 页面。现有的 Flutter Demo 和应用,都是独立的 Flutter 应用,而当把它和 Native 混合的时候,会碰到很多的困难。</p>    <p>首先是研发时的问题,怎么让 Flutter 在现有的 Native 工程中开发起来。这个要从这张图说起:</p>    <p><img src="https://simg.open-open.com/show/6d0b0f6b58ec0efb9954aff8617c5c38.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2296" height="1296"></p>    <p>闲鱼 Flutter 工程结构如图,三个蓝色背景的目录分别是安卓工程、iOS 工程和 main.dart 入口。编译产物中以 iOS 为例,APP Framework 是 Flutter 应用页面代码,Flutter Framework 是 Flutter 引擎。</p>    <p>这个过程,需要重点考虑几个问题:如何基于现有工程搭建混合工程?如何支持过渡期的 Flutter 开发及纯 Native 开发的双开发模式?如何让 Flutter 与现有持续集成、构建工具集成?</p>    <p><img src="https://simg.open-open.com/show/3539ccdce51bfe9a2ecb4489ab03d47d.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="1998" height="908"></p>    <p>首先,现有的 Native 工程并不符合 Flutter 默认的规范,两者不能完全匹配,需要修改打包脚本,甚至修改 Flutter 的打包 Tool 来解决。另外,我们通过 Submodule 将现有⼯程引入到 Flutter 父工程中。</p>    <p><img src="https://simg.open-open.com/show/f825d632200097bbc13c851ed43b7d7e.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2356" height="1234"></p>    <p>纯 Native 开发同学,不需要引入 Flutter 工程,直接在 iOS 或 Android 工程下开发,Flutter 以产物的方式集成到 Native 中运行,Flutter 的开发同学引入 Submodule。</p>    <p><img src="https://simg.open-open.com/show/e1cb361a2a6c9e2fedd7a47545ce5b48.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2068" height="1336"></p>    <p>上图是工程上的修改点。绿色虚线部分是 Flutter 默认的结构,红色虚线是闲鱼在 Flutter 基础上做的定制。Flutter 的构建工具 gen_snapshot,会把业务代码,Flutter 框架、引擎编译成中间产物,以 so 或 Framework 的方式变成 Native 的一部分。</p>    <p>几个主要的改动点:</p>    <p>第一,构建私有的仓库,用来管理阿里私有包,如 CDN、无线网关等中间件适配 Package。</p>    <p>第二,构建工具和引擎的优化。</p>    <p>第三,跟现有的构建工具打通,混合调试等。</p>    <p><img src="https://simg.open-open.com/show/cd813acd73ee749b80e5a481dc85c773.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2336" height="1328"></p>    <p><img src="https://simg.open-open.com/show/d3bdd79c904b6fbd57b44b4bd943165d.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2304" height="1266"></p>    <h2>Flutter Hybrid 栈管理</h2>    <p>除了上述的研发时问题,接下来就是让它跑起来,解决运行时问题。其中最重要的是实现混合栈。</p>    <h3>混合栈的定义</h3>    <p><img src="https://simg.open-open.com/show/2d4f136ace3eeecf667ae576b6cd3c72.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2292" height="1322"></p>    <p>在混合工程中,Native 页面,Flutter 页面之间会以多种可能的顺序混合入栈,出栈。要怎么去做?先看一下 Flutter 内部栈的管理默认下是怎么做的:</p>    <p><img src="https://simg.open-open.com/show/cca382a5f732dcf46a851520eb6e01cc.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2282" height="1342"></p>    <p>整个 Flutter 运行在一个单例的 Activity 容器里(用安卓举例),Flutter 内部的所有页面都在这个容器中管理。 对安卓来说,怎样把这样容器里面的栈与 Native 栈混合起来,直接的一个想法就要把栈自己托管起来,把这个容器在 Android 的栈中来回移动。但 Android 里想这样操作非常难。</p>    <p>所以解决这个事情,就主要有两个问题要考虑,首先就是混合栈要在哪里管理?是在 Hybrid 栈管理,还是在 Flutter 管理,第二个就是关于实例剥离的问题,既然移动单例很复杂,那就把单例剥离出来,在上面 Wrap 出多个实例,这样就方便管理了。 下面是两个对比方案。</p>    <p><img src="https://simg.open-open.com/show/f491b5ea5f7ea690b6ece3cf8749b695.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2272" height="1316"></p>    <p>这两种方案都是可选的,方案一就是把 Flutter 直接变成多例,每个 Flutter 页面重新启动一个 Flutter 的容器,每个 Flutter 页面就像通常使用 WebView 一样,这个方便我们做了实测,发现它的启动速度有影响,能感觉到一些卡顿,另外,还有一个问题,当我想在两个页面之间去复用数据的时候,那两个引擎之间是完全隔离的,最后数据不好复用。 这个方案的好处是很简单,如果喜欢隔离性,也可以变成优点。</p>    <p>第二种方案,就是做浅层的单例剥离,尽量多的遵守 Flutter 的标准运行方式,以最小的影响把单例剥离出来,Wrap 成多例。</p>    <p>这种方案是在 Flutter View 这一层剥离,关于 Flutter View 的概念看一下源码很容易理解。</p>    <p>这种解决方案的好处是可以实现多页面复用,因为不用每次都取一个新的实例,加载速度会更快,因为对闲鱼来讲,我们追求的就是性能,最后我们的选择就是方案二。</p>    <p>这个是具体的实现方式:</p>    <p><img src="https://simg.open-open.com/show/832e653026530ea96af5c18a82903334.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2320" height="1308"></p>    <p>把下面的 View 复用,在多个 Activity 之间移动,切换到下一个页面的时候,把这个可复用的 View 从前一个 Activity 移走,放到下一个 Activity,这是它的主要的思路。</p>    <p>在这个思路下也会遇到一些需要解决的问题:</p>    <ul>     <li>两个页面转场动画由于 View 在 Activity 间移动,会有一个短暂的白色闪屏,体验不好,解决闪屏的办法,就是做一个截图,从 A 页面到 B 页面的时候,对 A 页面做个截图,同时把 Flutter 自带栈的转场动画禁止掉,有这个截图,转场时就不会有闪屏的感觉了。</li>     <li>考虑对统一 OpenUL 支持,把 Flutter 和 Native 的 URL 统一。</li>     <li>由于 Flutter 容器内部有个栈管理,对这个栈需要与 Native 做同步的跟随。</li>    </ul>    <p>到此,混合栈的方案就简单介绍完了。</p>    <h2>基于 Texture 的自定义视频播放器</h2>    <p>接下来,如果 Flutter 页面中想复用已有的 Native 组件,怎么办?</p>    <p>一种情况是视频播放器,Native 中我们做过很多优化的播放器,希望能复用到 Flutter 页面中。</p>    <p>首先,还是先看原理:</p>    <p><img src="https://simg.open-open.com/show/2317a0649ffebb6186d6220895f06c22.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2330" height="1276"> Flutter 内部的渲染,与通常的做法一样,有 layer。其中一种 Layer 叫 Texture Layer,可以把任何其他地方计算出来的纹理直接贴到 Flutter 的 Texture Layer 上。不管是视频,还是图片,如果有需要,都可以用 Texture Layer。</p>    <p><img src="https://simg.open-open.com/show/d1d1fbf8234ffb644f11c29a842fe575.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2344" height="1274"></p>    <p>在这个实现的方式中,Flutter 侧负责展示这个播放器 UI,接收对播放器做控制交互,而 Native 侧负责视频的渲染,通过 TextureLayer 展示到 Flutter 侧。而控制协议,通过 Flutter 特有的 MethodChannel 来控制。</p>    <p>除了视频,还有没有其他类型的 Native 组件能复用到 Flutter 中?像下图这样,把 Native 控件放在 View/Window 中与 Flutter 混合,是可以的。但截止演讲时,Flutter 还无法做到在 Flutter 中挖个小天窗嵌入 Native 组件。不过这个方式 Google Flutter 团队已经在做尝试,未来可能做有办法支持,大家可以关注。</p>    <p><img src="https://simg.open-open.com/show/6339df227bc072f79c7d90697e6656eb.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2348" height="1342"></p>    <h2>Flutter 通用问题实践</h2>    <p>接下来,介绍一下 Flutter 商品详情页的页面的开发框架。</p>    <h3>页面框架</h3>    <p><img src="https://simg.open-open.com/show/55d29448fe824097158cc8949fca7c17.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2316" height="1266"></p>    <p>右边边绿色的这一部分,就是整个页面的结构,整个详情页面是一个大列表,由商品的描述、图片,评论,个性化推荐等组成。这里简单概括几个特点:</p>    <ul>     <li>通过 Server 端返回的数据驱动 UI 界面,可以一定程度上获得页面内容的动态能力。Flutter 本身不支持动态更新,无法像 JS 那样,所以这种设计方式可以一定程度上弥补这方面的短板。</li>     <li>Widget 树结点间(或者说页面的不同组件间)的数据如何共享?这里大家知道 InheritedWidget 这个类就好了,这是解决数据共享的很有用的类。</li>     <li>如果页面再复杂些,有很多交互,希望将视频、交互、数据等分离怎么办?也可以考虑引入 Redux 框架。</li>    </ul>    <h3>统一协议</h3>    <p><img src="https://simg.open-open.com/show/7dc2aa95f06b52a02ea9196e7da2626b.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2350" height="1328"></p>    <p>Flutter 不支持 Dart 的反射(mirror),所以在开发 Flutter 页面时,解析服务端返回的数据,生成 Flutter 对象时,可能会很不习惯,需要有较多的硬编码。 Flutter 不支持反射,请大家理解,这样可以获得 tree shaking 能力,减少 Flutter 包的大小。</p>    <p>既然不支持反射,怎么去解决刚才说的数据转换问题?我们实现了一个统一协议层,把 Serve 端和客户端的请求接口和数据模型,都通过协议统一生成代码,避免了手工编码。</p>    <h3>图片缓存方案</h3>    <p><img src="https://simg.open-open.com/show/887cd091d059de7c29152f009f7c0bcd.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2288" height="1272"></p>    <p>闲鱼的页面中有大量图片,但 Flutter 默认的图片缓存策略比较简单,截止演讲时,如上图所示,默认图片缓存策略是按照图片数量,以 1000 为上限,LRU 的方式置换。当大图片较多时,这会占用过多的内存,容易造成 Crash 或 Abort。</p>    <p><img src="https://simg.open-open.com/show/6919baa0339a3cd04c55acbc72773d4e.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2296" height="1312"></p>    <p>在我们只有详情页一种页面时,解决这个问题可以用简单粗暴的方式,首先把 1000 这个数量调小。一种修改方式如图所示,通过 WidgetsFlutterBinding 来修改(WidgetsFlutterBinding 是 Flutter 中很重要的一个机制,有兴趣可以深入了解)。</p>    <p>此外,还要注意图片尺寸自适应剪裁,支持 WebP 等,这些对节省图片内存和网络流量都很关键。</p>    <p>第二种解决方案,是官方正在做的优化,按照整个空间的大小来做缓存策略,具体可以关注图中的链接。</p>    <p>第三种方案,更加完善,加一层持久层的缓存,以实际的经验来看,闲鱼的场景下,持久层缓存时,通常可以提高缓存命中率 10% 到 30% 。</p>    <h2>上线效果</h2>    <h3>线上 Crash 率</h3>    <p><img src="https://simg.open-open.com/show/77bd599360133acb3370dcba4da06624.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2300" height="1316"></p>    <p>大家可能会关心 Flutter 在生产环境的稳定性,兼容性等表现。闲鱼使用 Flutter 的前期阶段,这方面确实有很大的问题。前期在真实环境中发现了很多问题,第一次灰度测试时 Crash 率有百分之一的量级,主要的 Crash 问题包括内存、GPU、icu data、视频播放、截图接口、armv7、字体缺失等。</p>    <p>我们和 Google 团队一起,通过几个版本的灰度迭代,用了一个半月的时间,把问题逐步解决了,目前 Crash 率收敛稳定,达到万分之一的量级,已经达到了生产标准。</p>    <h3>Flutter 与 Native 详情页性能对比</h3>    <p>我们对 Flutter 与 Native 的详情页做了简单的性能对比,并不严谨,仅供参考。</p>    <p>测试场景:进入宝贝详情页后快速浏览到页面底部,从猜你喜欢进入第二个宝贝,重复进行访问 10 个不同宝贝详情。对比 Native 版详情页和 Flutter 版详情页。</p>    <p>测试机型,以低端机型为主(高端机型区分不明显):</p>    <p>Android 4.x, 5.x...</p>    <p>iPhone 5c, 6s...</p>    <p>安卓的对比:</p>    <p><img src="https://simg.open-open.com/show/8fd9d28fb123ad856435206c19b73d91.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2296" height="1274"></p>    <p>下面两行是体现流畅度的,LPS 或者 MS 是腾讯提出的一种流畅度的表达方式,在流畅度是 OK 的,比 Native 详情页做的好,在技术的指标上也还不错。</p>    <p>iOS 的结果:</p>    <p><img src="https://simg.open-open.com/show/abad0ddc38d988031839b696408b84f9.png" alt="闲鱼基于Flutter的移动端跨平台应用实践" width="2282" height="1218"></p>    <p>iOS 上,也是 Flutter 会更流畅一些,测下来,发现在 GPU 的使用率上,Flutter 会更高一些,Flutter 在这上有更进一步的优化空间。</p>    <p>说到这里,可能大家也会疑惑,这个对比结果,是不是因为以前 Native 写的详情页太复杂了? 确实有这种可能。但主要分享的是,两种页面是相同团队成员开发的,并且没有针对 Flutter 做专门的性能优化,这个性能测试可以确定的结论是,使用 Flutter 还是比较容易就能开发出与 Native 性能相近的页面。</p>    <p>最后,说一下大家可能会关于的成本问题。对于混合开发,初期接入成本是有的。如果是全新的 Flutter 独立应用,接入成本会很低。首次接入完成后,后面开始会顺利很多,可以享受跨端统一编程,一套代码带来的效率快感。另外,关于学习成本,还好,因为 Dart 语言跟 Java 很像,跟 JS 也很像,另外 Flutter 的 UI 框架遵循响应式,声明式设计原则,个人感觉,较容易上手。谢谢大家,由于水平有限,可能会有错误,请大家指正。篇幅有限本文无法对每个细节深入探讨,关于细节的深入分享,欢迎大家关注“闲鱼技术”的公众号。</p>    <h2>作者简介</h2>    <p>王树彬,阿里巴巴闲鱼无线技术专家,毕业于浙江大学,2009 年加入阿里巴巴,现任阿里巴巴闲鱼架构负责人,负责闲鱼从端到云的整体架构升级。有十余年互联网研发经验。曾负责移动端 LBS 技术,是淘宝位置归一、地理围栏等技术的开拓者,为个性化、O2O 等业务提供基础能力。也曾负责淘宝的商家系统,建立商家十亿级大数据下的实时在线查询、挖掘服务。</p>    <p>感谢覃云对本文的审校。</p>    <p> </p>    <p>来自:http://www.infoq.com/cn/articles/xianyu-cross-platform-based-on-flutter</p>    <p> </p>