Svelte 组件的架构决策记录(ADR)

背景

我们正在选择一个 Svelte UI 组件库,以提供以下方面的完整功能:

• 表格
• 图表
• 列表
• 网格
• 甘特图

目标是选择一个在易于集成、完整功能支持、性能和长期可维护性之间取得平衡的库。正在考虑的选项有:

1. SVAR
2. Carbon
3. Flowbite
4. SkeletonUI
5. MeltUI
6. SvelteUI
7. shadcn-svelte

选项分析

1. SVAR

• 概述:SVAR 是一个现代的、功能丰富的 Svelte 组件库,专注于设计系统和企业级组件。
• 优点:
  • 功能齐全的组件,包括表格、表单和图表。
  • 高度的定制选项,内置主题支持。
  • 内置对无障碍访问和响应式的支持。
  • 文档完善,并有社区贡献。
• 缺点:
  • 与其他较简单的库相比,可能更重。
  • 对甘特图和高级网格等特定组件的支持有限。
• 最适合:需要功能齐全的设计系统的企业级应用。
• 表格/图表支持:中等到良好。
• 网格/甘特图支持:极少。

2. Carbon

• 概述:Carbon Design System 是 IBM 的开源设计系统,提供一套强大的 UI 组件。
• 优点:
  • 高质量、精致的设计,文档详尽。
  • 无障碍访问和响应式支持极佳。
  • 组件库庞大,包括网格、表格和表单控件。
• 缺点:
  • 并非专注于 Svelte,因此集成可能比较麻烦。
  • 要完全兼容 Svelte,可能需要额外的定制。
  • 对甘特图或复杂图表等高级组件没有开箱即用的支持。
• 最适合:需要一致、精致 UI 的大型项目。
• 表格/图表支持:良好(需集成图表库)。
• 网格/甘特图支持:良好(有网格支持,但没有甘特图)。

3. Flowbite

• 概述:Flowbite 是一个基于 Tailwind CSS 构建的组件库,提供各种组件和 UI 元素。
• 优点:
  • 基于 Tailwind CSS,易于定制。
  • 易于与 Svelte 集成和使用。
  • 提供表格、图表和 UI 控件等丰富的组件。
• 缺点:
  • 缺少高级功能(例如甘特图或复杂网格)。
  • 没有原生图表组件;依赖外部库。
• 最适合:注重与 Tailwind CSS 集成、需要快速开发的项目。
• 表格/图表支持:良好(需要与第三方图表库集成)。
• 网格/甘特图支持:极少。

4. SkeletonUI

• 概述:SkeletonUI 是一个轻量级的 Svelte 组件库,专注于简单和极简。
• 优点:
  • 极其轻量且快速。
  • API 简单直观。
  • 适合小型项目或对性能要求苛刻的场合。
• 缺点:
  • 包含的组件很少,因此功能不丰富。
  • 缺少高级的表格/网格/图表/甘特图组件。
  • 社区支持有限,文档不够全面。
• 最适合:需要开销极小的轻量级组件的项目。
• 表格/图表支持:极少。
• 网格/甘特图支持:极少。

5. MeltUI

• 概述:MeltUI 是一组适用于 Svelte 的无障碍 UI 组件,专注于简单和可组合性。
• 优点:
  • 轻量且完全可定制。
  • 开箱即用的良好无障碍功能。
  • 现代而极简的设计。
• 缺点:
  • 与其他库相比,功能不够丰富。
  • 缺少高级的网格和表格组件。
  • 没有甘特图或复杂的图表选项。
• 最适合:优先考虑无障碍访问和性能的极简设计。
• 表格/图表支持:极少。
• 网格/甘特图支持:极少。

6. SvelteUI

• 概述:SvelteUI 是一个全面且可定制的 Svelte UI 组件库,旨在构建界面优雅的现代 Web 应用。
• 优点:
  • 全面的组件集,包括表格、网格、图表和表单。
  • 同时支持浅色和深色模式。
  • 高度可定制,易于扩展。
  • 内置对 chart.js 或 d3.js 等图表库的集成。
• 缺点:
  • 可能比较简单的组件库更重。
  • 对于甘特图等更复杂的功能,需要一些设置来集成外部库。
• 最适合:需要全面、可定制的组件集的项目。
• 表格/图表支持:出色(支持图表库)。
• 网格/甘特图支持:良好(有网格组件;甘特图需要外部集成)。

7. shadcn-svelte

• 概述:ShadCN 的 Svelte 版本,专注于工具类优先的设计,并提供现代的、带样式的组件。
• 优点:
  • 工具类优先的设计,基于 Tailwind CSS 构建,易于定制。
  • 丰富的组件集,开箱即用即带有完整样式。
  • 易于与其他库集成。
• 缺点:
  • 在高级 UI 元素方面,不如其他一些库功能完整。
  • 缺少对表格、图表或网格的内置支持。
  • 对甘特图没有开箱即用的支持。
• 最适合:需要工具类优先、可定制方法的中小型项目。
• 表格/图表支持:极少。
• 网格/甘特图支持:极少。

决策

推荐选项:SvelteUI

• 理由:SvelteUI 提供了一套均衡而全面的组件,满足对表格、图表、网格和表单的需求。它高度可定制,可与其他图表库(如 chart.js 和 d3.js)良好集成,并在轻量性能与功能丰富之间取得了良好的平衡。虽然它可能不提供开箱即用的甘特图支持,但可以通过第三方集成轻松扩展,因此非常适合功能齐全、可扩展的解决方案。

  • 优点:

    • 出色的表格和图表支持。
    • 完整的网格和布局组件。
    • 可定制,并能与外部图表库良好集成。
    • 良好的社区和文档。

  • 缺点:

    • 比其他一些极简库更重。
    • 对于甘特图等复杂图表,需要外部集成。

备选:Flowbite 或 Carbon(适用于较大的企业项目)

• 如果需要精致的、基于 Tailwind 的,或更一致的设计系统,Flowbite(搭配 Tailwind CSS)或 Carbon(面向企业级解决方案)可能是合适的备选方案。不过,它们在与更复杂的图表和组件集成时,可能需要额外的工作。

结论

最符合你的需求(表格、图表、列表、网格、甘特图的完整功能)的是 SvelteUI,其次是 Flowbite 和 Carbon,具体取决于项目需求和设计偏好。