D2前端技术论坛

淘宝 MiniApp 容器架构探索之路 炼玉

1. 淘宝 MiniApp 容器器架构探索之路路 淘宝技术部-炼玉
2. 1. 淘宝 MiniApp 容器器的由来 2. 淘宝 MiniApp 原理理与架构 3. 淘宝 MiniApp 的探索和演进
3. 1. 淘宝 MiniApp 容器器的由来 2. 淘宝 MiniApp 原理理与架构 3. 淘宝 MiniApp 的探索和演进
4. MiniApp 容器的由来 移动端容器在手淘的演进 HTML+JS+CSS WebView System 纯 Web
5. MiniApp 容器的由来 移动端容器在手淘的演进 提供 JSBridge API 200+ HTML+JS+CSS WebView JSBridge API API System 纯 Web Hybrid 使⽤ Native 功能增强页⾯能⼒ …
6. MiniApp 容器的由来 移动端容器在手淘的演进 规避 iOS WebView 滚动时 JS 不执行,无法触发懒加载导致白屏的问题 滚动流畅,内存占用更低 HTML+JS+CSS WebView 组件覆盖/扩展能⼒ JSBridge API API … 组件 System 纯 Web Hybrid WebView Component 使⽤ Native 功能增强页⾯能⼒ 优化使⽤体验 组件 …
7. MiniApp 容器的由来 移动端容器在手淘的演进 使用 Web 开发体验来开发高性能原生应用 体验好,内存占用低 JavaScript HTML+JS+CSS DSL (Vue/Rax) WebView JS Context 组件扩展能⼒ JSBridge API API CSS Layout … 组件 组件 … System 纯 Web Hybrid WebView Component 使⽤ Native 功能增强页⾯能⼒ 优化使⽤体验 Weex 接近原⽣体验
8. MiniApp 容器的由来 移动端容器在手淘的演进 APP JavaScript HTML+JS+CSS DSL (Vue/Rax) WebView JS Context API CSS Layout 组件扩展能⼒ JSBridge API ⻚页⾯面开发 … 组件 组件 … 同一个业务的多个页面间需要自行同步数据 System 纯 Web Hybrid WebView Component 使⽤ Native 功能增强页⾯能⼒ 优化使⽤体验 Weex 接近原⽣体验 ?
9. MiniApp——面向业务的标准开发框架 将超级 App 视为 OS,在此之上提供 “App 级” 的能力 APP APP 业务开发 ⻚页⾯面开发 Mini App Mini App Mini App 同一个业务的多个页面间需要自行同步数据 纯 Web Hybrid WebView Component 使⽤ Native 功能增强页⾯能⼒ 优化使⽤体验 Weex Mini App 接近原⽣体验 业务标准开发框架
10. MiniApp——面向业务的标准开发框架 TaobaoEditor SFC 框架 组件目录 页面目录 程序级应用入口 描述项目基本信息 项目工程文件
11. MiniApp——面向业务的标准开发框架 多种业务类型
12. MiniApp——面向业务的标准开发框架 集团生态 ⼿淘业务、Ali 系业务 ⼤闭环链路⼿淘内流转 开放业务(ISV) ⼩闭环链路应⽤内流转 其它业务 研发⽀撑 MniApp 框架 ⼿淘环境 开放能⼒ 应⽤中⼼ Inside 输出 数据中台
13. 1. 淘宝 MiniApp 容器器的由来 2. 淘宝 MiniApp 原理理与架构 3. 淘宝 MiniApp 的探索和演进
14. MiniApp 原理 将源码编译为 JS,运行在 JavaScript Context 中,通过接口与 MiniApp 容器通信,或者渲染页面 在全局 JS 环境中,可以维护业务数据,实现跨页面的业务逻辑 ├─ │ │ │ │ │ │ │ │ │ │ ├─ src/ ├─ components/ 组件⽬目录 │ ├─ component1.html │ └─ component2.html └─ pages/ ⻚页⾯面⽬目录 ├─ page1/ │ └─ index.html ├─ page2/ 编译 │ └─ index.html └─ index/ └─ index.html manifest.json 描述项⽬目基本信息 ├─ app.js 程序级应⽤用⼊入⼝口 └─ package.json 项⽬目⼯工程⽂文件 MiniApp 容器 模块调⽤ ⽣命周期 全局 JS 环境 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器
15. MiniApp 架构 DSL RAX SFC ⼩程序语法 容器层 页⾯管理 预加载 鉴权 ⽣命周期 API 组件层 渲染层 拍照 ⽀付 ⽂件 原⽣图⽚/视频组件 路由管理 组件 ⽹络 … 多媒体 地图 保活 业务插件 … 插件管理 原⽣长列表 插件扩展 ⼩游戏 WebView Weex 内核层 执⾏环境 JavaScript Context 资源隔离 Debugger 沙盒 任务调度 资源管理
16. 沙盒——提高 JS 安全性 JavaScript 上下文隔离 为每个 MiniApp 开启独立的 JavaScript 虚拟机,避免出现变量污染、数据泄露等问题 Android 进一步为 JavaScript 开启独立进程,避免影响主进程 MiniApp 容器 模块调⽤ MiniApp 容器 ⽣命周期 模块调⽤ 全局 JS 环境 ⽣命周期 全局 JS 环境 沙盒 沙盒 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器 MiniApp B 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器 MiniApp A
17. ⽂件/⽹络 隔离环境 独立存储和资源请求管控 ⽂件 文件隔离 网络隔离 进程隔离 K-V 存储 ⽹络 ⽂件 MiniApp 容器 模块调⽤ K-V 存储 ⽹络 MiniApp 容器 ⽣命周期 模块调⽤ 全局 JS 环境 ⽣命周期 全局 JS 环境 沙盒 沙盒 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器 MiniApp B 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器 MiniApp A
18. 性能优化 提升 MiniApp 启动性能 初始化 下载 MiniApp 创建 JS Context 并行化 初始化 执⾏ MiniApp 创建 JS Context 下载 MiniApp 创建 WebView 创建 WebView 预下载 执⾏ MiniApp 预下载 渲染 渲染 显⽰页⾯ 显⽰页⾯
19. 调试工具 优化 MiniApp 开发体验 MiniApp 服务端 MiniApp 调试服务 获取调试信息 上传调试相关信息 调试数据 调试数据 MiniApp IDE 打包小程序 ZIP 开始远程调试 开始调试 扫描调试⼆维码 进⼊调试界⾯
20. 调试工具 优化 MiniApp 开发体验 MiniApp 容器 模块调⽤ ⽣命周期 全局 JS 环境 页⾯ JS 环境 UI事件 页⾯ JS 环境 渲染指令 UI事件 渲染容器 渲染指令 渲染容器
21. 调试工具 JavaScript Context 接口 优化 MiniApp 开发体验 利用外部 JSContext,实现 JS、UI 和 API 的调试 调试⼯具 MiniApp 容器 调试 JavaScript Chrome JavaScript Context 模块调⽤ ⽣命周期 调试 API 调试 UI UI事件 渲染指令 UI事件 渲染容器 渲染指令 渲染容器 全局 JS 环境 页⾯ JS 环境 页⾯ JS 环境
22. 1. 淘宝 MiniApp 容器器的由来 2. 淘宝 MiniApp 原理理与架构 3. 淘宝 MiniApp 的探索和演进
23. 未来的探索 • 更细粒度的资源管理:限制单个 MiniApp 的内存、CPU 和 IO 占用 • 更完善的隔离机制:客户端权限隔离、内存隔离 • 更灵活的调度策略:增强保活机制 • 性能优化:优化启动性能,提高启动速度 • 针对场景优化:小游戏、3D 等
24. 演进路线 • 开放生态:保证与支付宝小程序 DSL 强一致性,提高功能一致性 • MiniApp 框架产品化:降低集成成本,提高 Inside 输出能力 • 提高性能:进一步提高 MimiApp 性能体验
25. THANK YOU

相关幻灯片