Flutter2.0重磅发布!带你一文打尽Flutter Engage

3 月4日凌晨 ,Flut terEngage活动以在线的方式举行。整场活动内容丰富,精彩不断,下面淘系技术专家就带您回顾下这场年度Flutter技术的盛宴。



  Flutter2.0


整场活动中,最使人激动的就是Flutter2.0的发布了。那么Flutter2.0主要带来了哪些新的特性呢?
javascript


一句话总结,Flutter2.0最大的变化是除了以前已经处于stable渠道的移动设备支持外,桌面和Web支持也正式宣布进入stable渠道。html



▐  Dart2.12



独一无二的应用构建能力集合java



可移植性

Dart的高效编译器能够生成针对x86&ARM的机器码,以及针对Web优化过的JS其普遍支持了各类目标移动设备、桌面PC、后端应用以及更多。
web



高开发效率

Dart提供的HotReload特性,支持快速的,可交互的开发体验,不管是原生设备仍是Web应用均如此。Dart也提供丰富的对象用于应用开发,包括Isolate模型,async/await并发处理,以及事件驱动的开发模式。sql


健壮

Dart的健全空安全类型系统能够在编译期捕获错误,这一切高度可伸缩可信赖,并被用于支持大量的应用,如高度重要的Google AdsGoogle Assistant,运行长达长达十年以上编程



健全的空安全redux


健全的空安全是自从Dart2.0引入健全类型系统后,Dart语言的一大改进。空安全进一步加强了类型系统,使得开发者能够去捕获空错误,这也是应用崩溃的一大常见缘由。经过引入空安全机制,开发者能够在开发期捕获空错误,避免线上崩溃。canvas


如下是健全空安全的几大原则后端

默认非空: 对于类型系统的根本性变化浏览器

默认使用non-nullable

增量迁移到空安全


针对如下代码,空安全将带来显著的机器码减少:

class Animal { int age = 0;}int getAge(Animal a) { return a.age; }



持续改善已有功能

GooglePay包大小经过针对Flutter的优化大小下降了14%

针对不一样的输入,UTF8Decoder最快能够加速20x



用于集成Dart和C的FFI


Dart FFI使得你能够利用已有的C库代码,这样不只提升了可移植性,也能够在性能敏感的场景下充分利用高度调优的C代码。Dart2.12中,FFI已经脱离beta阶段,被认为是stable,可线上使用。并新增了如下特性。

  • 按值传递结构体

  • 结构体嵌套

  • 自动生成FFI绑定



Dart语言的下一步

  • 类型别名

  • 三相移位操做符

  • 通用元信息注解

  • 静态元编程


▐  Web


FlutterWeb正式进入stable渠道。随着这一初始stable的发布,已有Flutter代码Web平台支持将进入一个新的阶段,换句话说,当你使用Flutter2.0建立App时,Web只是一个新增的设备目标。

借助Web平台的诸多能力,Flutter构建了可用于富交互Web应用的基础。Flutter For Web(FFW)主要聚焦于高性能及高保真的渲染性能。除过HTML渲染后端外,FFW也新增了一个CanvasKit的渲染后端。以及诸多针对Web的特性,好比Link Widget,使得你的应用在浏览器中的运行能够真的感受是一个Web应用。

在这一阶段,FFW主要聚焦如下应用场景:

Progressive Web Apps(PWA)
Single Page apps(SPA)
将已有Flutter移动应用扩展到Web侧


架构设计

整个框架使用Dart编写,总计约70w行的Flutter框架核心代码针对全部平台是一致的,不管是mobile,desktop仍是如今的web.你既可使用dartdevc或者dart2js将代码编译成javascript,进而运行在服务器上。


鉴于Dart自己能够将整个Flutter框架编译成JS,将Flutter运行在Web上的核心问题就是将移动应用的底层C++渲染引擎替换成对应的Web平台API。Flutter并非简单地将Widget编译成对应的HTML元素。相反,其Web引擎提供了两种渲染后端选择,HTML后端用于下降包大小,并提供普遍的兼容度。


CanvasKit后端使用了WebAssembly和WebGL来在浏览器Canvas上渲染Skia绘图指令, 具备更高的性能和组件密度,但增长了大约2M的下载包大小。你能够经过如下命令来指定渲染后端。


--web-renderer html

--web-render canvaskit



稳定的Web支持

Showcase

Rive

Rive, 是一个用于建立自定义动画的工具,使用Flutter For Web来重构其代码,并已经beta可用。
https://rive.app

Flutter Plasma

Flutter Plasma展现了一个运行在Safari, Firefox, Edge和Chrome上的Flutter Demo。
https://flutterplasma.dev

iRobot

iRobot教育使用Flutter开发了iRobot Coding App,经过将其在Web可用,提供了随处可用的针对任何人的代码学习体验。

https://code.irobot.com/#/

Mobi

Moi Mobiili, 一个现代移动虚拟网络运营商,近期使用Flutter发布了他们的Web应用。
https://www.moi.fi


Web的相关特性

自定义URL策略

新的Link Widget

基于Canvas的文本度量和渲染

文本交互(选择,拷贝,粘贴等)

支持桌面表单因子


展望

  • CanvasKit的进一步支持,好比CORS图片

  • PWA的全离线支持

  • 文本渲染以及功能

  • 插件生态系统的完善


▐  桌面支持


Flutter Desktop也正式进入stable渠道,即初始发布状态。

Canonical正在同Flutter合做以将Flutter引入桌面,工程师们正在开发代码而且将其部署到Linux上。对其而言,各类各样的硬件配置下提供稳定可靠而且优美的体验是相当重要的。再日后看,Flutter将是后续Canonical桌面以及移动应用开发的默认选择。


* 文本编辑体验
* 鼠标输入体验
* Scrollbar
* IME支持
* 桌面额外功能支持
* 更新的文档支持以将应用发布到特定应用商店


▐  折叠设备支持


微软在持续扩大其对于Flutter的支持。除了在Flutter Engine中持续贡献高质量的Windows支持外,微软正在增长对于新的可折叠Android设备的引擎支持。这些设备引入了新的设计模型,App既可扩展其内容,也可充分利用多屏特性提供side-by-side的体验。

https://flutter.gskinner.com

此外,gskinner开发的Folio App,很好地诠释了Flutter在多平台上的运行。经过一套代码,不管是在小,中等仍是大的屏幕上,Flutter都可处理好触摸,键盘和鼠标输入,并同平台的特性适应良好(好比Web上的连接以及桌面上的菜单)。

▐  嵌入式设备支持


丰田公司,宣布了他们计划提供市场上最好的机动车上的数字体验,经过使用Flutter来构建娱乐信息系统。使用Flutter标志着同之前车载软件彻底不一样的开发体验。Toyota之因此使用Flutter,是由于如下的缘由:

  • 高性能和AOT一致性

  • 智能手机层的触摸机制

  • 人类工程学

  • 从客户反馈中快速迭代


▐  工具链


FlutterFix

现在有超过50w的Flutter开发者,咱们所面临的的设备平台也愈来愈多。当框架变得成熟,愈来愈大的时候,咱们愈来愈须要去避免对于框架的修改,不要去破坏愈发庞大的代码库。然而,为了持续改善Flutter,咱们也须要可以去对API作Breaking修改,问题来了,如何去持续改善FlutterAPI而不阻断开发者体验呢?咱们提供了FlutterFix。


Flutter Fix包含了如下特性:

dart fix——新提供的命令行选项dart fix可用于查找哪些API已经被废弃,如何去更新这些API。

提供可供fix的选项
IDE插件集成从而能够经过选择完成修改


DevTools

  • IDE插件可帮助开发者清零问题,即使是DevTools还未启动。

    经过点击按钮,便可快速找到引起问题的Widget。目前仅支持Layout Overflow异常,但DevTools团队计划去涵盖全部的常见类型异常。

  • 轻易发现高分辨率的图片,跟踪下降过分的包大小与内存使用

  • Inspector新增对于固定Layout的展现能力

  • 内存视图更快,小,易于使用

  • 日志Tab增长搜索与过滤功能

  • 在DevTools启动前便可跟踪日志

▐  社区与生态数据


Flutter1.0发布至今已经两年有余,Flutter共计关闭了24541个Issue,合并了来自765个贡献者的17039个PR。目前共计有50w+的Flutter开发者,超过15w的Flutter应用。

目前有15k的针对Flutter和Dart的Package,这其中包括了亚马逊,微软,Adobe,阿里巴巴,eBay,Square等公司,也要报关键包诸如Lottie, Sentry, SVG,以及Flutter Favorite推荐的sign_in_with_apple, google_fonts, geolocator和sqlite.


▐  其余


  • Add2App中的多引擎实例
    过去,额外的Flutter引擎建立会形成同第一个实例一样的内存开销。在Flutter2.0上,咱们将这一内存开销减小到了每一个实例180KB,下降了99%之多。由此,咱们推荐在你的原生App中去使用多个Flutter引擎实例。

  • DartPad升级到支持Flutter2.0

▐  AskFlutter圆桌




参与这场圆桌的成员有:Andrew Brogdon(主持人)、Eric Seidel(Flutter负责人)、Ian Hickson(Flutter技术负责人)、 Mariam Hasnany(FlutterForWeb PM)、Frank van Puffelen(开发者项目工程师)。
如下针对一些重要的问题作了摘录:

主持人

何时FlutterWeb能够供生产环境使用?

M

好消息是,今天Flutter Web正式在stable渠道可用。你无需enable任何flags,便可将Web做为Flutter应用的目标设备。也就意味着,对于任何已经有Flutter Web App的开发者,你如今能够用stable渠道来构建你的应用,若是你是要新开发Flutter Web Apps,快来检出把。

主持人

什么是Flutter Web的理想用户场景呢?

M

这真的是一个好问题,随着此次标志性的发布,咱们已经聚焦在构建富交互Web应用的基础。若是你已经有一个Flutter移动应用,你如今可使用一样的代码来构建其Web版本,而后把你的用户群基础扩展到整个Web应用。不只如此,这对于构建PWA或者SPAde应用来讲也是一个额外的优点。这些应用一般使用大量的动态内容,交互UI,咱们一般认为这三种是最适合的。固然为了支持文档为中心的页面咱们还须要不少工做去作。好比,传统的HTML页面有不少的文本,静态的内容。因此我想如今咱们的确已经很适合来开发Web应用。

主持人

目前在Github上有超过8200个Open Issues、Flutter彷佛有些人手不足,有没有计划加以改善这种问题或者大家的优先级是什么?

I

是的,咱们的确有这么多,正如Netlinx(提问者)问道的,咱们有8000多处于Open状态的Issues, 但重要的是咱们正在尽力去解决他们,好比去年咱们在Github上收到了15000多Issues,咱们也关闭了15000issues。咱们对修复和解决bug的比例仍是很高兴的。这一数字表征了咱们有多少用户。越多人使用,就有越多的bug提出。咱们解决issue的数字是一个贡献者多少的指标,咱们不少贡献者。在Github的Flutter Hacker组里,咱们有超过200人。一半以上是谷歌员工,大部分贡献者并非。事实上,部分Flutter Team的人是来自开源项目的,他们多是微软或者Canonical,或者是使用本身时间的志愿者。不一样的人投入的时间不一样,他们都给这个项目作出了共享,但愿咱们能够解决更多的问题,让Netlinx高兴。

主持人

Flutter Web何时会废弃URL中的#?

M

这是一个很好的问题。让咱们从为何它的存在开始,今天咱们有时候要使用hash URL策略,这是当咱们初始这个Web引擎的时候决定的。也就是说当你有Flutter具名路由的时候,咱们基本上是初始化这些路由做为hash的一部分,添加到URL上。随着今天Stable的发布,咱们有了新的办法来自定义URL,从URL中丢弃hash。这样你就能够按照本身的方式来构建URL,配置其他的子URL,实现deep link或者说同朋友来一块儿分享。社区中也有一个叫作URL Strategy的插件,它实现了咱们在文档中的指南,以一种很简单的方式。


主持人

Flutter依然有不少Mac M1上的兼容性问题,大家是否在加以解决仍是说我须要买一个旧的Intel Mac?


E

我想说你不须要买一个新电脑,我建议你今天再试试。Flutter2.0上有不少针对M1的优化。其实咱们也是同社区同一时间知道M1新发布的这类信息的。当天咱们就订购了一个M1的开发机并用它开始工做。咱们将其分为了三个桶,用来运行App, 工具链以及开发工具。据我所知,前两个桶其运行都是良好的。固然随着Flutter2.0的正式发布,若是你遇到了M1或者其余的问题,咱们想听到你的反馈。正如Ian所说,咱们天天有不少Issues,咱们想去尽快去解决他们。所以,快去试试Flutter2.0吧,我想它应该会工做良好的,并且也会持续工做很好,由于咱们会作更多代码修改。

I

M1有意思的是它几乎是一个全新的平台,由于咱们之前历来没有用ARM做为host。今天咱们发布Web和Desktop,可是,实际上,Apple Silicon是苹果本身的平台,咱们要去支持。虽然咱们如今已经支持当前release的macOS,可是依然有大量的工做要去作。

主持人

Flutter Dart团队是否计划去提供针对App开发的官方指南?相似Android的Jetpack?

I

我要笑了,由于你把这个问题丢给我彷佛你不知道这个答案同样。咱们已经讨论了好几个礼拜了,是的,咱们有,实际上,我想或者是今天或者是很快,咱们会发一个新的模板到Flutter master分支,这个模板基本上就是这个问题的答案。如何去使用最佳实践来建立和应用,状态复原等等?不只是这个问题的答案。编程的核心在于针对这些问题有不少的差异,不一样的App有不一样的须要,咱们但愿这样特定的模板能够真的帮助到你们,咱们也但愿后续能够有针对不一样架构类型的模板。可能你更喜欢redux而不是咱们在模板中使用的。这个今天不会随着Flutter2.0发布,可是我想会在将来几个月的stable版本中发出。

主持人

空安全是否会破坏已有App? 是否有一些内容须要被迁移?

E

这个问题是你可以去迁移。甚至有个工具可使用。我想应该叫作dart fix,你能够在你的代码库上运行它,将会帮助你去将代码改为Null aware.

I

若是你关注了更早的Keynote,咱们有一章是关于他如何工做的。这并不会产生破坏性,你首先要确保你的依赖都已经顺利迁移。若是你的依赖没有迁移,对你来讲迁移本身的代码将很困难。这是可能的,但会变的低效。因此,如你所知,若是你有一个包尚未迁移,去让这个包的开发者完成迁移。即使不迁移,也不会有特别的破坏性。正如Keynote提到的,这是为何咱们不把此次发布叫作Dart3.它是向后兼容的。同其余语言同样,Dart空安全里,你能够决定使用哪一个版本,Dart2.0或者更高。咱们在Flutter Sample仓库里经历过这些,咱们观察例子,看看有多少依赖。对他们进行排序,随着Flutter2.0,咱们事实上已经处理完了Sample仓库。另外一个咱们部署空安全方式的好处是,你能够同时编译空安全和非空安全,编译器本身会使用空安全优化。他能够在编译空安全代码的时候知道类型。当到了非空安全代码边界的时候,他会添加判空逻辑。咱们称之为非健全空安全。若是我没记错的话,于是你的代码能够在混合模式下执行,也是能够的。

主持人

Flutter是否适合3D渲染?

E

我来回答吧。咱们是把Flutter做为2D系统构建的。其实也有不少人用它来作3D工做。咱们提供的API能够用来在一个屏幕上绘制2D对象。要支持3D,人们能够自行建立2.5D或者3D对象,而后经过纹理这样的方式嵌入Flutter.有不少人就这么作。

事实上Keynote中,我想就提到了Wallace & Gromit app。

它里面就有2D和3D内容。将两者混在一块儿是可行的,可是再说一遍,Flutter是针对2D体验设计的。

主持人

Flutter对于桌面的支持怎么样?

I

是的,Flutter Desktop现在已经在stable渠道可用,尽管咱们不认为它是彻底stable了,咱们支持macOS, Windows和Linux如今。还有什么呢?咱们尚未提供你可能须要的全部必须特性,例如,咱们目前尚未支持多窗口,尽管这已经在开发了。咱们还有不少努力。支持基本的单窗口App是很是稳定的。我本身就写了一个数独应用,运行在Mac上,工做很棒。

E

是的,我想多说一些,我喜欢Flutter Desktop,而且他已经在stable渠道可用,他的开发体验很棒。你只须要打开它,Flutter本身就正常运行了,这种工做体验很棒。试试吧,给咱们写反馈,我想说,对于我,Flutter Web和Desktop公共的部分很棒。

主持人

何时首次打开App动画卡顿的问题能够获得解决?

E

这是一个广泛的问题,特别是最近几周,我在Reddit上写了很长的帖子,我也正在写一个更长的博客。我想说的是性能一直是Flutter最基础的一个衡量,当咱们五六年前讨论这个项目的时候,咱们就在说先谈论性能。在咱们的任务列表中,性能是排名第一的。这不只仅是文字,咱们经过各类方式去保证这一点。全部的提交都要首先经过各类各样的性能测试,包括全部平台。咱们一直在追求性能优化,天天都是如此。尤为当面对首次启动的动画卡顿的问题,咱们意识到这个问题已经有一段时间了,尤为是iOS上。过去的一年这个问题在某些场景下越发恶化。当从OpenGL迁移到Metal的时候,咱们不可以在去缓存Shaders,你必须使用GPU去产生这些像素。不论如何,咱们已经充分意识到有这样的问题,正在努力去解决,不少人力投入其中。Ian就在攻坚这些问题。

I

是的,我一直在关注这些卡顿的issues,这是我如今很是关注的问题。你能够看看Github Probject188, 我心里里一直记着这个数字由于我常常打开它。那里有全部相关的问题。你能作到最好的事情就是,如同咱们以前讨论的,若是你遇到应用卡顿,请提一个bug,带上复现代码,包括显示卡顿的视频,以及时间线的trace以说明你的应用在视频中具体在干什么。这是目前对于咱们来讲最有帮助的了,咱们能够去研究特定的Case,他们并不都是由于一样的缘由形成的。即使是Shaders的缘由,也不必定是由于一样的Shaders。全部这些不一样的bug将会被以不一样的问题加以解决。

主持人

谷歌打算如何在内部使用Flutter Web?

E

我不能,你知道的,谈论其余团队的计划,我能说的是有不少团队正常尝试使用Flutter Web. Flutter Web今天刚刚来到stable渠道,咱们也正在给内部团队相似的指引,知道的,咱们依然在解决各类问题。因此今天并无什么能宣布的,可是我能够期待有更多的对于Flutter Web的使用。我致力于这个工程技术,认为这是一种更好的方式来写一次代码,能够运行在各个平台上。咱们已经看到不少谷歌团队接受了Flutter的这一策略,我想Flutter会继续来到更多的应用场景的。

I

咱们已经看到内部的不少工具使用Flutter For Web.当这些工具背后没有一个大的团队的时候,他们须要一些有用且能够高效开发的工具。好比,在Flutter团队里,咱们使用Flutter Web来开发一些内部工具,用于把公共的Flutter代码迁移到如GooglePay这样的内部仓库中,以及供其余团队使用。这些工具都是使用Flutter写的。

主持人

Dart什么时候支持WebAssembly?

I

这意味着不少问题,咱们实际上已经在Flutter For Web中使用WebAssembly了。Mariam可能能够谈更多,简单来讲,咱们有其余两部分WebAssembly和Dart相关。一个是是否直接把Dart编译成WebAssembly,另外一个是,是否可以使用已经编译成WebAssembly的代码而且将其同Dart连接。对于第二问题而言,把WebAssembly链接到Dart,我想有一个包已经能够作到这一点。虽然不是最方便的方式,可是是可行的。至于将Dart编译成WebAssembly,目前仍是不可行的。这须要WebAssembly去实现一些尚不成熟的特性,WebAssembly GC,多线程等等。咱们对此很感兴趣,我想WebAssembly有潜力在将来几年真的成为一种统一的互操做语言。

M

Flutter Web目前有两个渲染后端,咱们默认使用HTML。HTML+DOM+CSS后端这种方式来渲染应用,但咱们也在尝试使用CanvasKit来进行渲染。今天咱们已经稳定下来,你可使用CanvasKit,它采用了WebAssembly和WebGLS来渲染App,以在浏览器中替代Skia.针对这两个不一样的渲染后端,咱们也有一些叫作auto的内容。他能够针对不一样的环境来选择渲染器,在桌面中使用CanvasKit,在移动浏览器中使用HTML,以便充分采用二者的优势。

主持人

同React,Angular相比你怎么看Flutter Web?

E

我首先想到的是,Flutter Web,咱们只是在Canvas中绘制,咱们认为是直通GPU/CPU,我想这是同React和Angular很大的不一样。

I

我老是很犹豫去把Flutter同别的技术去作对比,由于每个都有有效的用户场景。我不想去提React说,React这里好,那里很差。这彻底取决于React,咱们很高兴能沟通这些其余技术并存,咱们也但愿整个社区做为一个总体能够写出指南说,你知道什么样的场景下Flutter很适合,什么场景下Flutter For Web很适合,什么样的场景下React很适合等等。

主持人

你认为咱们应该使用哪一个渠道?

I

Stage主要的区别是,stable同其余渠道的差异,咱们会把fix pick到stable channel。所以你能够看到stable channel每次更新变化都很小。这一点不会发生在dev分支上。咱们不会检查dev渠道,若是dev出了问题,他会被在trunk上修掉,而后咱们从新会在将来几天生成一次dev.这也不会发生在主线上由于咱们一直在主线开发。这里就有风险,越近的代码,越容易有咱们没有捕获i的问题。固然,他们最终都会被修复,这是一个权衡。



▐  结论


这是个使人振奋的发布,至此咱们能够说Flutter真正作到了以应用为中心,全平台的支持。不管是面向移动,仍是面向桌面,或者是Web,Flutter都作到了产品级可用。面对日趋激烈的业务竞争,其可显著下降开发成本与人员不足/不均衡的问题,提供更稳定一致的用户体验。

但从另外一个方面讲,国内市场广泛面临的Legacy System的问题,目前看从官方渠道并无一个解决方案。尤为是对于桌面端的问题,Windows XP,Win32这样的应用场景下,以及FlutterWeb性能体验兼容度的问题,业务方仍是须要必定的备选方案。其余的诸如移动设备性能,包大小,动态性,浏览器兼容度,目前原理上自己已经不是问题,只是为了性能,大小,体验考虑,仍是须要作更多的深刻细致的优化工做。


▐  结论参考资料


What’s New in Flutter 2.0

Announcing Dart 2.12

Flutter web support hits the stable milestone

Language design funnel

Flutter design doc

Flutter Engage Youtube

Flutter Folio

Announcing Flutter support for foldable devices


🍊橙子说

Flutter2.0发布了,你有什么想法,一块儿到留言区交流呀~


✿    拓展阅读

做者|正物

编辑|橙子君

出品|阿里巴巴新零售淘系技术



本文分享自微信公众号 - 淘系技术(AlibabaMTT)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。

相关文章
相关标签/搜索