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 文件了!

热门相关:流鱼无恙   一等狂妃:邪王,请接招!   慕少,你老婆又重生了   我是仙凡   嫡嫁千金