随着大前端技术的蓬勃发展，我们在 2020 年已有 WebView、RN、Flutter、小程序等流行的跨平台 GUI 技术栈可供选型。但支撑这些应用层框架的，更有许多高质量的 JS 引擎、图形绘制库、IO 框架等开源基础库。对特定领域的业务需求，仍然存在着借助这些基础库，自主搭建 GUI 解决方案的工程可能性。本次我们介绍的，即是在稿定图形编辑器业务中落地的一种自研跨平台 Hybrid GUI 框架，我们称之为 Fusion。

Fusion 专注于解决平面设计编辑器场景下的需求，它将 QuickJS 引擎、Skia 渲染库以及 FML / libuv 平台基础库相结合，实现了跨平台的 Canvas、图层树、桥接层，以及 Web Simulator。本次我们将分享这一框架的搭建设计经历，以及中途的踩坑总结。

演讲提纲：

 1. 背景简介

• 稿定设计 app 编辑器的场景与痛点
• 业界主流跨端方案对比
• 自研的启发与契机

2. 探索：立即模式 GUI 的实现

• Canvas 绘制、变换、状态栈等能力实现
• JS 运行时事件循环的搭建
• iOS 与安卓端 View 的集成

3. 重构：保留模式 GUI 的实现

• Canvas 的性能问题
• Layer 机制设计
• 平台 IO 库的替换
• 渲染线程与命令队列优化

4. 工程化与上层封装

• Bridge 通信机制
• JS 层手势、动画等框架封装
• Web 模拟器

5. 评估总结

• Fusion 业务案例演示
• 优劣对比与适用性探讨
• 大前端协作的新形式展望

听众收益：

进一步理解应用层 GUI 的基础性原理，对自研跨平台 GUI 框架的开发成本和收益掌握到更多可借鉴的经验，利于中小规模开发团队的架构选型决策。

前沿亮点：

• 这一架构方式具备原创性，社区尚未有类似的先例
• 我是国内第一批 QuickJS 的社区使用者，已在专栏 (https://zhuanlan.zhihu.com/fe-fantasy) 上连续分享了多篇讲解 JS 引擎集成与运行时定制的技术文章，本次分享在层次上将更进一步

知识储备：

对 GUI 渲染原理有所了解，熟悉一种以上主流的移动应用开发技术栈即可。