跨端框架

技术揭秘与趋势分析

Airing

大纲

  1. 跨端框架的技术目标
  2. 跨端框架的技术方向
  3. 跨端框架的技术揭秘
  4. 跨端框架的技术要点
  5. 跨端框架的发展趋势
Airing

跨端框架的技术目标

Why there is a cross-end framework?

Airing

理想:六边形战士

只要写一遍,

哪里都能跑;

不仅写的快,

而且性能好;

生态能复用,

上线Bug少。

Airing

现实:软件设计中没有银弹

Airing

跨端框架的技术目标

  1. 提升人效
  2. 抹平差异
Airing

跨端框架的技术方向

What are the technical directions of the cross-end framework?

Airing

方向 1:偏前端(→客户端)


基于 WebView 的增强

Airing

基于 WebView 的增强

  1. ionic
  2. CORDOVA
  3. SONIC
  4. 小程序(WebView)
  5. 离线包方案
Airing

方向 2:偏客户端(→前端)


基于 DSL 的 Native 增强

Airing

基于 DSL 的 Native 增强

  1. DinamicX
  2. Tangram(七巧板)
  3. Jasonette
  4. DreamBox
  5. MTFlexbox
Airing

方向 3: KMM

Kotlin Multiplatform Mobile 代码共享

Airing

KMM: K2 编译器

前端: .kt 源码 →[解析器]→AST→[语义分析器]→ FIR

后端: 输入 FIR

  1. JVM IR 后端: → [生成器/优化器] → .class
  2. JS IR 后端: → [生成器/优化器] → .js
  3. LLVM 后端: → [生成器/优化器] → .bc
Airing

KMM: 工程结构

跨端代码(Shared module)+壳工程(Android/iOS App)

Airing

方向 4:大终端


基于 GPL 的 Native 增强

Airing
Airing
Airing

基于 GPL 的 Native 增强

  1. Native Widget

    React Native / Hippy / Weex
  2. Flutter
  3. 基于 Flutter 的自绘框架

    WebF,Kraken,Kun,Skyline
  4. 基于 Skia / OpenGL 的自绘框架

    TDF,Hippy 3.0,Weex 2.0,MagicBrash,Waft
Airing

框架抽象

Airing

跨端框架的技术揭秘

The solution of cross-end framework

Airing

Kun

Airing
Airing

Kun 的架构图

  • JS: QuickJS
  • CSS: Yoga + Kraken + FFI
  • Debugger: CDP
  • Test: Golden test
Airing
Airing
Airing

Kun 的构成

  1. 脚本引擎:QuickJS
  2. 渲染引擎:Flutter Engine
Airing

Kun 的特点

  1. 不支持完备的 W3C 标准,只支持各标准子集,包括:HTML 标签、CSS 样式集、WebAPI 标准
  2. 提供了一些定制的 Element 组件
  3. 组件的实现上采用 Widget 拼接的方式
Airing

WebF

Airing
Airing

WebF 的构成

  1. 脚本引擎:QuickJS + 轻量优化
  2. 渲染引擎:Flutter Engine

特点:

Dart 层实现 CSS,C++ 层实现 WebAPI,对标 W3C 标准。

Airing

思考 🤔

CSS 应该如何实现?

Airing

Kun / Hippy 的问题

  1. 一条渲染链路存在两次 Layout,更新频率过大
  2. 内联样式的开发体验不好,且信息密度太高


    FFI 瓶颈问题,不足以支撑。
Airing

CSS 样式实现的最优解

  • 解法 1: CSS 在 Dart 层实现,样式更新依靠 RenderObject 的 Layout,无需走 FFI
  • 解法 2: DOM 与 CSS 全使用 C++ 实现,剥离 Dart 层
Airing

问题:引入 CSS 导致 RenderObject Tree 难以维护

Airing

思考 🤔

RenderObject Tree 应该如何管理?

Airing

思路

  1. 把 RenderObject 做薄:原子级渲染组件,上层通过组合 RenderObject 来实现复杂功能。
  2. 把 RenderObject 做厚:集成大量的布局渲染能力于一身,上层通过样式表驱动 RenderObject 渲染。
Airing

思路 1: 把 RenderObject 做薄

复杂度太高,每个样式规则的计算都需要一层一层检查推断,导致维护效率下降。

Airing

思路 2: 把 RenderObject 做厚

Diff 的复杂度也会大幅下降。

Airing

思考 🤔

如何保证实现效果对标浏览器标准?

Airing

解决方案

  1. 堆测试用例,截图对比
  2. WPT
Airing

Weex 2.0

Airing

Weex 的演进过程

Airing
Airing

架构分析

WeexAbility:容器和能力扩展,URL 拦截、缓存、基础 API、三方扩展等。

WeexFramework:通用基础框架。封装页面实例,实现 DOM、CSSOM、WebAPI 标准,解耦脚本引擎和渲染引擎。

QKing:脚本引擎,基于 QuickJS 的魔改。

Unicorn:自绘渲染引擎。实现 CSS 能力,包括完整的节点构建、动画、手势、布局、绘制、合成、光栅化渲染管线,可跨平台。

WeexUIKit:原生 UI 渲染引擎,封装了原生组件。

Airing
Airing
Airing

TDF

Tencent Dynamic Framework

Airing

涉密,已屏蔽

Airing

涉密,已屏蔽

Airing

Waft

WebAssembly Framework for Things

Airing

AIoT 的尝试

  1. Android App:运存太低,性能受限
  2. 云应用:成本太高
  3. Waft
Airing
Airing
Airing

Waft 的构成

  1. 脚本引擎:WebAssembly
  2. 渲染引擎:Skia 封装
Airing

脚本引擎选型:WebAssembly

选型用例存疑:

  1. 用例太简单,无法发挥 JS 引擎的优势
  2. AOT 对比解释执行,不公平
  3. QuickJS 还有很大的优化空间
  4. 没有对比其他有 JIT 模式的引擎
  5. 不同 wasm 的实现,性能不同
Airing
fib(40) 安卓(1+5t) iOS(iPhone11)
js 4000ms 13000ms
wasm 2048ms 4224ms
Native 963ms 395ms

涉密可以进一步优化 wasm 性能。

Airing

Waft 的问题

  1. CSS 仅支持部分子集
  2. W3C 标准(DOM Elememt、WebAPI)实现欠缺


    决定了应用场景 👉🏻 简单的 IoT 页面
Airing

MiniX

Airing
Airing
Airing

MiniX 的构成

  1. 脚本引擎:QuickJS / JerryScript / V8+JSCore
  2. 渲染引擎:Flutter Engine
Airing

跨端框架的技术要点

The Essentials of Cross-end Framework

Airing

应用场景

  1. 动态化
  2. IoT
  3. Desktop
  4. 车机
  5. 一核多生态

方案要点

  1. 脚本引擎
  2. 渲染引擎
  3. Debugger
  4. 工程化
Airing

应用场景: 动态化

Airing

没有动态化能力的跨端技术

是没有灵魂的

Airing

动态化思路

  1. 基于 WebView 的增强
  2. 基于 DSL 的 Native 增强
  3. 基于 GPL 的 Native 增强
  4. 插件化(Android)
  5. 利用 OC 运行时动态化特性(iOS)

核心:在 Runtime 期间加载可执行代码,并调用。

Airing
Airing

应用场景: Desktop

Airing

Desktop 的优势:

  1. 内存占用略高于 Qt,但优于 CEF、Electron
  2. 包体积小,流畅性、CPU 占用媲美 Qt
  3. 多端复用,Mobile App 可以快速适配

Desktop 的不足:

  1. 组件支持程度不及移动端
  2. 引擎成熟度有待提升,32 位、PlotformView 不支持
Airing

应用场景:车机

Airing

技术选型

  • 操作系统:Android / Linux
  • 2D 渲染:Flutter + 动态化 / Qt
  • 3D 渲染:Unity / Unreal Engine
Airing

脚本引擎

Airing

脚本引擎选型思路

  1. JS 引擎:仅作为胶水语言
  2. Dart VM:利用 Flutter Engine
  3. WARM: 需要设计 DSL 和实现渲染引擎
Airing

JS 引擎选型思路

  1. 双引擎:JSCore + V8
  2. 单引擎:Hermes
  3. 单引擎:QuickJS
  4. 单引擎:自研 JS 引擎
Airing

QuickJS 的问题

  1. 没有 JIT
  2. 手动 GC,难以管理和维护,可优化
  3. 缺失行号记录
  4. 缺失 Debugger
  5. 缺少 code cache
  6. 缺少 inline cache
  7. 缺少内存泄露检测能力
  8. Bytecode 有优化空间 (如 SSA)
Airing

JSBinding 优化

方案1: 使用 JSExport 和 JSExportAS

方案2: 使用 C Export 将方法和属性用 JSStaticFunction 和 JSStaticValue 进行绑定

耗时(ms/百万次)
JSExport 1278
C Export 452
Airing

自制 JS 引擎的优缺点

优点:

  • 及时支持最新的标准
  • 不需要 polyfill
  • 保证多端一致性


缺点:iOS 无法开启 JIT


JIT 的问题:

  1. 需可写可执行的内存页
  2. 引擎冷启动预热耗时增加
  3. 内存占用变大
  4. 包体积偏大
Airing

渲染引擎

Airing

渲染引擎选型思路

  1. Flutter Engine
  2. Skia
  3. OpenGL / Vulkun / Metal


    整体思路:精简管线,同步光栅化
Airing

Debugger 方案

Airing

Debugger

一种可以让 JavaScript Runtime 进行中断,并可以实时查看内部运行状态的应用。


调试协议

  1. CDP: Chrome DevTools Protocol
  2. DAP: Debug Adapter Protocol
  3. 自建协议
Airing

举例: Weex 2.0 中的 Debugger 实现

Airing

举例: JS Debugger for QuickJS

Airing

DAP

Airing

举例: Debugger 运行流程

涉密,已屏蔽

Airing

跨端框架的工程化方案

Airing

工程化方案

  1. 资源加载方案
  2. 降级处理
  3. 版本管理
  4. 研发模式


    举例:Weex,Kant
Airing

大纲

  1. 跨端框架的技术目标
  2. 跨端框架的技术方向
  3. 跨端框架的技术揭秘
  4. 跨端框架的技术要点
  5. 跨端框架的发展趋势
Airing

理想:六边形战士

只要写一遍,

哪里都能跑;

不仅写的快,

而且性能好;

生态能复用,

上线Bug少。

Airing

跨端框架的技术目标

  1. 提升人效
  2. 抹平差异
Airing

基于 DSL 的 Native 增强

  1. DinamicX
  2. Tangram(七巧板)
  3. Jasonette
  4. DreamBox
  5. MTFlexbox
Airing

方向 4:大终端


基于 GPL 的 Native 增强

Airing
Airing

跨端框架的技术揭秘

The solution of cross-end framework

Airing

Kun 的架构图

  • JS: QuickJS
  • CSS: Yoga + Kraken + FFI
  • Debugger: CDP
  • Test: Golden test
Airing
Airing
Airing
Airing

问题:引入 CSS 导致 RenderObject Tree 难以维护

Airing

思路 2: 把 RenderObject 做厚

Diff 的复杂度也会大幅下降。

Airing
Airing

架构分析

WeexAbility:容器和能力扩展,URL 拦截、缓存、基础 API、三方扩展等。

WeexFramework:通用基础框架。封装页面实例,实现 DOM、CSSOM、WebAPI 标准,解耦脚本引擎和渲染引擎。

QKing:脚本引擎,基于 QuickJS 的魔改。

Unicorn:自绘渲染引擎。实现 CSS 能力,包括完整的节点构建、动画、手势、布局、绘制、合成、光栅化渲染管线,可跨平台。

WeexUIKit:原生 UI 渲染引擎,封装了原生组件。

Airing
Airing

Waft

WebAssembly Framework for Things

Airing
Airing

Waft 的构成

  1. 脚本引擎:WebAssembly
  2. 渲染引擎:Skia 封装
Airing