Flutter技术与实战(1)

Flutter技术与实战(1)

课前必读

为什么每一位大前端从业者都应该学习Flutter

  • Flutter开辟了全新的思路,提供了一整套从底层渲染逻辑到上层开发语言的完整解决方案:视图渲染完全闭环在其框架内部,不依赖于底层操作系统提供的任何组件,从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性;Flutter 的开发语言 Dart,是 Google 专门为(大)前端开发量身打造的专属语言,借助于先进的工具链和编译器,成为了少数同时支持 JIT 和 AOT 的语言之一,开发期调试效率高,发布期运行速度快、执行性能好,在代码执行效率上可以媲美原生 App。而这与 React Native 所用的只能解释执行的 JavaScript,又拉开了性能差距。

从0开始搭建Flutter工程环境

下载Flutter
配置环境变量
  1. 编辑path新建下载的Flutter的bin目录路径 。

    export PATH=~/Documents/flutter/bin:$PATH
    
  2. 用户变量新建镜像站点(Flutter源站在国内不太稳定)

    export PUB_HOSTED_URL=https://pub.flutter-io.cn  
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
  3. Flutter 提供了一个命令 flutter doctor 协助我们安装 Flutter 的工程依赖,它会检查本地是否有 Android 和 iOS 的开发环境,如果检测到依赖缺失,就会给出对应依赖的安装方法。

    flutter doctor
    
  4. AndroidStudio配置

    • 在Android Studio的Plugins安装Flutter和Dart插件 。
  5. 运行Flutter项目

    • Flutter项目默认入口为main.dart

      void main() {
        runApp(MyApp());
      }
      class MyApp extends StatelessWidget {
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
            return Center(
                child:Text('Hello World')
            );
        }
      }
      
    • Flutter 在开发阶段使用了 JIT 编译模式,使得通过热重载(Hot Reload)这样的技术去进一步提升调试效率成为可能。每次修改布局后,按ctrl+s就会热更新。但是热重载也有一定的局限性,并不是所有的代码改动都可以通过热重载来更新。

Dart语言概览

Dart是什么
  • 2011 年 10 月,在丹麦召开的 GOTO 大会上,Google 发布了一种新的编程语言 Dart。如同 Kotlin 和 Swift 的出现,分别是为了解决 Java 和 Objective-C 在编写应用程序的一些实际问题一样,Dart 的诞生正是要解决 JavaScript 存在的、在语言本质上无法改进的缺陷。

  • Dart 的诞生正是要解决 JavaScript 存在的。JavaScript 实际上是两类编程语言(C语言和Java语言)风格的混合产物:(简化的)函数式编程风格,与(简化的)面向对象编程风格。

  • Atwood 定律:凡是能用 JavaScript 写出来的系统,最终都会用 JavaScript 写出来(Any application that can be written in JavaScript, will eventually be written in JavaScript.)。

  • Google 未来的操作系统 Fuchsia 中,Dart 更是被指定为官方的开发语言。

Dart特性
  1. JIT和AOT

    • 借助于先进的工具链和编译器,Dart 是少数同时支持 JIT(Just In Time,即时编译)和 AOT(Ahead of Time,运行前编译)的语言之一。

    • JIT 在运行时即时编译,在开发周期中使用,可以动态下发和执行代码,开发测试效率高,但运行速度和执行性能则会因为运行时即时编译受到影响。AOT 即提前编译,可以生成被直接执行的二进制代码,运行速度快、执行性能表现好,但每次执行前都需要提前编译,开发测试效率低。

    • 看代码在执行前是否需要编译即可。如果需要编译,通常属于 AOT;如果不需要,则属于 JIT。AOT 的典型代表是 C/C++,它们必须在执行前编译成机器码;而 JIT 的代表,则包括了如 JavaScript、Python 等几乎所有的脚本语言。

  2. 内存分配和垃圾回收

    • Dart VM 的内存分配策略比较简单,创建对象时只需要在堆上移动指针,内存增长始终是线性的,省去了查找可用内存的过程。
    • 在 Dart 中,并发是通过 Isolate 实现的。Isolate 是类似于线程但不共享内存,独立运行的 worker。这样的机制,就可以让 Dart 实现无锁的快速分配。
    • Dart 的垃圾回收,则是采用了多生代算法。新生代在回收内存时采用“半空间”机制,触发垃圾回收时,Dart 会将当前半空间中的“活跃”对象拷贝到备用空间,然后整体释放当前空间的所有内存。回收过程中,Dart 只需要操作少量的“活跃”对象,没有引用的大量“死亡”对象则被忽略,这样的回收机制很适合 Flutter 框架中大量 Widget 销毁重建的场景。单线程模型。
  3. 单线程模型

    • 它天然不存在资源竞争和状态同步的问题。这就意味着,一旦某个函数开始执行,就将执行到这个函数结束,而不会被其他 Dart 代码打断。
    • Dart 中并没有线程,只有 Isolate(隔离区)。Isolates 之间不会共享内存,就像几个运行在不同进程中的 worker,通过事件循环(Event Looper)在事件队列(Event Queue)上传递消息通信。
  4. 无需单独的声明式布局语言

    • 在 Flutter 中,界面布局直接通过 Dart 编码来定义。
    • Dart 声明式编程布局易于阅读和可视化,使得 Flutter 并不需要类似 JSX 或 XML 的声明式布局语言。所有的布局都使用同一种格式,也使得 Flutter 很容易提供高级工具使布局更简单。
    • 开发过程也不需要可视化界面构建器,因为热重载可以让我们立即在手机上看到运行效果。

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.yanghujun.com/archives/fluttertechnologycombat1

Buy me a cup of coffee ☕.