Flutter实战总结

先放一下Flutter的练手Demo

代码仓库地址 https://github.com/kunkun12/Flutter_shop

2014年谷歌开始搞了个实验项目 Sky ,在Dart Developer Summit 2015 第一次亮相Sky: An Experiment Writing Dart for Mobile (Dart Developer Summit 2015),号称基于Dart来开发现代化移动优先的高性能 跨平台App、帧率可以达到120fps及以上,2015年10月 Sky 改名为Flutter,并发布了官方网站Flutter.io,谷歌内部开始用Flutter开发实际项目,2018年发展迅速,开始火起来了,2018年12月初Flutter 1.0 released。可以看出Flutter跟RN差不多是同时期的产品,Flutter在应用层玩法也是受React很多的启发,二者UI绘制工作原理不同,RN用的系统SDK的UI,Flutter是自绘制的UI,操作UI不需要bridge来进行通信 因此确保了性能,Flutter团队的成员大都是来自Chrome团队,里面也融入了不少Web的思想,以及Flutter的技术负责人也是因此Flutter玩法对web开发者比较友好 。更多Flutter原理 如何评价 Google 的 Fuchsia、Android、iOS 跨平台应用框架 Flutter

Flutter早起成员之一Eric Seidel 是WebKit 项目中非常有名的开发者,早年在 Apple 开发 WebKit,2008 年跳槽去了 Chrome 团队,十多年来一直从事Chrome 的开发, 在他的一次访谈中透漏了一些Flutter的一些信息 ,Flutter最初目的是提高web应用程序的体验 ,于是开始内部试验,是基于chrome代码移除了很多功能,比如移除一些兼容性的代码,以及web开发中一些不常用的功能,甚至改了渲染机制 不再兼容web程序,。,,跑了些benchmarks发现性能提升20倍。为了能够做更多的事情,又增加了很多功能,经过三次大的调整之后就成了现在的Flutter。Flutter也致力于提供高性能移动端跨平台App的开发体验,至于为什么 Flutter 会选择 Dart ?,除了Dart一系列有点(语法简单,同时支持AOT和JIT、速度快等)官方还说一个原因是是两个团队离的近。Flutter主要优点如下(可以概括为 简单、高性能、全平台的UI开发体验以及谷歌的大力支持)

主要优点

  • 跨平台 基于Skia绘图引擎实现全平台UI绘制,Chrome、Chrome OS、安卓、火狐浏览器、火狐操作系统以及其它许多产品都使用它作为图形引擎。 Flutter目标是跑在android iOS web linux mac windows,同时 也是作为谷歌未来系统fuchsia的御用的UI Kit(当然Flutter目前的重点还是在移动设备)。感觉这是要重新定义新标准的节奏。并且全平台的支持都是谷歌官方自己出的方案(RN官方只是支持iOS 和android。桌面和web都是社区给的方案)Flutter也是谷歌内部多个Team的合作的作品(Dart、 Flutter、 chrome等)
  • HotReload 改了代码秒见效果。对开发调试效率有了巨大的提升
  • 性能: 旨在提供 60fps的刷新率,对于刷新率 120Hz 以上的设备上能达到 120fps。
  • Dart。 生来背着“灭掉JS,替换Java”的使命,前几年一直不是很火,最近谷歌开始重视起来。还专门为Flutter 进行Dart的优化,在Rlease模式下直接将Dart编译成本地机器码,避免解释代码执行带来的性能消耗。另外Dart语法简洁,比Java和OC写起来简单太多。异步单线程完全是前端的玩法,思路简单, 不像JAVA中那种新建一个线程请求数据,之后回到主线程来操作UI。
  • 非常丰富的widget库。举个例子:比如列表拖动,也有现成的widget ReorderableListView,对material design支持也非常好,对iOS的支持也有cupertino主题
  • React style。 Flutter官方也表明过其设计思想最初也是受React个启发,一切都是Widget,没有像android iOS 那些些activity fragment 杂七杂八的概念,写应用的模式与React几乎是一模一样,写的多了感觉就是用Dart写React。Flex布局思想可以直接用、React的Component 和 PureComponent,对应Flutter里面有StateFullWidget 和 StateLessWidget,Context 对应Flutter中的 inheritWidget,状态管理redux 对应Flutter_Redux,React里面可以用RxJS,Flutter里面可以用RxDart,都是Reactive UI风格、都是基于虚拟DOM实现UI更新,甚至React新出的Hooks,在Flutter 里面也有了第三方的支持-Flutter_hooks。个人感觉相比React Native 。Flutter才是真正的在Native App中React思想的实现,实现了曾经我对RN的一些期待(比如高频率交互动画)
  • 响应式UI,数据绑定到UI,数据改变后“刷新”UI,不需要获取UI某个元素,手动去更新UI。
  • Flutter SDK 高度自由灵活,上层有丰富UI套件,除了Material Design的主题之外 还有一套iOS的主题的配套组件,除此之外,对于复杂UI 自己也可以从底层Canvas入手 自己来绘制。灵活度堪比系统的SDK。
  • 开发工具 Android Studio, IntelliJ,VS Code都提供了Flutter的开发插件,且完善度很高,自动提示用起来也非常爽。支持断点调试,堆栈信息查看,直接跳入源码等 。
  • 提供了一套与系统SDK通信的机制 (channel)
  • 文档,官方文档 API文档 也是非常完善,也为其他开发者(android iOS web reactnative Xamarin) 准备了详细的文档,可以对照学习,UI的思想都差不多。帮助其他的开发者快速入坑Flutter,文档完善度方面这点要比RN强不少了。还有中文翻译文档。以及源码里面的注释即文档。
  • 社区 目前有很多学习资料可供参考,谷歌官方也有一些视频。后面会附上链接。(信息过剩的时代,不好的信息也越来越多,甄别高质量的信息也非常重要,否则容易被淹没在一个偏角落里面,不把事件浪费在重复以及没有营养的信息上)

不足

开黑模式

  • 截止目前(2019年 1月初) 。Flutter在 github上issue, 处于open状态的有些多 ,数量在4k以上 ,closed 为1.1W。相比RN的数据则为600+ 和1.4W。当然也从另一个方面反映了Flutter受关注度很大,毕竟也是从18年开始火起来的,官方还没来得及解决。这个数据半年后再看
  • 在开发过程中遇到两个问题在模式下工作正常 在release模式下,无法work。 并在release模式下调试体验不好。debug 与release模式下运行渲染效果不一样。并且一旦发生了这种问题,调试起来也很棘手,一般跟底层机制有关 比如我最近遇到的这个问题 issues-23339
  • 虽然号称高性能,但目前综合一些评测评测以及个人体验来看,debug模式下有的卡顿问题,在release模式下基本可以做到流畅, 但距离真正的Native 还是有些差距。
  • UI写法,写不好容易发生多层次嵌套,形成嵌套地域,可读性也不高,很快看不懂自己写代码了,写UI感觉XML更舒服一些,github也开了两个issue 建议出一套类似JSX的UI规范11609 issues-15922 被否了,有第三方搞出来一个DSX
  • Webview Flutter本身不提供webview组件,之后应该也不会专门提供Webview, 可以使用Flutter社区提供的Flutter_webview_plugin插件,本质通过使用系统SDK的webview来实现,这样可以使用Dart对webview进行基本的操作,但是并没有提供Dart 和 JavaScript通信机制以及对Webview发出请求的拦截,当然开发者完全可以自己去定义,webview 跟系统SDK通信,然后系统SDK使用channel机制与Dart通信,目前支持的Dart与webview的交互也是这种套路。
  • 图片缓存,Flutter的Image组件本身不支持离线缓存(支持运行时最大1000张图片以及上线100M运行时缓存),比如浏览过的图片,断网重启APP查看,无法加载了,可以结合第三方插件cached_network_image。
  • 有时候Hotreload不生效,需要重启运行方可。
  • 实战了一个例子, Release打包之后 Android下有 6M。iOS打包之后有12M。这个包不算小了。

总结,小问题不少,但没有太大的硬伤,随着时间一些问题应该可以解决,或者被慢慢接受。

小结 :Flutter 虽有不少问题,但谷歌支持力度很大,对于有React经验的同学 上手也是非常容易的。当然相比之下RN的最大优势是动态化:苹果开发者协议允许动态下发JavaScript代码。目前Flutter在iOS下没有很好的动态化方案,相关issue讨论
很难说Flutter是否是未来的趋势,但是我相信,简单化一定是未来的趋势。
另外Hummingbird(Flutter web版代号)release之后,可发挥的空间更大,比如写个编辑器用Hummingbird在web端预览,然后拖拉拽一把梭生成native的主流程。Flutter可以收割一波Web开发者
另外就是Fuchsia 这个系统不知道谷歌会有什么态度,如果谷歌大力支持的话,应该也能为Flutter带来不少流量。

学习路线以及资料。
学习新东西可能会比较慢,这也是值得庆幸,把自己不懂的东西看懂 就是进步,人的能力的提高也是这个过程,先弄懂什么,然后在研究怎么用,然后再去看源码。资料非常多,质量也非常高,阅读资料的之后,最重要的是写代码练习,理解原理重要 敲代码也很重要。

其他Flutter中文学习资源

状态管理