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

中国DevOps社区峰会探讨了程序员“造轮子”的动机及其在现代前端开发中的体现。核心观点包括：

1. 程序员造轮子的动机：

   • 现有轮子不兼容或维护成本高。
   • 现有轮子功能缺失，无法满足需求。
   • 造轮子是务实的学习途径。

2. 组件化与造轮子：

   • 前端组件开发具有造轮子属性，组件需具备使用灵活、一致外观、兼容性好等特点。
   • 常见方案包括基础开发框架和 UI 组件库，但原生 JS 框架限制较少。

3. 跨框架组件开发：

   • 定义：支持多种基础开发框架的组件技术方案。
   • 需求：多开发框架模式痛点包括开发成本高、无法统一交互体验、技术栈升级困难。
   • 优势：开发效率提升、统一交互体验、升级迁移成本低。
   • 常见方案：
     • 重写：兼容性好但开发成本高。
     • Web Components：原生支持但实现复杂、生态不成熟。
     • 转化：开发成本低、支持状态管理，但数据类型受限。

4. Web Components：

   • 使用率：约 18% 的网站使用 Web Components（2019 年为 5%）。
   • 优势：原生支持、使用方便、组件隔离、高性能。
   • 困境：实现复杂、部分场景缺陷、生态不成熟、兼容性差、SEO 不友好。
   • 开发框架：Stencil、Lit 等框架可简化开发，但无法解决所有问题。

5. 转化方案：

   • 流程：选择基础框架开发，再转化为其他框架形式。
   • 优势：使用熟悉技术、支持状态管理、生态良好、自动化转化。
   • 限制：需统一组件设计和开发规范，数据类型受限，简单组件实现繁琐。
   • 实例：DTable 数据表格组件通过 Preact.js 开发，支持跨框架转化。

6. DevOps 加速跨框架组件开发：

   • 流程：Plan（规范）、Code（开发）、Build（自动化生成）、Test（多框架测试）、Release（发布）、Deploy（自动生成示例和文档）。
   • 自动化：持续集成/交付、自动化测试、自动化部署。
   • 协同和反馈：设计人员实时审查、产品团队无缝集成。

7. 回归造轮子：

   • 跨框架组件开发是更好的造轮子方法，但目前使用公司较少。
   • 未来目标是“无框架”组件，类似 Web Components，直接自治、环境隔离、不受框架限制。
   • 预测 React、Vue.js 等框架将拥抱跨框架或消失。