Flutter beta3 使用感受

image.png

作为一名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文件.
main.dar

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应用上也是一样的问题).


iPhone X模拟器

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容