Flutter beta3 使用感觉

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

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

以笔者使用的Mac OS为例:

1. 下载SDK
2. 解压到任意目录(建议放到一个固定的位置)
3. 更新系统变量, 方便直接在终端使用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入门门槛. 官网的教程真的对新手很是友好, 是我自学这么多框架以来为数很少不须要参考其余资料或视频就能够迅速上手的教程.