Flutter 1.0 正式版: Google 的便携 UI 工具包?

mp.weixin.qq.com图标

北京时间2018年12月5日凌晨,Google Flutter 团队发布 Flutter 1.0 正式版。


超全面回答,多图预警

————————————————————

Flutter1.0发布,虽然已经期待已久,但看到1.0的出现,依然惊艳不少。最大的就是Flutter in Web,即Hummingbird的实现,虽然依然只是原型,但用Flutter来统一整个大前端前景可期。

分几个方面说下感受吧:

Flutter Framework设计

声明式+响应式的开发模式

开发者无需过多地关注自己Widget布局的优化,框架本身会去计算哪些Element需要去Build,Layout和Paint。换句话说,框架本身保证了即便应用开发者不做很多优化便可以实现较好的性能。

组合性的API

提供了灵活而强大的API。当然对于很多Native背景的开发者而言,这种嵌套式的写法,还是需要时间和成本去习惯的。

原生的扩展

Channel使得开发者可以轻易用于Native的功能扩展,而且是Native体验。

跨平台能力

Flutter最大优势,即架构于Skia之上的较彻底的跨平台能力。

Skia Graphics Library

Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.

Platforms
Windows 7, 8, 8.1, 10
macOS 10.10.5 or later
iOS 8 or later
Android 4.1 (JellyBean) or later
Ubuntu 14.04+, Debian 8+, openSUSE 13.3+, or Fedora Linux 24+

贴下Flutter的设计架构:

通过与Skia的深度合作与优化,Flutter可以最大限度地抹平平台差异,提高渲染效率与性能。

移动端(iOS/Android)

从下面的图示可以看出,其实Flutter就是自己写了一套替代原生的应用开发框架。

这也从原理上解释了,为什么Flutter能达到和原生一样的流畅度等。

当然,相对于iOS/Android原生App开发中应用代码无需内置UIKit等系统库,Flutter因为要自带针对自己定制和优化过的Skia(以及其他engine部分),那么引入带来的包大小会是个问题。

此外,WWDC2018上,OpenGL ES已被宣告Deprecated,而Skia目前的渲染后端还没有完整的Metal的实现 但好消息是,Skia已经开始开发Metal后端,相信在不远的将来,使用Flutter开发的iOS应用也可以享受到Metal的高性能。

Flutter的开发逻辑类似用游戏引擎的方式来写App,用它来开发2D游戏当然也是可行的。

譬如SpriteWidget

说到2D,可能有人会问3D怎么办?其实Flutter和Skia的设计并未限制2D,后续如果有明确的需求场景和资源,相信也是可以期待的。

桌面

Flutter的设计已经隔离了跨平台部分和平台相关部分,只有Embedder层是平台相关的。Embedder主要用来设置线程消息循环队列,创建用于渲染的Surface,平台相关内容的插件与通信,资源打包等。

桌面应用只需要实现这些内容即可,Engine本身已提供Embedder API,开发者分平台实现即可。

Embedder API

目前已有谷歌维护(但非官方支持)的项目进行中:

Flutter Desktop Embedding

如下所示:

Web

Dart语言最早就是抱著取代JavaScript的初衷出现的,只是鉴于js生态(代码库,多平台上的调试与优化等)的庞大和难以替代。Dart最终于2015年放弃了将VM置入Chrome,转而专注于Dart2JS的方式。

从原理上看,如果想让Flutter在Web上运行,那么面临的问题主要包括:

1.dart语言层面在Web执行

这一点其实dart2js已经演进多年,方案就是dart2js在浏览器运行。

2.Flutter的实现下,基于flutter-&>dart:ui-&>engine-&>skia实现渲染。要使其可以在web中运行,就要将dart:ui中对于engine的native方法调用替换成对于dart for web库的引用即可。

即从

到:

说起来简单,做起来却是另一回事了,但牛逼如谷歌,参见Hummingbird: Building Flutter for the Web

简单来说,方案分两条路:

个人更倾向于HTML+CSS+Canvas,毕竟兼容性好,期待后续有持续优化,使这部分尽早达到产品开发的标准。

Dart语言

虽然Dart在谷歌内部应用很多,但Flutter选择Dart也是有一定的偶然性。

Why Dart? Answer by Hixie From Flutter

从另外的角度看,Dart的很多特点也使得其对于Flutter不可或缺。

a. 支持AOT编译,使得Release模式下可以编译快速,可预测的,Native代码。

b. JIT编译,开发阶段变更迅速生效,hot reload。

c. 对于开发者,容易上手和学习。

Why Flutter Uses Dart

Hot Reload

像P图一样写代码,实现App开发。

反射的问题

Flutter的反射比较弱,只能用来做一些Introspect和Invoke,目前不具备Objective-C那么强的动态能力。
据我们了解,Flutter禁止反射最重要的原因不是因为包大小,而是为了代码的可预测性。实际上即便打开mirror支持,tree-shaking的逻辑也是work的。
目前我们对于json&model这种采用的还是代码生成的方式。

其他挑战

对于外界而言,Dart还是一个很新的东西,而且文档缺乏。有的东西是确实没实现,比如语言级别的动态修改对象的内存结构等;有的东西是实现了,但是使用起来没那么顺手,文档也比较缺乏,如Observatory;有的则是内部已经有实现,但是没有好的Get Started例子可以让外部的开发者去自定义,如类似AspectJ的东西,等等。

技术选型Flutter考虑点

包大小问题

基于Flutter1.0构建一个最简单的hello_flutter为例:Release模式下iOS ipa大小为9.7MB(armv7和arm64双架构),Android apk大小为5MB(armeabi-v7a)。

Flutter的包大小主要来自于两部分,一部分是一次性引入带来的包大小,这里主要是Engine部分,也就是我们所看到的Flutter.framework(iOS)和libflutter.so(Android)。那么Flutter的Framework为什么这么大呢?因为内容太多了,以iOS为例(之前版本的一个分析,仅做比例参考):

Android的情况类似,Skia等是植入engine的,而不是复用Android自带的内容。原因在于Flutter使用的Skia是最新的同步演进的Skia,而不是引用Android发布的老的Skia。

除了一次性引入的成本外,新业务的演进过程中,dart生成的机器代码也要注意包大小的问题,以免因为大量重复代码(如json&model转化这种)导致包大小较快膨胀。这一部分可以参考我们的一些工作: Flutter瘦身大作战

热更新的问题

目前的AOT的编译模式下,Android比较容易实现热更新,原理参见:https://mp.weixin.qq.com/s/vlHt8jxbdzBqJZDobpsFVw

至于iOS的实现,最大的问题不是技术上如何实现,而是如何做才能遵守审核规则而不带来审核风险。

稳定性

从我们的经验来看,Flutter在双端的稳定性(Native Crash)在0.01%这样的量级,都是Engine内部C++的崩溃。

性能

Native级别的性能

混合的场景

这个也要看粒度,分几个层面来看: a. 工程的维度 参见闲鱼等团队的混合工程实践,主要是包名修改,目录结构和打包的问题。 b. 页面的维度 这种维度能够比较好地解决常见的已有Native工程的重构,而且混合页面(栈)方案比较成熟。具体可以参见闲鱼的方案。 c. 一个Native嵌入多个Flutter Card 目前没有现成的好用的封装逻辑,多个Flutter实例会带来过度的内存使用等开销,数据的通信与共享也因为Isolate的隔离变得复杂。 d. 一个Flutter页面嵌入多个Native View Flutter在1.0版本中加入了对于此部分的支持,但还是有一些问题,比如Android上的API Level要求20等。

Flutter直接调用C++

原理上可行,因为Dart本身就可以这么做;实际的支持要看场景和需求。

分包的问题

考虑到tree-shaking的设计,目前的多包还是通过源代码的方式集成。

新的知识体系+工具链

Flutter设计确实很赞,尽可能地抽取出了最小的平台相关性,将尽可能多的逻辑实现变得平台无关,最大程度上实现了Write One, Run Everywhere。但毕竟有的内容是无法绕开原生系统(Embedder)的,比如说键盘,输入框等,而这些部分在开发过程中也往往是痛点。 此外,Flutter其实是一个系统的内容,知识面和工具链包括但不限于以下部分: a. Dart pub用来管理Dart依赖 Dart Remote Debugger用来调试Dart代码 Observatory可用于同VM通信,实现调试,Profile,内存对象监控等。

b. Flutter 组合式的API,对于Native背景的开发者书写UI还需要学习适应 Flutter Widget Inspector查看View层次。 PerformanceOverlay查看实时渲染帧率等 Flutter开关+Observatory查看CPU渲染性能瓶颈 SkDebugger查看GPU渲染性能瓶颈

c. engine代码获取与构建 gclient管理代码依赖 ninja管理构建 flutter_gdb用于调试Android Engine; lldb用来调试iOS Engine。

如何深入Flutter

尝试著回答这一点,因为有些体感。 如果我们只关注上面的Flutter框架(Dart)的使用,那么就同掌握一个UIKit一样,API熟悉,语言会用就好了。但如果要能够比较快速地定位和发现问题,实现各种需求,那么要求会高不少。 简而言之就是要了解OpenGL ES相关的知识,尤其是Native(包括拍照等)与Flutter混合的时候;了解Dart的各种不为人知的内容,尤其是当你需要的东西缺合适的轮子的时候;要了解iOS/Android,毕竟你的应用是运行在Native的App中的,很多东西都离不开Native;要了解ninja的构建系统,尤其是当你需要去自定义一些编译属性,实现对Dart/Skia/Engine等的自定义处理;要了解lldbgdb,尤其是当你需要观察和理解其内部原理的时候;要了解flutter tools的工作原理,以便实现自定义的构建过程的时候;etc。

写在最后

闲鱼团队作为国内最早(国际上也特别早期)使用Flutter在大型项目中开发业务的团队,从alpha-&>beta-&>1.0,我们遇到了不少问题,也解决和推动Flutter完善了许多,尤其是Add2ExistingApp等内容。总的来看,Flutter是很适合做跨平台应用开发的,不管是全新应用还是重构已有的应用。 Flutter1.0是一个重要的里程碑,更是一个崭新的开始。虽然后面还会有不少的问题和困难,不管是轮子不够多,还是插件不够完善,但这条路是最贴近原生开发体验和性能表现的跨平台应用开发方案,期待和欢迎社区对Flutter感兴趣的同学和团队更多地接触,使用和反馈Flutter,让这一切期待中的美好早日实现。


CSDN作者郭芮

「Flutter 的核心是一个独立的可执行二进位文件,所以它不仅能改变移动开发的世界,也能改变桌面开发的世界。你只需编写一次代码,就可以在 Android、iOS、Windows、Mac 和 Linux 上以原生方式发布,还能通过 AngularDart 与 Web 共享业务逻辑——这一点意义重大。"

Google 官方今日宣布,Flutter 的 1.0 版本正式发布了!

在去年的 Google I/O 大会上,Flutter 首次出现在公众面前,彼时的 Google 表示,这是「一款新的用于创建移动应用的开源库」,并且「Flutter 将会帮你更容易,更快速地开发出界面美观的移动应用。」但是在此之后,业界一直持观望态度,Google 也似乎偃旗息鼓,不再折腾。

直到今年 2 月,Flutter 推出第一个 Beta 版本,很快便凭借强大的跨平台 UI 框架得到了开发者们的热烈响应,成百上千款基于 Flutter 开发的应用在 Apple Store 和 Google Play 上涌现。在今年 9 月的 Google 开发者大会上,Flutter Release Preview 2 正式公测,并宣布「这是正式版之前的最后一个预览版」。而现在,Flutter 1.0 版本终于正式发布了。

「全新的 UI 设计方式」Flutter

一般而言,移动开发者们在同时兼容 iOS 和 Android 时会选择走原生开发路线,把界面和逻辑在不同平台分别实现,但这往往面临著复杂庞大的工作量、难以为继的运营维护。因此,也有很多开发者选择用同一套代码兼容多个平台,但这样往往会导致运行速度和产品保真度的损失。

正是在这种情况下,Google 向外推出了 Flutter 「这一全新的 UI 设计方式」,还表示能够为开发者提供了两全其美的解决方案——既能用原生 ARM 代码直接调用的方式来加速图形渲染和 UI 绘制,又能同时运行在 Android 和 iOS 两大主流移动操作系统上。

根据 Google 的官方博客介绍,Flutter 是应用内置的一个引擎,具有快速、高效、开放等特点。

1、Flutter 可以构建界面精美的应用

Flutter 具有强大的图像组合能力,开发者可以不受限制地堆叠任何图形、视频、文本和控制项。Flutter 内置了一系列的 widgets,这些 widgets 可以帮助实现在 iOS 和 Android 上的良好视觉体验。Flutter 集成并有最大程度地实现了 Material Design——这是 Google 的开放设计系统。

2、Flutter 的速度快

Flutter 基于 Skia 2D 硬体加速图形引擎,有媲美原生应用的速度。Flutter 的代码基于 Dart 平台,可以被编译成 iOS 和 Android 平台上 32 位和 64 位的 ARM 代码。

3、Flutter 非常高效

Flutter 引入了 Stateful Hot Reload(保持应用状态的热重载),这个新特性可以让移动开发者和设计师们实时迭代应用程序。通过 Stateful Hot Reload,无需重新启动应用就可以在程序运行的时候直接看到代码修改之后的效果,Stateful Hot Reload 改变了开发者们编写应用的方式。据 Google 用户反馈,开发者们表示该特性使得开发效率提升了三倍。

4、Flutter 是开放的

Flutter 是一个开源项目,全球数百位开发者在为其贡献代码。Flutter 的插件生态系统平台也充满活力,有数千款插件已经发布,避免了重复造轮子。由于 Flutter 应用程序使用标准的 Android 和 iOS 的编译打包工具 (build tools),因此它的开放还体现在您可以使用原生开发资源。

目前在 Google 内部,Flutter 已经被广泛用于多个产品,比如 Google Ads 已经将其产品的 iOS 版本和 Android 版本转向使用 Flutter。而且据 Google 官方透露,在正式版本之前全世界已经有多个公司开始使用 Flutter 来开发应用,包括 Abbey Road Studios、阿里巴巴、Capital One、Groupon、Hamilton、京东、Philips Hue、Reflectly 以及腾讯等。

Flutter 1.0 新特性

此次发布的Flutter 1.0 版本中,Flutter 正式开始使用 Dart 平台新的 2.1 版本,并修复了 Bug 和提高了稳定性。根据 Google 介绍,1.0 版本中将有两个新功能随正式版的预览模式提供给广大开发者,包括引入 Flutter 到现有工程(Add to App)和平台级视图(Platform Views)。

1、引入 Flutter 到现有工程 (Add to App)

起初在构思 Flutter 的时候,Google 主要关注于从零开始构建应用的场景。但事实上受制于很多因素,并不是所有开发者都能从零构建。显然,他们更需要能够在现有的应用中用 Flutter 添加新的功能,或者分步骤、分阶段将现有的应用程序迁移到 Flutter。

现在,Flutter 的架构则非常适合于这样的场景,每个 Flutter 应用都包含了一个用于托管 Flutter 的 Android 或 iOS 容器。此外,Google 还在不断改善渐进式接入 Flutter 的体验,包括更新模板、优化工具、完善指南等等,还能在不使用调试器启动应用的情况下介入和监测现有 Flutter 进程。

2、平台级视图(Platform Views)

此外,为了满足开发者将 Android 或 iPhone 平台的控制项嵌入到 Flutter 应用当中的需求,Flutter 中还引入了 AndroidView 和 UiKitView 这两个平台级视图的 widget 到 Flutter,可以将它们分别嵌入到指定的平台中。

Google表示其已经在 Android 平台上预览这一功能数月了,现在是时候将这一特性推广到 iOS 平台了。此外,像 Google Maps 和 WebView 这样的插件也已经可以享受到这一特性带来的种种便利了。

据了解,这些功能将于明年二月的季度更新中正式推出。

Flutter 项目应用端的拓展和实践

此外,Google 方面也透露,虽然 Flutter 的首要目标平台是 iOS 和 Android,但他们也在不断探索将 Flutter 拓展到手机端以外的更多平台上,Flutter Desktop Embedding 就是其中的一个。

Flutter Desktop Embedding 是一个使 Flutter 运行于 macOS、Linux 和 Windows 等桌面操作系统的项目。这是 Google 以探索的形式向用户展示 Flutter 是有可能运行在一些没有完整桌面环境的小型设备中的。

显然,有这一想法的不只是Google。在 Android 开发者 Norbert Kozsir 的博客中,就介绍了一个由他和 Simon Lightfoot 创立的 Flutter 桌面应用项目,其不仅可以开发真正的应用程序,也能用于快速移动开发。

以下是其博客内容全文:

Flutter 的核心是一个独立的可执行二进位文件,所以它不仅能改变移动开发的世界,也能改变桌面开发的世界。你只需编写一次代码,就可以在 Android、iOS、Windows、Mac 和 Linux 上以原生方式发布,还能通过 AngularDart 与 Web 共享业务逻辑——这一点意义重大。

我们先来看看它的基本思想。

原生桌面客户端,加速移动开发

但在讨论实际的原生桌面应用之前,我们先来看看Flutter桌面版能为移动开发者带来什么。

启动时间

在讨论任何生产力话题之前,有两件不可忽略的事情:一是 Android 模拟器的启动时间,二是 Gradle 的运行时间。

下面的 Gif 中我录制了我自己启动模拟器和运行默认的 Flutter 应用花费的时间,总共花了我 2 分 40 秒(想像一下这段时间能做多少事情)。

Android启动时间和运行Gradle的时间(10倍速)

如果我告诉你,这一切只需不到10秒,你会怎么想?原生方式运行应用,可以跳过在系统上运行Android和运行Gradle的所有额外开销。

再看看这个:

Flutter模拟器启动,原速

注意你都不需要离开IntelliJ,我们把所有运行Flutter所需的工具都做成了原生应用,能在所有支持Flutter的IDE中使用。

运行时可改变大小

不论是什么应用,你都想测试它在不同屏幕大小下的表现。该怎么做呢?

一种方式是跟朋友借一大堆不同尺寸的手机,或者建一大堆各种尺寸的模拟器,以确保应用布局在任何设备上都正常显示。但这看起来太麻烦了。

还有更好的办法吗?有!

这张图应该能说明一切问题

访问电脑上的资源

在开发和测试应用时,如果应用需要访问手机上的资源,那就需要先把所有测试用的文件都传送到模拟器上或设备上,这一步非常麻烦。如果能直接用操作系统的原生文件选择对话框来选择文件该有多好。

没错,这个也能做到!

桌面版支持文件选择对话框

这个功能最大的好处在于桌面版的实现使用了与移动版的实现相同的通道,因此不需要改变任何代码。

热重载和调试

这个功能看上去像是锦上添花,但对于每个高效的工程师来说,热重载和调试功能都是必不可少的。所以桌面版中也支持了这一功能!

原生应用中的热重载和调试功能

内存

最后很重要的一项就是内存,对于在笔记本电脑上或开发机器配置不高的人来说这一点很重要。

Android模拟器会吃掉大约1GB内存,想像一下如果运行两个模拟器(比如测试聊天应用等),再加上IntelliJ和非常吃内存的Chrome,可以想像电脑会有多慢。

Android模拟器占用了1GB内存

由于Flutter的嵌入器是原生的,因此不需要Android。这样一来它就非常小了。

原生应用只需要100MB内存

原生桌面应用

只是在桌面上运行Flutter应用还不能算是完整的、能用于产品的桌面应用。如果只是这样,那感觉像是在桌面上运行移动应用。那么还差什么?滑鼠悬停,游标改变,滚轮交互等等,所以项目中也加入了对这些功能的支持。

项目成功地实现了这些功能,而没有改动任何平台代码。所以,它是完全独立的包,可以包含在任何普通的 Flutter 应用中。但是,跟桌面嵌入器一起使用,就会出现奇迹。

用Flutter实现的通用聊天应用,桌面版

这跟在Android模拟器上运行的代码是完全一样的:

同时开发Android和桌面应用

注意它在模拟器上表现得与普通应用一样,但在桌面上就会改变游标,并添加滑鼠悬停效果。

桌面小窗体的展示

悬停:

游标:

目前这个项目依然在 alpha 阶段,相关代码很快就发布了(感兴趣的可以在 Twitter 上关注 Simon Lightfoot 以获得最新的消息)。总而言之,这个项目的目标是在不远的未来发布一种易于安装、易于设置、易于使用的东西。

参考链接:

  • https://mp.weixin.qq.com/s/hCIN42OMmmc6HkOveegwWQ
  • https://medium.com/flutter-community/flutter-on-desktop-a-real-competitor-to-electron-4f049ea6b061,译者弯月。


看看来自于官方的报道吧!

谷歌的野心,Flutter 的能力!不止步于移动平台哦,这个跨平台的能力有点强大哦!

前有 Flutter ,用的语言是 Dart,后有 Go ,谷歌是想一统天下平台啊!通吃的节奏!

目前有谷歌背书,只要步子走的稳,生态起来并成熟,还是很有希望的。新技术的建立和起来,与其他成熟语言技术相比,差就差在生态上。

从目前的情况和节奏来看,这次 Google 是认真的,也是在为它的下一代操作系统 Fuchsia 提前铺路啊!所以,如果想学的同学,可以平时提前学学了。

Flutter 1.0 正式版: Google 的便携 UI 工具包?

mp.weixin.qq.com图标

现在最大的问题其实不是界面的问题,而是底层能力还不足以支撑所有的业务能力。比如你要做一个扫码器,做一个相机,做一个多媒体播放器,做一个Proxy,做一个读写NFC的功能,做一个LBS相关的产品等等等等,都需要有Native相关的人来给你做一个可以获取底层能力的介面,Flutter并没有彻底打通生态所必需的所有东西,开发体验就像是半吊子的Hybrid App,让人比较难接受。

我依然看好Flutter,不代表我现在就要喜欢它现在就要去用它。你可以先学。


作为移动开发者,非常关注 Flutter,熬夜看了这场所谓的『Flutter 欢庆 Live』,还是挺值得的。

首先说没有料到这个 Live 上会发布 Flutter1.0 正式版,这意味著 Flutter 经过几年的发展,到今天已经相对之前比较稳定成熟了,这是个里程碑,尽管以后的路还长。

最大的惊喜是,Google 真的野心不小,到今天我们才知道,Flutter 的发展蓝图不仅仅局限于Android、iOS,而是把目光放在了全端,Mac、Windows、Web(关键词:Hummingbird,Google 还是没有放弃 Dart 在 Web 上的应用,这个实验项目将 Dart 编译为 Javascript),甚至树莓派。Flutter 的开发语言是 Dart,了解过 Dart 的朋友应该知道,Dart 从最早对标 Javascript 失败以后,便被 Google 定位于『应用编程语言』,是相对于 Golang 的,但是一直没有啥动静,甚至 Android 的官方开发语言都选择了别人家的孩子 Kotlin,不管之前怎么样,但是这一次看来 Google 准备借 Flutter 之势把 Dart 语言的应用编程的地位给巩固,作为两个亲儿子语言,Go 去做服务端了,前端、客户端的战略部署任务就直接交给 Dart 来配合 Flutter 框架了,这么想来也是没有任何毛病,值得一提的是,这一次 Live 中,Dart 也升级到了 2.1 版本。

另外,我们知道 Flutter 是 Fuchsia OS 的指定开发框架,不知道 Fuchsia OS 到时候会给我们带来怎样的惊喜。总而言之,Flutter 作为一个新框架刚一登场就展现了他的优秀,无论从设计理念,从实际构造,从性能指标,都算优秀,同时开发团队也为 Flutter 描绘了一个 Google 风格的宏伟蓝图,最主要的是给我们开发者以及消费者画了个大饼,但是作为一个 Google 的项目究竟能发展得如何还有待进一步观察,懂的人自然懂(打个广告:50大洋收Google 眼镜做收藏用,不议价),毕竟 Flutter 还有很多可以改进的空间(4000+issue要解决......),很期待 Flutter 能发展的像他们在这场 Live 中规划的一样好,无论如何,1.0版本的发布,之前观望的开发者们其实可以开始学习了,Flutter 的学习成本并不是特别高,尤其是 Java 过渡到 Dart,还算平顺。

突然想起来,还是要强调一点,Flutter 不能直接称为跨平台开发框架,而只是跨平台UI开发框架,so,目前想要实现 All in Flutter 还是挺困难的,我们需要轮子。

Flutter 桌面端开发框架项目?

github.com图标

Flutter Web端项目 — Hummingbird

google 牛逼。


推荐阅读:
相关文章