02、孙浩2023 DevOps武汉峰会 - 跨框架组件开发探秘 -.pdf

1、中国DevOps社区峰会 2022 武汉峰会 2022 武汉 孙浩 禅道基础平台部架构师中国DevOps社区峰会 武汉从造轮子说起中国DevOps社区峰会 武汉程序员为什么喜欢造轮子显而易见，轮子是个好东西！“历史的车轮”滚滚向前，“程序员的轮子”一个又一个！中国DevOps社区峰会 武汉程序员为什么喜欢造轮子为什么程序员喜欢木工？两者目标都是在亲手创造一个对目标用户有用的东西；两者都需要用到大量的工具 两者都受有外界限制 两者都可能需要等待https:/www.zainrizvi.io/blog/why-software-engineers-like-woodworking/中国DevOps

2、社区峰会 武汉程序员为什么喜欢造轮子造轮子的动力 现有的“轮子”不兼容当前环境，或者兼容成本高，也不好维护 现有的“轮子”功能缺失，无法满足更多的需求，包括效率、功能或外观（不好看）就是“想造”，“造轮子”是一种很务实学习途径中国DevOps社区峰会 武汉组件化与造轮子前端组件开发天生具有造轮子属性，组件作为一个需要重复使用的模块，通常希望：1.使用灵活，包含多种功能选项和便利方法2.一致的外观和交互体验3.兼容性好，适应多种浏览器环境中国DevOps社区峰会 武汉组件化与造轮子组件化轮子中国DevOps社区峰会 武汉组件化与造轮子基础开发框架UI 组件库中国DevOps社区峰会 武汉组件化与

3、造轮子?UI 框架被限制在基础开发框架下只依赖原生 JS 的框架几乎没有中国DevOps社区峰会 武汉跨框架组件开发中国DevOps社区峰会 武汉什么是跨框架组件？跨框架组件Cross Framework Component一种支持多种基础开发框架的组件技术方案中国DevOps社区峰会 武汉为何需要跨框架组件多开发框架模式痛点：开发成本高，对于相同的需求需要针对不同的开发框架重新开发 无法统一交互体验 更新技术栈和升级困难中国DevOps社区峰会 武汉为何需要跨框架组件好处：开发一次即可支持各种开发框架（包括单组件库），大大提升开发效率 共享设计理念，使得开发的产品具备统一的交互体验 升级、迁

4、移和更换技术方向成本低中国DevOps社区峰会 武汉常见方案 使用不同的开发框架重写一遍 Web Components 对不同框架的组件进行转换中国DevOps社区峰会 武汉Web ComponentsWeb Components 是现代浏览器提供了一系列 API 用于创建直接像原生元素一样使用的组件，拥有如下优势：原生支持，无依赖 使用方便，可以直接在 React、Vue.js 等开发框架中直接使用 组件隔离，避免 CSS 污染 高性能，直接使用浏览器提供的 API 中国DevOps社区峰会 武汉Web Components大约 18%由 Google 跟踪的网站使用了 Web Compon

5、ents，这个数字在 2019 年还是 5%。中国DevOps社区峰会 武汉Web Components基于 Web Components 实现的组件库 FAST-Microsoft Material Design-Google Fluent UI-Microsoft Github Elements-Github Spectrum-Adobe OMI-Tencent使用 Web Components 的网站 Twitter：嵌入式推文 YouTube：使用了 Polymer 3.0 框架 MS Office Online Github Electronic Arts中国DevOps社区峰会 武

6、汉Web Components困境 实现复杂，需要写大量 DOM 操作代码 一些场景存在缺陷 目前生态不成熟 兼容性不好（旧浏览器、渐进式增强）SEO 不友好中国DevOps社区峰会 武汉Web Components用来开发 Web Components 的开发框架 Stencil-357,795 Lit-282,068 Lightning Web Components-35,452 Solid-26,261 hybrids Slim.js上面的数据统计到 2022年6月24日。中国DevOps社区峰会 武汉Web ComponentsSencil、Lit 这些用来开发 Web Compone