Flutter beta3 使用感受

作为一名iOS开发者, 受到了来自前端技术威胁轮的影响, 因此会时常关注各种新技术, 也去一一学习了React Vue等前端框架. 最近(其实已经出来一段时间了,不过谷歌2018大会带火活了一吧)Flutter作为谷歌钦定的下一代移动操作系统Fuchsia的UI框架, 一下子成了众人关注的香馍馍.

最近随着Flutter官网教程的完善,我也试着学习了一下Dart以及Flutter框架.(注: Flutter还在Beta阶段) 搭建开发环境非常简单, 官网(https://flutter.io)提供了Windows、Mac OS、Linux三个平台的详细搭建教程(官网还细心的提供了中国区的镜像).

以笔者使用的Mac OS为例:

下载SDK
解压到任意目录(建议放到一个固定的位置)
更新系统变量, 方便直接在终端使用Flutter命令 (export PATH=pwd/flutter/bin:$PATH)

至此Flutter最基础的开发环境就搭建好了,不过我们还缺少一个得心应手的编辑器. 我个人使用的是VS Code, 这也是Flutter官方推荐的编辑器之一.

打开VS Code, 下载Flutter插件(可能需要重新加载). Shift+Command+P打开命令面板, 输入Flutter:New Project创建项目. 然后它会一步一步提示你设置项目的名字、存放的位置.而这一切都是用了VS Code最新的技术, 都在命令面板中实现. 这个体验要比在终端的体验好很多.

这里我的第一个感受就是,Flutter团队对于开发环境的支持非常好. 官方的VS Code插件已经非常强大, 从下载SDK到半可视化工程创建, 都极大降低了初学者构建项目的门槛.(想起自己刚开始学RN时,光用脚手架构建项目就花了一个晚上...)

构建完项目之后, 首先看到的就是main.dart文件.

Flutter使用了一个非常偏门的Dart语言, 据说是因为当时的Dart团队就在Flutter开发团队旁边, 因此可以给到最大限度的技术支持. 当然可能还有很多其他原因, 但不可否认这也是Flutter最大的争议点之一. Dart语言咋看上去其实并不难懂, 拥有现代计算机语言都有的简洁语法、新特性, 相信有Swift基础的同学上手应该不难. 当然如果你有ES6基础阅读起来就会更熟悉. 不过随着你阅读源码的深入, 你就会被无数的嵌套所搞晕.

这在任何一个语言中都是一场灾难. 在我尝试写几个控件的时候,写到第三层我就几乎无法准确定位我当前的UI层级(当然如果你的Widget层级太多,也许就是抽离子组件的时候了). 不过Flutter团队显然是发现了这个问题, 因此他们会自动在相应的层级后面加上该组件的名字(灰色的部分).这部分解决了层级混乱的问题, 但还需要适应一段时间. 我还是希望官方能够提供更加友好的UI代码风格, 尤其是没有可视化UI构建的情况下.

默认的Demo已经提供了一些注视, 通过阅读注释你可以对Flutter的运作方式有一个大体的了解. 如果你之前有接触过React或者Vue, 你可能会发现他处理数据和UI的方式和前者有极大的相似之处.甚至连setState等的方法名称都一摸一样. 很明显Flutter使用了现在在前端大为流行的响应式编程风格, 而且Flutter与前端技术的相似之处还远不止如此, 比如下面提到的Hot Reload.

Hot Reload(热加载)这个在前端极其重要的技术能够极大的加速开发的流程, 这是我们以往在纯原生开发中不可想象的. 当你在使用Flutter的时候, 你就像在写一个网页一样, 任何修改都能快速的反应到屏幕上. 不过目前Hot Reload在稳定性上还有一些问题. 另外, 测试环境下Hot Reload生成的UI组件性能不高, 但真正构建程序时会去除Hot Reload使组件性能最大化.

说到性能, 这也是Flutter引以为豪的特点之一. 不同于纯Web, Flutter最终生成的是Native代码, 在执行效率上要高出不少. 不同于RN,他使用了自己的一套渲染引擎, 完全撇开了不同平台不同渲染框架带来的兼容问题, 真正实现了一套代码搞定多平台. 最最最重要的是, 他的性能要好于RN, 这也是将来能否取代RN的关键因素之一.

上面提到了多平台兼容, 这个美好的设想经历了多次失败的尝试(Cordova、App Comparison)之后, 似乎终于要被Flutter修成正果. 从目前的体验来看, Flutter确实做到了一份代码多个平台. 这要归功于他自己的渲染引擎. 可以想象, 如果将来出了其他平台(比如Fuchsia, 甚至是现在的Windows和Mac OS), 如果能够将这套渲染引擎移植, 那就可以实现更多端的覆盖了.

不过这也没有想象中那么美好. 首先目前Flutter提供的基础控件都是Material Design风格的, 这在apple产品上显得尤为突兀. 不是说Material Design不好, 但在一款iOS产品上Material Design风格的app似乎是在告诉用户你用的产品和其他app是不同的(这在RN应用上也是一样的问题).

其次, 你渲染引擎再好, 能否跟原生控件PK还是个未知数.并不是说你能跑60帧就OK了, UITableView的回收机制, 高效的磨砂透明渲染,等等目前似乎都没有. 最后的最后, Flutter能够应付的是UI以及简单的基础功能. 当你需要处理图片、音视频, 对功能进行高度定制化修改的时候, 你必然离不开原生代码.

但是, Flutter的优点足够让大部分前端以及移动开发人员学习他了.所以你还在等什么呢?

最后, Flutter中文网(https://flutterchina.club)已经对英文官网进行了全程翻译, 再次降低了Flutter入门门槛. 官网的教程真的对新手非常友好, 是我自学这么多框架以来为数不多不需要参考其他资料或视频就可以迅速上手的教程.