关于flutter:为什么选择Flutter-进行跨平台开发

Flutter 初见

本文概述：

• 文章以跨平台开发为背景，探讨了跨平台开发技术的倒退历史，以及 Flutter 的劣势。

• 思维导图：

学习跨平台技术的必要性

• 传统挪动端原生开发弊病：

  • 传统的原生开发须要保护 Android、IOS 两个平台；

• 应用 Flutter 进行挪动端开发的长处：

  • Flutter 为跨平台的 UI 框架，
  • 真正做到一套代码多端应用，减少代码复用，易保护；
• 在于求职中，若具备跨平台开发能力，将具备更强的市场竞争力；

跨平台开发倒退历史：

第一阶段：纯原生开发

• 开发成本大：须要保护 Android 与 IOS 两套代码；

• 动态化需要：需要发生变化时，纯原生利用大多须要通过版本升级来更新内容。

  • 短少热更新
• 原生开发不可代替的劣势：性能劣势

• 混合开发呈现的起因：

  • 当硬件设施性能晋升，反哺开发模式，即，可就义一部分性能应用混合开发，以缩小开发成本。

第二阶段：基于 WebView 的 PhoneGap & Cordova(H5)

• 呈现机会：

  • 在 20008 年提出 PhoneGap，其采纳 HTML + CSS + JavaScript，依靠于 Android 内置WebView 实现混合开发，声称靠近原生性能。后衍生出Cordova，这个是从PhoneGap 中抽离出的外围代码，因为收买起因，所以改了名字，其实还是一套代码；

• 技术现状：

  • 除了简略页面外，在思考性能时，根本不会采纳此种跨平台伎俩。

• 底层机制：

  • 在 Android 中应用 WebView 加载 HTML，HTML 传给 JS 一个JavaInterface, Js 通过传入的JavaInterface 进而调用到 Android 上的代码。

  • 图示：

• 外围代码：HTML 要与原生进行交互

  • Java 代码：应用 WebView 加载 HTML，HTML 传给 JS 一个JavaInterface

  webview.addJavaInterface(new AndroidPlatform(this),"android");

  • Js 代码：Js 通过传入的JavaInterface 进而调用到 Android 上的代码。

  <button type= "button"
      onclick = "android".toast('在 JS 中，通过传入的 JavaInterface 调用 Android 平台的代码(toast)')> 按钮
  </button>

  • AndroidPlatform.class

  public class AndroidPlatform{
      private Context mContext;
      
      public AndroidPlatform(Context context){// 结构
          mContext = context.getApplicationContext();}
      
      @JavascriptInterface
      public void toast(String msg){Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();}
  }

• 技术长处：

  • 构造较为清晰，写起来比较简单

• 存在的问题：

  • 兼容性太差：因为手机厂商的不同，所以细节上的实现也不同

  • 渲染性能太差：加载HTML 十分迟缓

    • 并且 HTML 中可能充斥过多JS 代码，而JS 可是 解释型语言，其执行效率太差了。

    • 补充：Java 不是编译型也不是解释型

      • Java 先编译成 xxx.class文件，再交由虚拟机解释执行；但存在 JIT，且Java9 引入了 AOT

  • 内存透露：WebView 的一大弊病

    • 惯例伎俩：将WebView 放入子过程，用完就杀掉
    • 底层机制：在应用 WebView 过程中耗费的内存，Android 不能在不须要的时候将其及时回收，因而导致内存越用越少

• 倒退历史：渲染效率

  • 思路：应用 WebView 渲染效率太差，那么，如果能够将渲染操作交给原生平台，这就十分好了。
  • 后果：Facebook 在 2015 年提出RN(React Navtie)

第三阶段：RN 的呈现：2015 年 — 2018 年

• 呈现机会：

  • 2015 年 4 月 Facebook 开源了 JS 框架 React 在挪动端的衍生物 React Native。

• 技术现状：

  • RN 学习老本高，且性能依然存在瓶颈(JS 通过桥与原生进行渲染)；

  • 2017 年百度全面放弃 RN。

    • Facebook + BSD + Patents 许可协定引起的寰球风暴，导致 BAT 弃用；
    • 因为用了 RN 后，本人搞出的专利都要收费(其实不是这个问题，实际上是公司之间的纠纷)

• 底层实现机制：渲染交由原生平台，但Bridge 老本过高

  • 图示：

  • 代码执行逻辑：程序员写好 Js 代码后，通过Bridge 与具体平台交互。平台读取Js 配置后，执行操作(new Button 等)， 留神，此时应用的是原生代码进行渲染

• 与原生开发相较：更新 UI 时

  • 原生开发中的 XML 是动态的：在更新 UI 时，咱们仅需操作的是原生 Java 代码
  • RN 开发中：所有代码都是应用 Js，那么在更新 UI 时，仍需原生平台通过Bridge 读取Js 代码后，能力更新 UI，相较于原生开发，RN 开发每次操作都须要多走一个Bridge，那么，Bridge 老本太高。

• 演变历史：

  • 思路：如果说，呈现一款框架能将咱们写好的代码，间接编译成各平台原生开发编译后的后果(机器码)，就好了。
  • 后果：依据此愿景，衍生出 Flutter；

第四阶段：Flutter 的呈现：2018 — 至今

• 呈现机会：

  • Flutter Beta1 于 2018 年开发者大会呈现于公众视线，甚至还没有公布正式版本时，国内头部互联网已开始联手推广。依靠于 Google，声称对标原生性能，具备更加标准的开发模式；

• 技术现状：

  • 由咸鱼团队率先引入，并在大厂逐渐站稳脚跟。

  • 图示：

• 底层实现机制：应用 Dart 语言，配合 Dart 虚拟机，Flutter 将代码编译后，间接就称为了对应平台的机器码；

  • 节俭掉了 Bridge：Flutter 依据不同的平台，编译成对应平台的机器码。

    • 编译型语言，性能最好，然而没方法跨平台；

  • 补充：

    • Java 能够跨平台，然而 JVM 不能跨平台
    • NDK 就不是跨平台，平台是指具体的操作系统；
  • DVM 是什么：Dart 语言的虚拟机，就是一个虚拟环境。

Flutter 根本介绍：

概述

• Google 跨平台挪动 UI 框架，能够兼容现有代码，且完全免费开源。
• 应用 DVM(dart 虚拟机) 防止了 Bridge的交互，Flutter 代码在编译后可在挪动端平台间接运行

• 补充：Fuchsia 零碎

  • 在 2019 年华为在测试这个零碎，这是 Google 开发的第三个零碎(Google Chrome、Android、fuchsia)

整体架构：

• 示意图：

• FrameWork 层：为业务代码提供 API

  • 提供各种根底组件库，包含各种 Widget、动画等

• Engine 层：

  • 由 C ++ 编写，下载的 Flutter 时候须要区别不同的操作系统，因为 C ++ 是不能跨平台的
  • Skia：是 Android 中绘图的底层，native 的 JNI 代码就是用这个的，Chrome 浏览器中也是这个
  • 虚拟机就在这 Engine 层

Flutter 倒退历史

• 倒退历史：

• 补充：Dart 语言的倒退历史

  • 因为 Google 外部对 JS 的不满，其开发出 Dart 语言，并在 Chrome 浏览器中内置了Dart 虚拟机，为Dart 语言 提供了执行环境。因为 Chrome 浏览器影响微小，Dart 语言 也在前端开发中占据一席之地。
  • Node.js 呈现又让 Js 焕发第二春，其充斥前端、后端、挪动端。甚至呈现 能被 Js 实现的，终究会被 Js 实现 等。Dart 语言 也逐步淡出公众视线，甚至 Dart 虚拟机也被从 Chrome 中移除了。

Flutter 特点：

• 疾速开发：热重载

  • 是什么：亚秒级批改，跟之前的instant run 相似

    • 但 AS 提供的instant run 在批改 UI 后，不必重新安装，即可查问到其装置在手机上后的实在成果；
    • 然而这个有点坑，基本上不必这个

  • 有什么用：节俭 重复装置、运行以测试 的工夫

    • 批改 UI 后，CTRL + S 就能够看到更新后的 UI，不必重新安装、运行。
    • 但，这个是有肯定弊病的，本质上只重载了特定区域的代码。

    • 热重载的底层原理：

      • 当咱们对我的项目，批改一部分代码后。Flutter，将咱们批改的中央，搞成一个配置文件，交给 DVM；
      • 其底层应用的 WebSocket，在 PC 端启动一个服务，手机端也连贯这个服务，这样就实现全双工通信。

• 富裕表现力和灵便的 UI

  • UI 设计师个别都是依照 IOS 设计的，然而 Android 中往往没有，这个时候须要咱们自定义 UI；
  • Flutter 内置了许多 widget 组件，其对立了 App 的格调；

• 本地性能：Flutter 声称其媲美原生性能

  • 只是较为趋近而已，Flutter 还是多了一层 Engine 层；然而还是算是目前性能最好的了

Flutter 开发与原生开发的比照：

• 从任玉刚大佬的博客能够看出如下几点

  • 安装包体积：雷同性能

    • 原生 APK 须要 1.3MB

    <!—->

    • Flutter APK 须要 7.5MB

  • 运行性能比照：雷同性能

    • CPU 资源占用：

      • 原生开发 CPU 占用率在 26.8%，且占用率曲线安稳
      • Flutter CPU 占用率在 35.5%，且占用率曲线平缓

    • 内存占用：两者相似

      • 但 Flutter 略高于原生开发

怎么判断一个 App 是否是 Flutter 开发的？

• 以腾讯 Now 直播为例；

  • 将其解压后在 lib 目录下，查看发现有 libflutter.so 那么就是了；

  <!—->

  • • Flutter 架构中的 Engine 层 就在这个文件
• lib 目录中的 .so 文件 是由 C /C++ 编译而成的，就是由 NDK 开发而成的，其作用能够简略看做 Java 类库

Dart 语言根本介绍

位置：

• Google 亲儿子，Flutter 官网指定语言

反对混合编译：JIT & AOT

• 基于 JIT 的疾速开发周期

  • Flutter 在开发阶段采纳 JIT 模式，防止每次改变都要进行编译，极大节俭开发工夫

  • 补充：什么是 JIT (just in time)

    • 在 Java在解释执行时，将热点代码段应用 JIT 编译成本地代码(机器码)；

      • 在程序执行期间，实时将代码编译成机器码
    • Flutter 在 DeBug模式下，应用 JIT，及时处理热点代码，间接将这段代码部署在终端设备上，防止反复编译
    • JIT 的毛病：其须要在执行后，挑选出热点代码，编译成机器码，导致 Flutter 在 DeBug 模式 下的效率不如Release 模式（应用的是 AOT）

• 基于 AOT 的公布包

  • Flutter 在公布时，能够通过 AOT 生成高效的 ARM 代码以保障利用性能；
  • Flutter 在Release 模式下就是应用 AOT，此时，间接运行机器码

Flutter 高刷新率：120 fps

• 概述：

  • Flutter 声称，能在一秒中刷新 120 张图片；
  • 人眼在 15 fps 就感觉很晦涩了，游戏个别在 30 fps 以上；
  • 为了保障疾速的用户体验，须要可能在每个动画帧运行大量代码，不能有周期性的进展，否则会造成掉帧；

• Dart 语言：

  • 单线程：isolate 机制

    • 不须要锁，不存在数据竞争和变量状态同步，其也没有线程上下文切换带来的性能损耗和锁导致的卡顿

  • 垃圾回收：多生代无锁垃圾回收器，专门为 UI 框架中常见的大量 widget 对象创立和销毁优化。

    • 新生代中寄存大量长期对象，此处会产生频繁垃圾回收；
    • 回收不了的，其gc 分代年龄 减少，满足条件后晋入老年代