随着大前端技术的蓬勃发展，我们在 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 渲染原理有所了解，熟悉一种以上主流的移动应用开发技术栈即可。

现代流行的前端框架在部署时都会将所有的依赖统一打包，而在业务急速扩展时，包的大小也会急速膨胀，导致上线效率越来越差，更不用说开发时的各种代码冲突、不同团队间的合作开发问题了。在爱奇艺号近几年快速发展的过程中，我们意识到了这些问题，于是开发了一套微前端架构，并且成功应用到了多个重要业务中。每次都重新部署主应用，极大地提高了上线效率。甚至在开发环境中代码热更新的速度都能提升 90% 以上。本次演讲将结合爱奇艺号微前端化的架构演进，分享微前端从零到一的架构设计及实践细节。

演讲提纲：

1. 微前端简介

爱奇艺号前端为什么要微前端化
什么时候选择微前端
结合爱奇艺号介绍微前端及其优缺点

2. 整体架构设计

微前端整体架构设计
基于业务需要对以前架构中的问题的一些思考
一些微前端中重点部位的设计细节

3. 微前端实现细节

介绍容器应用和微前端模块的实现细节，例如模块部署、路由实现、如何获取及渲染微前端模块、通用模块的处理等。

4. 未来展望

分享实现微前端过程中的思考以及未来架构的规划

听众收益：

了解实践微前端的技术价值和真正收益
了解微前端的架构设计及实现原理
能够根据自身业务需求架设微前端应用

适合人群：

前端工程师、架构师。

框架升级一直是在APP研发过程中影响面很广的话题，每一个阶段 App 的诉求都有不同，对应的框架层要根据技术和产品的需要，进行必要的优化和重构，最终支撑 App实现技术和产品的目标。客观的讲，没有绝对完美的技术框架，只有最适合某一个阶段的技术框架。

搜索生态是一个开放的生态，是一个基于 Web 的生态，搜索结果呈现及交互依赖于浏览内核；但当对浏览内核缺少定制的手段时（如 iOS 平台，只能使用系统原生 API），页面浏览过程的无法实现差异化的优化，端与云协同优势用户层面体验不到。

本次演讲，我将以百度 App 搜索方向技术团队在搜索框架升级实践作为主体，以多 WebView 的管理为示例，详细的介绍百度 App 浏览增强引擎从构思，到落地的关键过程；包括架构设计，Web 生态适配，性能对齐等不同阶段的思考及总结。

1. 为什么要对搜索框架进行升级

• 百度 App 搜索框架的现状
• 搜索全流程优化面临的挑战

2.搜索框架升级的目标与实现

• 技术框架的升级目标
• 从单 WebView 到多 WebView 管理的核心能力构建

3.框架升级遇到的关键问题及解题思路

• 多 WebView 的 Web 生态标准的适配
• 多 WebView 的资源消耗过高的优化
• 多 WebView 的浏览历史的衔接
• 多 WebView 的核心指标影响的补齐

4.总结及展望

听众收益：

• 以客户端的角度来看，架构为搜索业务全流程赋能的思考
• 可以了解从单 WebView 到多 WebView 升级面临的问题
• 为业内提供搜索全流程体验优化的新思路

知识储备：

了解移动客户端开发、H5相关知识、架构设计等

软件系统在持续交付需求的同时也需要进行架构的维护和迭代，这样才能确保长期的研发效率和稳定性。时至今日，很多 Web 应用已经持续迭代了五年甚至十年之久，随着前端技术每天都在快速更迭，大型项目的架构升级则尤为困难。如何对大型 Web App 进行技术更新和迁移，是很多前端工程师逐渐或正在面临的技术难题。

百度搜索首页和结果页承载着几乎所有的搜索产品，尤其是结果页在机制和业务体量上都很庞大，数十万行代码承载着十几个产品线的运行时。搜索前端团队在近一年中，进行了代码模块拆分、组件化和 SSR、Node.js 架构迁移等技术更新和重构，也开源了部分关键技术和工具链代码。我们希望能够分享在这一过程中积累的大型项目重构经验和方法，也把一些有用的小工具回馈给社区。

演讲提纲：

1. 背景和问题

• 代码量大，耦合重，职责不清晰
• 工具链旧，开发效率低，交付效率差

2. 思路和方法

• 架构的目标
• 重构的策略

3. 落地和执行

• Molecule 和业务模块化
• 组件化重构和 Node.js

4. 总结和后续计划

听众收益：

1. 获得组件化、SSR、Node.js 在搜索前端的实践经验，了解百度搜索前端的基本架构；
2. 从具体的方案设计一直到实践路径，帮助理解大型前端项目的技术重构和升级的经验、方法和原则。

听懂我的演讲，需要具备这些知识储备：

1. 前端模块化
2. 组件化方案（Vue、Angular 等基础）
3. 代码重构
4. 服务端渲染