什么是Flutter?

·  阅读 4042
什么是Flutter?

Flutter简介

Flutter是Google推出并开源的移动应用程序(App)开发框架,主打跨平台、高保真、高性能。其采用Dart(官网中文网)语言作为开发语言,开发者可以通过Dart语言开发Flutter App,一套代码可同时运行在iOS和Android平台上。Flutter提供了丰富的组件、接口,开发者可以很快地为Flutter添加原生扩展。

Flutter诞生过程:

  • 2017 年 Google I/O 大会上,Google 首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter。
  • 2018年2月,Flutter发布了第一个Beta版本,同年五月, 在2018年Google I/O 大会上,Flutter 更新到了 beta 3 版本。
  • 2018年6月,Flutter发布了首个预览版本,这意味着 Flutter 进入了正式版(1.0)发布前的最后阶段。

跨平台自绘引擎

Flutter与其他用于构建App的大多数框架不同,因为Flutter既不使用WebView,也不使用平台(Android、iOS等)的原生控件。相反,Flutter使用自己的高性能渲染引擎来绘制Widget。这样不仅可以保证在Android和iOS平台上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia作为其2D渲染引擎,Skia是Google的一个2D图形处理函数库,包含字型、坐标转换以及点阵图都有高效能且简洁的表现,Skia是跨平台的,并提供了非常友好的API,目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎,值得一提的是,由于Android系统已经内置了Skia,所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包,这也是为什么Flutter APP的Android应用安装包比iOS应用安装包小的主要原因。

高性能

Flutter采用GPU渲染技术,Flutter编写的应用是可以达到120fps(每秒传输帧数),这也就是说,它完全可以胜任游戏的制作,而我们常说的RN的性能只能达到60fps,这也算是Flutter的一个超高竞争力,官方宣称Flutter甚至会超过原生性能。如果你想迈入移动游戏领域,学习Flutter也是一个非常好的选择。

Flutter高性能主要靠两点来保证:

  • 首先,Flutter App采用Dart语言开发,Dart在JIT(即时编译)模式下,速度与JavaScript基本持平;而且Dart还支持AOT(提前编译)模式,当以AOT模式运行时,JavaScript便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。
  • 其次,Flutter使用自己的渲染引擎来绘制UI,布局数据等由Dart语言直接控制,所以在布局过程中不需要像RN那样通过JavaScriptCore在JavaScript和原生之间进行通信,这在一些滑动和拖动的场景下具有明显优势,因为在滑动和拖动过程中往往都会引起布局发生变化,所以JavaScript需要和原生之间不停的同步布局信息,这和在浏览器中要JavaScript频繁操作DOM所带来的问题是相同的,都会带来比较可观的性能开销。

为什么Flutter采用Dart语言开发?

这是一个很有意思,同时具有争议的问题,在了解Flutter为什么选择了Dart而不是JavaScript之前,我们先来介绍两个概念:JIT和AOT。

目前,程序主要有两种运行方式:静态编译和动态解释。

  • 静态编译:静态编译的程序在执行前全部被翻译为机器码,通常将这种类型称为AOT(Ahead of time)即“提前编译”;
  • 动态解释:动态解释的程序是在执行中一句一句边翻译边运行的,通常将这种类型称为JIT(Just-in-time)即“即时编译”。

AOT程序的典型代表是用C/C++开发的应用,它们必须在执行前编译成机器码,而JIT的代表则非常多,如JavaScript、Python等,事实上,所有脚本语言都支持JIT模式。但值得一提的是JIT和AOT指的是程序运行方式,它们和编程语言并非强关联,有些语言既可以以JIT方式运行也可以以AOT方式运行,如Java、Python,它们可以在第一次执行时编译成中间字节码,然后在之后执行时可以直接执行字节码,也许有人会说,中间字节码并非机器码,在程序执行时仍然需要动态将字节码转为机器码,是的,不过通常我们区分是否为AOT的标准就是看代码在执行之前是否需要编译,只要需要编译,无论其编译产物是字节码还是机器码,都属于AOT。在此,读者不必纠结于概念,概念就是为了传达精神而发明的,只要读者能够理解其原理即可,正所谓得其神忘其形。

现在我们看看Flutter为什么选择Dart语言?笔者根据官方解释以及自己对Flutter的理解总结了以下几条(由于其它跨平台框架都将JavaScript作为其开发语言,所以主要将Dart和JavaScript做一个对比):

  1. 开发效率高
  • 基于JIT的快速开发周期:Flutter在开发阶段采用JIT模式,这样就避免了每次改动都要进行编译,极大的节省了开发时间;(Dart运行时支持)
  • 基于AOT的发布包:Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能,而JavaScript则不具有这个能力。(编译器支持)
  1. 高性能

    Flutter旨在提供流畅、高保真的UI体验。为了实现这一点,Flutter需要能够在每个动画帧中运行大量的代码,这意味着需要一种既能提供高性能的语言,又不会出现丢帧的周期性暂停,而Dart支持AOT,在这一点上可以做的比JavaScript更好。

  2. 快速内存分配

    Flutter框架使用函数式流,这使得它在很大程度上依赖于底层的内存分配器。因此,拥有一个能够有效的处理琐碎任务的内存分配器将显得十分重要,如果Dart语言缺乏此功能,Flutter将无法有效地工作。当然Chrome V8的JavaScript引擎在内存分配上也已经做的很好了,事实上Dart开发团队的很多成员都是来自Chrome团队的,所以在内存分配上Dart并不能作为超越JavaScript的优势,但对于Flutter来说,它需要这样的特性,而Dart也正好满足而已。

  3. 类型安全

    由于Dart是类型安全的语言,支持静态类型检测,所以可以在编译前发现一些类型的错误,并排除潜在问题,这一点对于前端开发者来说可能会更具有吸引力。与之不同的,JavaScript是一个弱类型语言,也因此前端社区出现了很多给JavaScript代码添加静态类型检测的扩展语言和工具,如:微软的TypeScript以及Facebook的Flow。相比之下,Dart本身就支持静态类型,就是它的一个重要优势。

  4. Dart团队的支持

    由于有Dart团队的积极投入,Flutter团队可以获得更多、更方便的支持,正如Flutter官网所诉:“我们正与Dart社区进行密切合作,以改进Dart在Flutter中的使用。例如,当我们最初使用Dart时,该语言并没有提供生成原生二进制文件的工具链(工具链对于实现可预测的高性能具有很大的帮助),但是现在它实现了,因为Dart团队专门为Flutter构建了它。同样,Dart VM之前已经针对吞吐量进行了优化,但团队现在正在优化VM的延迟时间,这对于Flutter的工作负载更为重要。”

Flutter框架结构

下面我们将对Flutter的框架做一个整体介绍,旨在让读者心中有一个整体的印象,这对初学者来说非常重要。如果一下子便深入到Flutter中,就会像是一个在沙漠中没有地图的人,即使可以找到一个绿洲,但是他也不会知道下一个绿洲在哪儿。因此,无论学什么技术,都要先有一张清晰的“地图”,而我们的学习过程就是“按图索骥”,这样我们才不会陷于细节而“目无全牛”。接下来,我们看一下Flutter官方提供的一张框架结构图:

Flutter框架结构图

Flutter Framework

这是一个纯Dart实现的SDK,它实现了一套基础库,自底向上,简单介绍一下:

  • 底下两层(Foundation层和Animation、Painting、Gestures层)在Google的一些视频中将这两层合并为一个Dart UI层,对应的是Flutter中的dart:ui包,它是Flutter引擎暴露的底层UI库,提供动画、手势及绘制功能。
  • Rendering层,这一层是一个抽象的布局层,它依赖于Dart UI层,Rendering层会构建一个UI树,当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终将UI树绘制到屏幕上,这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分,它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui包)。
  • Widgets层是Flutter提供的一套基础组件库,在基础组件库之上,Flutter还提供了Material和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景,只是和Widgets层和Material、Cupertino层打交道

Flutter Engine

这是一个纯C++实现的SDK,其中包括Skia引擎、Dart运行时和文字排版引擎等。在代码调用dart:ui库时,调用最终会走到Engine层,然后实现真正的绘制逻辑。

总结

Flutter框架本身有着良好的分层设计,本章旨在让读者对Flutter整体框架有个大概的印象,相信到现在为止,读者已经对Flutter有一个初始印象,在我们正式动手之前,我们还是需要多了解一下Flutter的开发语言Dart。

如何学习Flutter

资源

  • 官网:阅读Flutter官网的资源是快速入门的最佳方式,同时官网也是了解最新Flutter发展动态的地方,由于目前Flutter仍然处于快速发展阶段,所以建议读者要时不时的去官网看看有没有新的动态。
  • 源码及注释:源码和注释应作为学习Flutter的第一文档,Flutter SDK的源码是开源的,并且注释非常详细,也有很多示例,实际上,Flutter官方的SDK文档就是通过注释生成的。源码结合注释可以帮你解决大多数问题。
  • Github:如果遇到的问题在StackOverflow上也没有找到答案,可以去Github Flutter 项目下提issue。
  • Gallery源码:Gallery是Flutter官方示例APP,里面有丰富的示例,读者可以在网上下载安装。Gallery的源码在Flutter源码“examples”目录下。

社区

  • StackOverflow:如果你还没听过StackOverflow,那么我现在就可以告诉你,它是目前全球最大的程序员问答社区,也是现在活跃度最高的Flutter问答社区。StackOverflow社区除了世界各地的Flutter使用者会在上面交流之外,Flutter开发团队的成员也经常会在上面回答问题。
  • Flutter中文网社区Flutter中文网是wendux(牛人)维护的Flutter中文网站,也是目前最大的Flutter中文资源社区,上面提供了Flutter官网的文档翻译、开源项目及案例,还有申请加入组织的入口哦!笔者的文章很多都是整理于此。
  • 掘金:掘金的Flutter主页目前收集了不少的专业性博客文章,读者可以自行浏览。
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改