flutter框架优缺点

之前一直做前端开发,偏爱研究跨平台 先后做过hybrid,RN weex 对native也略有了解,近半年对Flutter 有些研究,很是喜爱,于是用Flutter写了一些Demo 个人比较看好,结合自己的体验对Flutter的优点以及不足简单总结一下

主要优点

  • 跨全平台 不止是Android 和 iOS 目标剑指所有主流平台UI 开发、PC桌面以及 包括正在搞的Hummingbird来实现web的支持。
  • HotReload 开发效率提升很大。
  • 性能 Dart AOT 性能这块文章很多 就不多说了
  • 非常丰富的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的一些期待(比如高频率交互动画)
  • Flutter SDK 高度自由灵活,上层有丰富UI套件,除了Material Design的主题之外 还有一套ios的主题的配套组件,除此之外,对于复杂UI 自己也可以从底层Canvas入手 自己来绘制。灵活度堪比系统的SDK。
  • 开发工具 Android Studio, IntelliJ,VS Code都提供了Flutter的开发插件,且完善度很高,自动提示用起来也非常爽。比如支持断点调试,堆栈信息查看,直接跳入源码等 。
  • 文档,官方文档 API文档 也是非常完善,也为其他开发者(Android iOS Web ReactNative Xamarin) 准备了详细的文档,可以对照学习,UI的思想都差不多。帮助其他的开发者快速入坑Flutter,文档完善度方面这点要比RN强不少了。
  • 社区 国内有中文的翻译网站,目前有很多学习资料可供参考,谷歌官方也有一些视频。YouTube上也有一大堆的视频 我在这里也整理了一些资料
  • 其他 除了动态更新的支持之外,感觉生态上已经超过RN了 官方也有相关动态更新的issue,不懂为啥看到不少同学说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
  • 与现有的App 集成起来坑不少。
  • 异常错误提示不是很友好,解决起来不是很方便
  • 虽然号称高性能,但目前综合一些评测评测以及个人体验来看,debug模式下有的卡顿问题,在release模式下基本可以做到流畅, 但距离真正的Native 还是有点差距。
  • UI写法,写不好容易发生多层次嵌套,形成嵌套地域,可读性也不高,很快看不懂自己写代码了,写UI感觉XML更舒服一些,github也开了两个issue 建议出一套类似JSX的UI规范11609 issues-15922 被否了,有第三方搞出来一个DSX
  • Webview: Flutter本身不提供自绘的webview组件,利用Platform view的能力,使用Native UI层面的组件,以Plugin的形式提供, 可以使用Flutter社区提供的flutter_webview_plugin插件,本质通过使用系统SDK的webview来实现,这样可以使用Dart对webview进行基本的操作,但是并没有提供Dart 和 JavaScript通信机制以及对Webview发出请求的拦截,当然开发者完全可以自己去定义,webview 跟系统SDK通信,然后系统SDK使用channel机制与Dart通信,目前支持的Dart与webview的交互也是这种套路。
  • 地图 国内的地图官方还没有提供Flutter的SDK, 通过包装Native的SDK结合Platform view 来实现,可以参考文档 阿里云云栖社区:在Flutter中嵌入Native组件的正确姿势是…Exploring Google Maps in Flutter
  • 图片缓存,Flutter的Image组件本身不支持离线缓存(支持运行时最大1000张图片以及上限100M运行时缓存),比如浏览过的图片,断网重启APP查看,无法加载了,可以结合第三方插件cached_network_image。
  • 实战了一个例子, Release打包之后 Android下有 6M。iOS打包之后有12M。Native的反馈这个包不算小了。

总结,小问题不少,但没有太大的硬伤,大部分都有解决方案,随着时间一些问题应该可以优雅的解决,或者被慢慢接受,Flutter对前端开发很友好,毕竟Flutter的初创人员都是来自Chrome团队,现代化的开发方式,让写APP更简单。Fuchsia 和 Hummingbird Release 之后应该能带来更多的流量。目前谷歌对Flutter的投入也非常大,内部多个团队合作,未来可期。

简单化 高效率是趋势。Flutter正是这种简单化的代表之一。你只管负责岁月静好,谷歌替你负重前行

2019-01-18 更新一下 Flutter 2019的RoadMap出来了,对刚才说的那些不足进行完善,

  • 增强基础设施 完善生态、工具等来提高开发体验
  • 更好的与现有的app集成,
  • 支持动态更新(Android下支持从sever端下发代码)
  • 发布Web版(继续试验桌面版
  • 其他 bug修复、性能优化 完善webview和map 支持 local notifications 以及 local data storage. 、错误捕获 等 总之不断变的更好