孙浩 - 跨框架组件开发探秘

孙浩 禅道基础平台部架构师 中国DevOps社区峰会2022·武汉 峰会2022·武汉 中国DevOps社区峰会·武汉 从造轮子说起 中国DevOps社区峰会·武汉 程序员为什么喜欢造轮子 显而易见，轮子是个好东西！“历史的车轮”滚滚向前，“程序员的轮子”一个又一个！ 为什么程序员喜欢木工？ •两者目标都是在亲手创造一个对目标用户有用的东西； •两者都需要用到大量的工具 •两者都受有外界限制 •两者都可能需要等待 https://www.zainrizvi.io/blog/why-software-engineers-like-woodworking/ 程序员为什么喜欢造轮子 中国DevOps社区峰会·武汉 程序员为什么喜欢造轮子 中国DevOps社区峰会·武汉 造轮子的动力 •现有的“轮子”不兼容当前环境，或者兼容成本高，也不好维护 •现有的“轮子”功能缺失，无法满足更多的需求，包括效率、功能或外观（不好看） •就是“想造”，“造轮子”是一种很务实学习途径 组件化与造轮子 中国DevOps社区峰会·武汉 前端组件开发天生具有造轮子属性，组件作为一个需要重复使用的模块，通常希望： 1.使用灵活，包含多种功能选项和便利方法 2.一致的外观和交互体验 3.兼容性好，适应多种浏览器环境 组件化与造轮子 中国DevOps社区峰会·武汉 组件化轮子 组件化与造轮子 中国DevOps社区峰会·武汉 基础开发框架UI组件库 组件化与造轮子 中国DevOps社区峰会·武汉 ? 只依赖原生JS的框架几乎没有 UI框架被限制在基础开发框架下 中国DevOps社区峰会·武汉 跨框架组件开发 什么是跨框架组件？ 中国DevOps社区峰会·武汉 跨框架组件 CrossFrameworkComponent 一种支持多种基础开发框架的组件技术方案 为何需要跨框架组件 中国DevOps社区峰会·武汉 多开发框架模式痛点： •开发成本高，对于相同的需求需要针对不同的开发框架重新开发 •无法统一交互体验 •更新技术栈和升级困难 为何需要跨框架组件 中国DevOps社区峰会·武汉 好处： •开发一次即可支持各种开发框架（包括单组件库），大大提升开发效率 •共享设计理念，使得开发的产品具备统一的交互体验 •升级、迁移和更换技术方向成本低 常见方案 中国DevOps社区峰会·武汉 •使用不同的开发框架重写一遍 •WebComponents •对不同框架的组件进行转换 WebComponents 中国DevOps社区峰会·武汉 WebComponents是现代浏览器提供了一系列API用于创建直接像原生元素一样使用的组件，拥有如下优势： •原生支持，无依赖 •使用方便，可以直接在React、Vue.js等开发框架中直接使用 •组件隔离，避免CSS污染 •高性能，直接使用浏览器提供的API •…… WebComponents 中国DevOps社区峰会·武汉 大约18%由Google跟踪的网站使用了WebComponents，这个数字在2019年还是5%。 基于WebComponents实现的组件库 •FAST-Microsoft •MaterialDesign-Google •FluentUI-Microsoft •GithubElements-Github •Spectrum-Adobe •OMI-Tencent 使用WebComponents的网站 •Twitter：嵌入式推文 •YouTube：使用了Polymer3.0框架 •MSOfficeOnline •Github •ElectronicArts WebComponents 中国DevOps社区峰会·武汉 WebComponents 中国DevOps社区峰会·武汉 困境 •实现复杂，需要写大量DOM操作代码 •一些场景存在缺陷 •目前生态不成熟 •兼容性不好（旧浏览器、渐进式增强） •SEO不友好 WebComponents 中国DevOps社区峰会·武汉 用来开发WebComponents的开发框架 •Stencil-357,795 •Lit-282,068 •LightningWebComponents-35,452 •Solid-26,261 •hybrids •Slim.js 上面的数据统计到2022年6月24日。 WebComponents 中国DevOps社区峰会·武汉 Sencil、Lit这些用来开发WebComponents的开发框架能解决一些困境问题，但仍然无法解决所有问题。 另外不要忘了，我们又得学习一种新的框架 转化 中国DevOps社区峰会·武汉 将基于一种开发框架开发的组件转化为兼容其他开发框架的形式 1.选择基础开发框架，React、Vue.js、或原生 2.基于基础开发框架实现组件 3.对组件进行转换实现跨框架调用 转化 中国DevOps社区峰会·武汉 优势 •使用熟悉的技术开发，节省成本 •享受React、Vue.js这类框架的好处，状态管理和双向绑定 •有良好的生态支持 •转化过程可以自动化完成 转化 中国DevOps社区峰会·武汉 限制 •需要提前统一组件设计和开发规范，包括调用方式、属性和事件 •对外的API数据类型不能依赖框架，只能使用原生等框架无关的数据类型 •对于一些简单的交互控件实现繁琐 跨框架组件开发方案对比 中国DevOps社区峰会·武汉 方案 优点 缺点 重写 •兼容性好 •开发成本极高•无法统一交互体验•多技术栈维护升级困难 WebComponents •原生支持，无依赖•使用方便，适应多种框架•组件隔离•高性能 •实现复杂一些场景存在缺陷•目前生态不成熟•无法兼容较早的浏览器•SEO不友好 转化 •开发成本低•支持状态管理等实用特性•有良好的生态支持•转化过程自动化 •统一组件设计和开发规范•数据类型受限•简单组件实现略显繁琐 跨框架组件开发注意事项 中国DevOps社区峰会·武汉 •注意组件隔离，避免使用全局变量以及样式污染 •特殊名称、HeadlessUI •避免依赖全局状态，考虑通过CSS变量实现主题 •制定开发规范 •设计规范 •名称、属性、事件 •选择依赖的框架 •体积 •熟练程度 跨框架组件转化方案实例 中国DevOps社区峰会·武汉 通常在UI组件库中，数据表格通常是属于最复杂的那一类。通常有如下“奇葩”需求： •支持自适应的布局，自动根据列中的内容调整列宽 •支持对数据进行分页、排序、过滤和搜索 •支持无限嵌套的层级展示，并且可折叠 •支持固定表头、表尾，还有对列进行固定 •支持虚拟渲染，在有大量数据的情况保证交互流程 •支持对行进行可拖拽式排序 •支持直接选择、编辑、复制、粘贴，“像Excel一样”，还需要右键菜单和快捷键 •以上功能不能冲突…… 跨框架组件转化方案实例 中国DevOps社区峰会·武汉 DTable是我们在ZUI中开发的一个数据表格组件。 包含有丰富的功能：响应式布局、自适应列宽、可定制的表头、表尾和单元格、预设常见单元格样式、表头表尾固定、列左右固定、排序、分页、搜索、过滤、行选中、单元格拖放选择、单元格编辑、复制、粘贴、历史记录（撤销和重做）、快捷键、虚拟渲染（支持大量数据）、无限层级嵌套且支持折叠、可配置的操作工具栏、右键菜单 中国DevOps社区峰会·武汉 在线示例：https://catouse.github.io/dtable/项目源码：https://github.com/catouse/dtable 跨框架组件转化方案实例 中国DevOps社区峰会·武汉 开发方案 •使用Preact.js开发 •采用基础组件+插件机制实现，组件本身提供基本布局和插件机制接口，通过十几款插件实现了复杂功能 •原生支持Preact和React，通过转化使得组件支持Vue.js、原生、jQuery、WebComponents等其他开发框架 Dtable 中国DevOps社区峰会·武汉 跨框架组件转化方案实例 第一步： 使用preact实现组件 中国DevOps社区峰会·武汉 跨框架组件转化方案实例 第二步： 将组件转化为原生组件 中国DevOps社区峰会·武汉 跨框架组件转化方案实例 第三步： 将组件转化为jQuery组件 跨框架组件转化方案实例 中国DevOps社区峰会·武汉 第四步： 将组件转化为WebComponent组件 第五步： 将组件转化为Vue.js组件 第六步： … 中国DevOps社区峰会·武汉 通过DevOps加速跨框架组件开发 DevOps加速跨框架组件开发 中国DevOps社区峰会·武汉 DevOps在前端开发和协同中已被广泛使用，下面以“转化”方案为例来了解跨框架组件开发如何与DevOps流程结合： •Plan阶段应该指定跨框架组件开发规范，根据规范来设计一系列新的组件 •Code阶段使用约定的框架对组件进行开发 •Build阶段通过脚本自动生成适合多个框架的组件产物 •Test阶段对组件在多个基础框架上进行测试 •Rlease阶段发布适合多个框架的并行版本 •Deploy阶段自动生成跨框架的示例和文档 跨框架开发自动化 中国DevOps社区峰会·武汉 要实践DevOps，自动化是首要工作，在使用转化方案开发跨框架组件过程中，以下工作已经实施自动化： •持续集成和持续交付：开发过程中及时在多个开发框架环境中预览组件，自动转化适合多个开发框架的组件 •自动化测试：使用工具对跨框架组件进行自动化测试，从而快速发现和修复代码缺陷，提高代码质量和稳定性，测试需要特别针对不同的框架运行环境 •自动化部署：使用工具自动生成适合不同开发框架的示例和文档，快速将组件库部署到特定的环境，方便集成到各个产品中 协同和反馈 中国DevOps社区峰会·武汉 要让DevOps发挥价值，协同和反馈是必不可缺的环节，可以在如下方面进行实践： •设计人员通过实时部署的在线示例和文档审查组件开发是否符合规范，如有问题可以立即反馈给开发人员 •产品开发团队可以将组件开发流程继承到应用开发流程中，实现组件开发与应用开发无缝集成 中国DevOps社区峰会·武汉 回归造轮子 回归造轮子 中国DevOps社区峰会·武汉 跨框架组件开发是一种更好的造轮子方法。但目前来看使用此方案的公司并不多，开源社区也缺少类似的组件库出现。结合“转换”的方案，从已有方式进行迁移的成本并不高，希望更多的人来试试。 跨框架是能力，但不是我们的目的，我们最终需要的是“无框架”组件。 就像WebComponents这样面向未来技术方案一样，组件就应该直接被使用，完全自治、环境隔离、不受框架和版本限制的，无需借助开发框架层。 类似React、Vue.js这些开发框架，我相信他们要么拥抱跨框架，要么消失在历史中——因为所有鸿沟终将被跨越。 中国DevOps社区峰会·武汉 中国DevOps社区峰会2022·武汉 关注社区公众号了解更多活动