flutter 应用场景_Flutter调研总结和应用场景思考

Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android和iOS开发应用，同时也将是Google Fuchsia下开发应用的主要工具。– 维基百科

早在2015年，Flutter就发布了第一版，当时的Flutter仅支持Android平台，号称可以实现120FPS的渲染性能。但是Flutter真正大火要等到今年，尤其是9月20日的Google开发者大会上推出了[发布预览版 2]之后，尽管正式版还未到来，但是已经吸引到了足够多的注意力，不少公司都在研究、试用、不少已经推出了Flutter开发的App。当然这也与拥有官方合作身份的闲鱼的积极布道是分不开的。

本文主要介绍了Flutter的使用场景、优缺点分析、技术栈的分解介绍，最后是一些Flutter在公司场景中的一些思考。

0x01 使用场景

Flutter最初的设计目标就是跨端, 通过隐藏设备差异、平台UI差异、一次编写，多端运行。开发者只需要掌握Flutter，就可以同时在Android及iOS平台上面发布自己的App。非常适合原型搭建或者小规模的开发团队。

为了尽可能不依赖平台特性， Flutter在Dart虚拟机之上实现了全套的UI组件、手势管理、资源管理、并采用GPU直接渲染的方式。随之而来的结果就是高效的渲染性能及比源生UI更加灵活的表现力。在大大减少了适配工作的同时，很好的保障了低端设备的流畅度。

相比较于Google对于跨端的追求，国内开发者更关注于动态化能力，典型代表就是RN和Weex。但是由于一些客观原因，Flutter并不能提供动态化能力。

目前国内比较知名的有Flutter应用的App有

闲鱼

全民直播

京东金融

0x02 优缺点分析

优点

Flutter官方宣称的优点主要有:

快速开发。

灵活、极具表现力的UI。

媲美Native的性能。

快速开发: 作为一种在虚拟机上运行的语言，Dart天然支持两种运行方式,即实时编译的JIT和预编译为机器码的AOT。通过在Debug环境中使用JIT模式，flutter可以实现秒级的Hot Reload。搭配完备的IDE插件及一套代码，多端运行的设计理念，开发确实非常敏捷迅速。

灵活、极具表现力的UI: 得益于从底层全新构建的UI组件，Flutter涵盖了包括Android和iOS两种风格组件。通过组合大于集成的构建思路，Flutter可以搭建起想要的任何界面。在此基础上，不受平台框架限制的动画能力及完全接管的滚动、转场效果、手势分发能力，使得开发者可以获得比源生UI库更大的灵活性。

高性能: 不同于端上UI库的分层渲染，然后叠加的思路，flutter采用的是内存计算最终渲染指令，GPU栅格化后直接渲染，通过统一的图形库接口(skia)，在Android端和iOS端都可以获得非常高的渲染性能。另一方面在CPU的使用上，由于release模式下Dart使用AOT模式，所有的代码都会编译成机器码，没有类似Weex的JSCore中间层，直接在CPU上运行，代码执行性能损耗极少。

缺点

Flutter的缺点一部分来自于社区生态、另一部分则来自技术本身。

技术新:

flutter发展至今，仍然是Preview版本， 距离正式Release，尚有一段时间，目前的Flutter迭代速度非常频繁。

社区不成熟，国内各大公司各自为战，还没有较为权威的开发社区；而国外社区也多纠结于“How to xxx”之类的应用问题，大家都在熟悉阶段。

技术栈较深， Flutter技术栈涉及Dart语言、Dart Framework、 Dart VM、 skia渲染引擎等多层庞大的代码库，对于想要使用Flutter快速开发的团队显然与出发点不同，任何的踩坑或许只能依赖于官方的修复和处理。

动态化能力的缺失:

Google最初的设想只是跨端，尽管社区很多加入动态化能力(Dart在Release包中使用JIT模式运行)的呼声，但是官方似乎顾虑重重，明确表示动态化不是当前开发方向。

苹果的审核机制不会允许Dart的动态化能力。

Flutter的高性能很大程度上源自Dart语言AOT模式下的机器码运行方式，即便有一天官方支持了动态化能力，运行性能肯定也要大打折扣。

混合开发的困境:

Flutter并未考虑过Native&Flutter混合开发的场景，导致混合开发有非常多的问题。 这些问题包括混合转场、Flutter容器的复用、手势的分发、Native UI组件的参与渲染等；同时还有CI/CD工程化方案的缺失，闲鱼做了大量的改造和定制，才使得Flutter能够胜任混合开发。

包大小问题: 在一些大型App中，包大小是很敏感的指标。 在iOS端，最简单的Flutter项目将增加10M以上的包大小，随着业务逻辑的增加和资源的加入(icon、font等)包大小仍会上升；在Android端，问题相对没有那么严重，由于skia库的内置，Android端大概增加4M+的包大小。

0x03 技术栈分解

Dart语言

Dart语言产生较晚，充分参考了其它语言，加入了很多高级特性。典型的有支持async/await关键字的并发线程模型、优秀的内存管理机制、支持AOT和JIT两种运行方式等。

Dart Framework

Dart Framework提供了各种内置UI组件的实现，允许开发者通过组合构建业务界面，原生支持Android和iOS两套UI风格；同时拥有包管理机制，支持社区Package的开发和使用。

在显示环节， UI组件需要经过layout和build两步， Flutter中的Dart组件库采用了类似React的响应式架构，再此之上又通过优化，将layout和build的时间复杂度降低到了亚线性的量级。

engine层 skia渲染库

skia是一套开源的2D绘图库引擎，在不同的平台有不同的backend，在iOS上是openGL ES，而Android上面则是Vulkan。基于skia可以提供一致的高性能GPU渲染能力。

engine层 Dart VM

DartVM是Dart语言的运行时环境，支持AOT和JIT两种运行模式。内部实现了Dart的线程/多线程模型、内存管理、及Dart语言的多种高级特性。

0x04 总结和思考

Flutter提供了一套非常优秀的跨端快速开发方案。但是在特定场景中，它的优点还不够明显，而缺点却非常明显。 就Flutter整体来看，公司还找不到匹配的落地场景。

尽管如此， Flutter技术栈却像个大宝库一样，值得我们探索:

Dart Framework中的 layout和build算法: 很多库都有layout和build机制(weex、AsyncDisplayKit)，但是显然Flutter中的性能是更高的。

界面栅格化: 栅格化显然比组件的堆叠具有更高的性能优势， Facebook的AsyncDisplayKit就通过CPU内存栅格化增加页面流畅度，而Flutter做的更彻底，将栅格化直接放到了GPU上操作，比AsyncDisplayKit更进一步。现在公司的一些场景可以尝试通过GPU渲染进行优化，比如lottie动画、Gif图片，应该可以减轻CPU和内存的负载。

Dart虚拟机: Dart虚拟机通过一层平台适配层在不同平台上实现了完备的Dart语言特性，及内存管理、线程模型，其中的每个实现细节都值得我们学习和参考。