朱鸣辉-跨端框架的编译优化实践.pdf

《朱鸣辉-跨端框架的编译优化实践.pdf》由会员分享，可在线阅读，更多相关《朱鸣辉-跨端框架的编译优化实践.pdf（55页珍藏版）》请在三个皮匠报告上搜索。

1、跨端框架的编译优化实践主讲人：朱鸣辉演讲嘉宾介绍朱鸣辉 京东凹凸实验室 京东资深研发工程师 Taro团队核心成员 负责Taro框架的研发和开源管理工作CONTENT目录2023K+01跨端技术需要解决什么问题高拓展性的开放式架构编译内核020304展望未来Part 01跨端技术需要解决什么问题跨端技术需要解决什么问题业务响应不及时研发成本增加代码维护困难多框架支持性能优化插件化跨端技术需要解决什么问题跨端技术需要解决什么问题支持更多的开发范式&UI 框架跨端技术需要解决什么问题支持更多的前端生态工具链&上层框架跨端技术需要解决什么问题开放式跨端跨框架解决方案Part 2高拓展性的开发式架构 架

2、构介绍 web适配 小程序适配高拓展性的开发式架构Taro 1.x 架构高拓展性的开发式架构Taro 3.x 架构高拓展性的开发式架构插件化架构高拓展性的开发式架构Web端适配标准组件库实现Taro 标准的 Web 端组件库标准 API、事件实现 Taro 标准的 Web 端 API路由库实现 Taro 标准的 Web 端路由库支持跨前端 UI 框架(React、Vue 等)可适配支持开发者自定义封装 API 支持各 UI 框架生态路由库使用框架适配器实现 Taro 标准前端 UI 框架(React、Vue)适配器并使框架组件、生命周期对齐标准第三发接入第三方工具接入 Taro 组件库、API

3、 等使用方法（Taro 插件化、标准配置方案等）高拓展性的开发式架构web端适配-H5架构Taro-H5 架构高拓展性的开发式架构需要开发 Taro 标准的 Vue 组件库？Taro 组件库每当有问题需要修复或新功能需要添加，我们需要分别对 React 和 Vue 版本的组件库进行改造。维护成本每当需要支持新的框架，比如 Angular 框架进行开发时，都需要支持开发新框架的标准组件库。能力拓展web端适配-跨框架组件库高拓展性的开发式架构Web Componentsweb端适配-跨框架组件库高拓展性的开发式架构Web ComponentsHTML TemplatesCustom Elemen

4、tsShadom DomES Modules提供灵活、可复用的 HTML 标签模板可以自定义带有特定行为的 HTML 标签对标签内的结构和样式进行一层包装使 Web 组件能够以模块化方式开发定义模板构造 Custom Element使用web端适配-跨框架组件库高拓展性的开发式架构StencilHybridsLitSlim.jsSkateJSPolymerWeb Componentsweb端适配-跨框架组件库高拓展性的开发式架构StencilWeb ComponentsHybridsLitSlim.jsSkateJSPolymer使用组件创建 Stencil Componentweb端适配-跨

5、框架组件库React CompnoentsVue ComponentsVue3 ComponentsRef、Event、Props适配React AdapterVue AdapterVue3 Adapter高拓展性的开发式架构小程序适配VS小程序自创MVVM语法小程序和浏览器环境不一致开发者希望复用海量的Web生态工具开发者熟悉React、Vue等语法模拟实现浏览器环境让 React、Vue、Web 生态库直接运行高拓展性的开发式架构小程序适配-模拟浏览器环境Brower Object Model模拟BOM高拓展性的开发式架构模拟DOMTaro Runtime小程序适配-模拟浏览器环境高拓展性

6、的开发式架构小程序适配-挂载入口、页面构建 DOM 树小程序触发 onLaunchmount(#app,App)ReactDOM.render$mount.页面触发 onShowApp.renderChild(Page)createReactPagecreateVuePage.高拓展性的开发式架构setDataTaro DOM Tree逻辑层小程序适配-渲染方案渲染方案视图层View TemplateText TemplateText TemplateView TemplateText Template高拓展性的开发式架构View TemplateText TemplateTemplates小