乐趣区

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

jiezi

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 分代年龄 减少，满足条件后晋入老年代
退出移动版