关于javascript:2023-年前端-UI-组件库概述百花齐放

UI 组件库提供了各种常见的 UI 元素，比方按钮、输入框、菜单等，只须要调用相应的组件并依照需要进行配置，就可能疾速构建出一个功能完善的 UI。

尽管市面上有许多不同的 UI 组件库可供选择，但在 2023 年底也并没有呈现一两个明确的解决方案可能实用于所有状况。因为不同的前端框架（例如 React、Angular、Vue 等）都有本人的劣势和实用场景，所以对应的 UI 组件库也会有所不同。

本文就来简要概述以后前端生态系统的款式解决方案，并介绍一些常见和风行的 UI 库。

UI 库概述

CSS 框架和库历史

过来，网页设计师须要手写 CSS 款式，这是一个波折的过程。随后，呈现了一些 CSS 框架，如 Blueprint、960 Grid System、YUI Grids 等，它们引入了响应式网格和简洁的 UI 元素，扭转了网页设计的形式。

而后，像 Twitter Bootstrap、Foundation 和 Bulma 这样的巨头呈现了。它们提供了疾速开发和统一的款式，但也导致了一些问题，即网站开始感觉过于类似和对立。

为了解决这个问题，社区引入了一些方法论，例如 BEM，用于注入独特性和模块化格调，以使网页设计更加个性化和灵便。

总而言之，CSS 框架和库从最后只满足布局需要，逐步倒退为提供全面的 UI 工具包。与此同时，涌现出更多的办法和技术，以实现更定制化和模块化的款式。

JavaScript 框架扭转了规定

随着 Angular、React 和 Vue 等 JavaScript 框架的呈现，开发人员须要一种更细粒度的办法来应答这些新的组件模型。传统的 CSS 中最重要的个性之一是层叠，但对于这些新的框架来说，层叠机制却带来了一些问题。

为了解决这个问题，呈现了一种新的解决方案，即 CSS in JS。在 React 生态系统中，像 Styled Components 和 Emotion 这样的库变得十分风行，它们容许开发人员将款式与组件作用域相关联，从而解决了层叠问题。

原子化设计

原子化设计是一种组件化设计办法，由 Brad Frost 提出。它的核心思想是将 UI 元素分解成不同的档次，并将其视为原子、分子和有机体等不同的组件。

一个原子代表着最根本的、不可再分的元素，比方按钮、输入框等。一个分子则由多个原子组合而成，代表了绝对简单的组件，例如一个带有图片、文本和按钮的卡片。而有机体则由多个分子组成，代表了更高级的 UI 元素，比方整个页面或利用。

通过将 UI 设计拆解成组件的层次结构，开发人员和设计师能够更加系统地构建和治理 UI。这种办法提倡重用和组合，使得开发过程更高效，同时也使得 UI 更容易保护和扩大。

Tailwind CSS 等 CSS 框架采纳了原子设计理念，提供了一系列的原子级款式类，开发人员能够依据须要组合这些款式类来构建 UI。这种形式使得款式的复用和调整更加灵便和准确，并且能够缩小冗余的款式代码。

真的须要 UI 库吗？

那咱们真的须要一个 UI 组件库吗？答案可能是不须要。

在软件开发中，很多时候都须要视状况而定，是否应用 UI 组件库也用过视状况而定。如果心愿可能疾速启动我的项目并且不须要过多的自定义，那么应用一个成熟、易用的 UI 组件库是一个不错的抉择。但如果谋求独特的设计和齐全自定义的外观，UI 组件库可能就不适宜你。

UI 库的分类

UI 库能够分为以下类型：

• CSS 的扩大：像 Sass、Less、Tailwind 和 CSS Modules 这样的工具能够帮忙开发者以自定义的形式为网页增加款式。它们提供了更弱小和灵便的 CSS 性能，使开发者可能更不便地治理和重用款式。
• 行为库 / 无款式库：如 HeadlessUI、Radix 和 React Aria，它们专一于实现 UI 元素的行为逻辑，而不关注它们的具体款式。能够应用这些库来解决用户交互、表单验证、状态治理等性能。
• 款式零碎：例如 TailwindUI 和 DaisyUI，它们提供了一套内置的款式和行为模板，使你能够疾速构建具备对立外观和行为的 UI。能够依据须要抉择和组合这些款式模板，从而节俭开发工夫和工作量。
• 组件库：像 MUI、Ant Design 和 Mantine 这样的组件库是独立的实体，它们提供了一整套可重用的 UI 组件，如按钮、输入框、表格等。须要学习如何正确应用这些组件，并依照它们的文档和示例进行开发。

什么是好的 UI 库？

一个好的 UI 组件库要害思考因素如下：

• 一致性：UI 库应该在整个应用程序中提供统一的 UI 元素、模式和行为。这有助于用户疾速了解如何应用 UI 库。
• 灵活性：在放弃一致性的同时，UI 库也应该容许自定义和扩大，以适应不同应用程序的特定需要。模块化和可自定义的组件是现实的抉择。
• 性能：UI 库应该通过性能优化。文件大小、渲染速度和效率等因素很重要，尤其是在挪动设施上。
• 可拜访性：遵循网络可拜访性准则能够确保 UI 库实用于所有用户。ARIA 角色、语义化的 HTML 和键盘反对等是一些例子。
• 文档：良好的文档和示例使 UI 库更容易学习和施行。API 参考、款式指南和代码示例有助于减速开发。
• 浏览器反对：UI 库应该在古代浏览器中失常工作，并在旧版本浏览器中逐步降级。渐进加强准则同样实用于 UI 库。
• 社区：UI 库背地的沉闷社区提供探讨论坛、插件和继续的保护。这有助于确保长期可用性。
• 直观性：UI 库应该与用户的心智模型和冀望相一致。利用天然映射、一致性、规范和相熟的模式。
• 响应式：UI 库应该适应不同的屏幕尺寸和输出形式。以挪动优先和流式布局为最佳实际。

总之，一个好的 UI 库在放弃一致性和灵活性的同时，还要优化性能、可拜访性和设施反对。杰出的文档、沉闷的社区和直观的设计也十分重要。贯彻使用者体验准则和启发式准则有助于确保优质的后果。

热门 UI 组件库

React

因为其宏大的生态系统和遍及度，React 生态系统可能领有最多的 UI 库。

组件库

• Material UI：一种基于 Google 的 Material Design 设计的风行实现。它提供了大量的组件和主题选项，并且曾经存在很长时间，开发者须要依照他们的零碎进行开发。
• Ant Design：一个牢靠的组件库抉择，被许多大型公司应用，如腾讯、百度、阿里巴巴等。反对所有古代浏览器、服务端渲染、esm 甚至 Electron。还有为 Angular、Vue 等框架提供的社区实现。它应用 CSS-in-JS，因而可能会在运行时减少一些额定开销，还有本人独特的开发方式。
• ChakraUI：强调可拜访性（A11y），完全符合 WAI-ARIA 可拜访性规范，取得了开源奖项，并有一个沉闷的社区。它是构建可复用 UI 的优良抉择，内置了 hooks，并反对十分好的暗黑模式。这个团队还开发了 Zag.js，将 UI 作为状态机解决。学习其 API 可能须要一些工夫，切换到其余库可能有一些艰难。
• Mantine：另一个功能齐全的组件库，具备良好的可拜访性，提供了 100 多个组件和 hooks。Mantine 齐全基于 TypeScript，能够笼罩默认款式。你须要学习如何应用它的函数和 API 来达到你的指标。
• Blueprint：一组用于构建桌面端数据密集型 UI 的组件。它特地实用于构建外部工具、仪表板和 Electron 应用程序。Blueprint 在这个列表中是少数几个带有日期选择器组件的库之一。
• NextUI：不要与 React 元框架 Next.js 混同，这个库是应用 Tailwind CSS 构建的。它宣称学习曲线很小。主题由 tailwind.config.js 文件解决，具备良好的可拜访性，并且所有组件都反对暗黑主题。只需应用不同的 Tailwind 类名即可笼罩款式。

Headless

• HeadlessUI：它提供了构建可拜访组件所需的外围性能，但没有提供具体的款式。它专门设计用于与 Tailwind CSS 框架配合应用，但也能够抉择应用其余 CSS 解决方案。它的指标是提供一种灵便的构建形式，让开发者齐全掌控组件的外观和款式。
• React Aria：由 Adobe 团队开发的一个库，它是一个残缺的 HeadlessUI 解决方案。它不仅解决组件的行为和性能，还关注组件的可拜访性和国际化。该库的 API 次要由一组钩子组成，能够应用这些钩子来构建本人的组件。尽管它还处于 alpha 版本，但它的指标是提供开箱即用的预约义组件。
• RadixUI：以前是一个 HeadlessUI 组件库，但最近增加了主题和一些款式。它以其杰出的可拜访性和可组合性功能而闻名。应用 RadixUI 时，所有主题都通过 CSS 自定义属性公开，这意味着能够轻松地用本人的 CSS 款式笼罩默认款式。这个库的指标是提供一种简略而弱小的形式来构建组件，同时容许自定义和扩大其外观。

混合办法

• ShadCN/UI：它提供了一种不同于其余库的开发方法。不须要通过 npm 装置组件或整个库，而是将代码间接复制粘贴到本人的代码库中。这样做的目标是让开发者齐全领有组件，并将设计和实现拆散。它应用 Tailwind 进行构建，并提供了一个 CLI 工具，能够生成组件代码并调整 tailwind.config.js 文件。
• KumaUI：它应用零运行时 CSS-in-JS 技术创立 headless UI 组件，提供了很大的灵活性。它在设计上受到了其余零运行时 CSS-in-JS 解决方案（如 PandaCSS、Vanilla Extract 和 Linaria）以及 Styled System、ChakraUI 和 Native Base 的启发。

Vue

Vue 生态系统中，很多库的文档都是用中文而不是英文编写的。

组件库

• Quasar：它自身不被视为一个库，而更像是一个框架。它是基于 Vue 的，但它的理念是能够应用它来创立网站和利用，这意味着它应用 CLI 为 Web、挪动端、桌面端、SPA（单页利用）、SSR（服务端渲染）等生成不同的输入。
• Vuetify：宣称本人是一个不须要设计技能的开源 UI 库，领有精心制作的 Vue 组件。它像大多数成熟的组件库一样，功能齐全。同样，须要理解该库的 API，并被“锁定”到它们的组件组合模型中能力应用。
• Element Plus：正如官网所述，Element Plus 是“面向设计师和开发者的基于 Vue 3 的组件库”。不确定它与其余库有何不同，但它提供了雷同品种的组件抉择。它领有超过 2 万颗 star 和每周超过 15 万次下载量，这表明它很受欢迎。
• VueMaterial：顾名思义，VueMaterial 是 Material Design 的 Vue 实现。文档简略、轻量、响应式，具备易于应用的 API，听起来像是一个欠缺的组件库所具备的长处。

Angular

Angular 正在经验一种振兴，并且仍有很多公司在应用它。

组件库

• Angular Material：和其余各种框架的 Material 实现一样。它们都自称是高质量、多功能的。
• PrimeNG：这个汇合中有一个很好的中央是能够抉择根底主题。能够从其余风行的设计框架（如 Material Design、Bootstrap、Soho、Fluent、Nano 等）中抉择设计选项。这是通过一个可视化编辑器实现的，它是主题选项的一部分。PrimeNG 还提供了一个 Figma UI 工具包、现成的模板和一个 SASS API。
• NG Bootstrap：它是 Angular 与 Twitter Bootstrap（4.0）的绑定。但须要留神的是，开发者须要同时学习库的 API 以及把握 Bootstrap 的类名的应用形式。

Svelte

Svelte 内置了很多解决款式和动画的性能。对于款式，只需在组件文件中应用 style 标签，并且它的作用域仅限于该组件。此外，Svelte 还具备解决缓动和弹簧动画的 motion 模型，这对开发体验来说十分棒。

Headless 组件

• Svelte Headless UI：齐全移植自 React Headless UI，与 SvelteKit（Svelte 元框架）兼容。

组件库

• SvelteUI：一个功能齐全的组件库，应用 TypeScript 编写。它蕴含了 50 多个高度可自定义的组件，涵盖了在一个组件库中常见的布局、操作、输出和排版等各种元素。
• Smelte：一个基于 Svelte 和 Tailwind CSS 的 UI 框架，合乎 Material Design 标准。它提供了一个 Rollup 插件，能够在其中定义主题、色彩等款式。只须要导入库的 CSS，就能够开始应用它了！这个库还提供了一些在其余库中较为少见的组件，例如日期选择器、导航抽屉和树视图。

Solid

SolidJS 是一个绝对较新的框架，与上述大多数框架相比存在工夫较短。它是你下一个我的项目的一个牢靠抉择。

Headless 组件

• Kobalte：一个未经款式化的、可拜访的、可组合的 UI 工具包，用于构建设计零碎根底。受到 AriaKit、RadixUI、React Araia 和 Zag 的启发。从官网文档来看，它看起来很像 Radix 的实现。留神：仍处于测试版。

组件库

• SUID：SolidJS 的 MUI 移植版本。正如文档中所说“雷同的 API，雷同的设计”，如果来自 React 并且应用过 MUI，这会让你感到宾至如归。同样的注意事项也实用。它们有一个很酷的工具，能够将 React 代码转换成 Solid 代码。
• Solid Bootstrap：顾名思义，这是一个在 SolidJS 之上的 Bootstrap 包装器。不同之处在于，你须要应用props（例如variant）而不是类来操作大部分内容。还有一个“Core”版本，其中蕴含了 headless 实现的组件。

Qwik

作为本文最新的框架，Qwik 生态系统依然很新。因而，在这里的选项绝对较少。但能够利用 React 生态系统在 Qwik 利用中应用组件库。

Headless 组件

• QwikUI：尽管仍处于测试版，但 QwikUI 提供了一个 headless 套件，用于构建齐全兼容 WAI-ARIA 组件。当初的 beta 版本中有下拉框、标签页和手风琴。他们还制订了提醒工具、选择器和弹出窗口的草案。该团队还在开发本人的 ShadCN/UI 办法，代号“Fluffy”。

跨框架

最近也呈现了一些应用 CSS 工具链构建的独立库：

• ArkUI：应用状态机为 React、Vue 和 SolidJS 提供 headless 可拜访组件。由 Zag.js 和 Chakra UI 的创建者制作，这仿佛是这两项产品之间的折中计划。
• Flowbite：构建在 Tailwind 之上的组件，不仅实用于 JavaScript 框架，如 React、Qwik、Vue、Svelte、Angular 和 SolidJS；还实用于风行的元框架，如 Astro、Next.js、Remix、Nuxt、Meteor；以及非 JS 框架，如 Laravel、Symfony、Ruby on Rails、Pheonix、Django 和 Flask。

总结

如上所述，有许多抉择可供咱们抉择。抉择正确的解决方案可能会大大提高工作效率，而谬误的抉择则可能导致一系列问题。

因而，在做出抉择时要审慎。心愿这篇文章可能给你一个清晰的概述，让你认真思考是否须要应用库，或者是否值得投入精力来开发本人的解决方案。这不仅关乎产品团队，也关乎用户的体验。

记住，用户并不在意你应用的是哪种解决方案。抉择适宜我的项目和需要的解决方案最为重要。

参考：https://www.builder.io/blog/25-plus-ui-component-libraries

往期举荐

居然能够在一个我的项目中混用 Vue 和 React？

一行代码禁止用户调试前端代码！

高颜值挪动端 UI 组件库

Bun 1.0 正式公布，爆火的前端运行时，速度遥遥领先！

图解 60 个 CSS 选择器，一网打尽！

Node.js 终于原生反对 .env 文件了！