Flutter

  • 问题：移动系统与终端设备的碎片化, 在不同平台上开发和维护同一个产品, 存在开发和适配的问题。
  • 小步快跑, 交付节奏
  • 框架原理和底层设计思想,渲染机制与事件处理方式,组件化解耦思路,工程化整体方法,与原生 Android/iOS 开发并没有本质区别.
  • RN
  • 熟悉Android 和 IOS开发知识
  • Flutter

02 Dart

  • 解决JS在语言本质上无法改进的缺陷
  • 借鉴 C 语言的基本语法
  • 借鉴 Java 语言的数据类型和内存管理机制；
  • 借鉴 Scheme 语言，将函数提升到“第一等公民”(first class）的地位；
  • 借鉴 Self 语言，使用基于原型（prototype）的继承机制。
  • 具有函数式与面向对象的特征
  • 手机与桌面应用为JS的宿主容器，比如React，RN，Vue，Electron,NW
  • Nodejs全栈
  • dart
  • 15年前，chrome内置Dart VM, 运行 Dart 代码;
  • 专注大前端与跨平台生态的语言, 集百家之长
  • JIT和AOT
  • 即时编译(JIT - Just in time)
  • 在开发周期中，动态下发和执行代码，开发效率高，但运行速度和执行性能受JIT的影响；
  • 缩短产品的开发周期,例如，热重载
  • 预编译(AOT - Ahead of time)
  • 生成二进制，运行速度快，执行性能好；但每次执行前需要提前编译，开发测试效率低；
  • 内存分配与垃圾回收
  • 内存分配策略, 创建对象时只需要在堆上移动指针,内存增长始终是线性的，省去了查找可用内存的过程。
  • 并发是通过 Isolate 实现的, 线程但不共享内存，独立运行的 worker。实现无锁的快速分配。
  • 垃圾回收, 采用了多生代算法
  • 单线程模型
  • 并发执行线程, 以抢占式的方式切换线程, 即每个线程都会被分配一个固定的时间片来执行，超过了时间片后线程上下文将被抢占后切换。存在资源共享，数据不同的问题；使用锁来保护共享资源, 锁本身又可能会带来性能损耗，甚至出现死锁等更严重的问题。
  • Dart 中并没有线程，只有 Isolate（隔离区）,Isolates 之间不会共享内存，就像几个运行在不同进程中的 worker，通过事件循环（Event Looper）在事件队列（Event Queue）上传递消息通信。
  • 无需单独的声明式布局语言
  • 在 Flutter 中，界面布局直接通过 Dart 编码来定义。
  • dart未来
  • 引擎 + 开发者接口 + 库 + 框架 + 应用程序 => 生态
  • 第三方库少，质量一般
  • 产品
  • Flutter 和 Fuchsia
  • 一套彻底的跨平台方案
  • Dart 凭借 Flutter 与 Fuchsia 的生态主攻前端和移动端，
  • 服务端，借助docker与go

03

跨平台开发方案的诞生背景、原理和发展历史

  • 开发，维护，成本，时间, 适配
  • 跨平台
  • 多快好省
  • 跨平台，三个时代：
  • Web 容器时代：基于 Web 相关技术通过浏览器组件来实现界面及功能, Cordova(PhoneGap)、Ionic 和微信小程序.
  • WebView + Bridge => Hybird
    原生应用内嵌浏览器控件 WebView（iOS 为 UIWebView 或 WKWebView，Android 为 WebView）,JS Bridge（桥）,根据与H5的交互协议，提供原生系统能力
  • H5加载、解析和渲染,比原生开发增加N个数量级；存在一边加载，一边解析，一边渲染
  • 泛 Web 容器时代：采用类 Web 标准进行开发，但在运行时把绘制和渲染交由原生系统接管的技术，代表框架有 React Native、Weex 和快应用，广义的还包括天猫的 Virtual View 等。
    - 大量 Web 标准的 Web 容器过于笨重, 导致性能和体验达不到原生水准;
    - Web 容器进行功能裁剪，在仅保留必要的 Web 标准和渲染能力;
    - 优化了 Web 容器时代的加载、解析和渲染, 把影响它们独立运行的 Web 标准进行了裁剪,放弃了浏览器控件渲染, 采用原生自带的 UI 组件实现代替了核心的渲染引擎,仅保持必要的基本控件渲染能力
  • 原生控件承载界面渲染, 但随着系统版本变化和API的变化而变化 => follow native
  • 自绘引擎时代：自带渲染引擎，客户端仅提供一块画布即可获得从业务逻辑到功能呈现的多端高度一致的渲染体验。Flutter
  • - skia渲染引擎
  • - 桨dart构建的抽象视图结构加工为GPU数据，通过OpenGL提供给GPU宣染, 一致性体验
  • - dart(JIT-just in time,即时编译 + AOT-Ahead of time, 预编译) -> 开发和执行效率

    • flutter flutter与Android原生通信 Platform Channel flutter和原生对比_Web

  • 跨平台开发方案
  • 思考角度

04

历史背景和运行机制，并以界面渲染过程为例

  • 历史背景
  • 跨平台开发
  • 原生
  • 多语言 => 低效率 + 高成本

  • 跨平台
  • 高效+低成本+体验一般
  • RN
  • 接近原生，只有5%的浏览器能力
  • 依托浏览器控件的web
  • Flutter
  • SDK
  • 语言 - dart
  • native渲染引擎+上层开发语言
  • 视图渲染(高保真)
  • 代码执行和渲染性能(高体验)
    RN与Flutter
  • RN - 通过js虚拟机扩展调用系统组件
  • Flutter - 完成组件渲染的闭环