32K star 的 Chakra UI，以及未来的展望

ssh_晨曦时梦见兮

发布于 2023-10-14 08:19:31

3890

发布于 2023-10-14 08:19:31

Hi，我是 ssh，最近一段时间，经常听说 Chakra UI 这个库，虽然没有在公司的项目里用过，但是从我短暂的了解来说，感觉是个兼顾优雅和实用的 UI 组件库，最近 Chakra UI 的作者 Segun Adebayo 发表了一篇文章，讲述了他对这个库未来的一些展望，给了我很多启发，接下来我给大家分享一下他的这篇The future of Chakra UI

正文

在过去的五年里，我一直在致力于 Chakra UI，并为我们所取得的成就感到非常自豪。随着我们团队的壮大，我们每月的下载量超过190 万次，每月独立网站访问量超过200 万次，GitHub 上的 Star 达到了31000 颗。这是我至今为止最有成就感的项目之一。

从一个单打独斗的维护者开始，发展为一个多框架团队的项目，这段旅程紧张而刺激。发展和管理 Chakra 核心团队是一段非常好的经历，再来一次的话，我还是会这样做。

说到这，让我们来看看 Chakra UI 的下一步计划。迫不及待和你分享了。

快速回顾

在创立 Chakra UI 时，我的目标是创建可组合的、易于访问的 UI 组件，用于构建复杂的界面。我希望创建一个组件系统，任何人都可以使用，无论他们在 React 方面的技能水平如何。

在这段时间里，Styled System、Styled Components 和 Emotion 是最受欢迎的用于样式化应用程序和设计系统的工具。受到 Brent Jackson 在 Styled System 中的工作启发，我借鉴了很多他的想法来构建 Chakra UI 的样式基础。

// 这是一个盒子
<Box>I'm a box</Box>
// 如果你想将它的背景设置为红色，可以传递`background=red`。感觉很直观！
<Box background="red">I'm a red box</Box>
// 如果你想在鼠标悬停时改变背景
<Box background="red" _hover={{ background: 'blue' }}>
  I'm a red box that turns blue on hover
</Box>

Chakra UI 中超直观、灵活的样式系统是该库最受喜爱的功能之一。每次使用它，我都感到很高兴有像 Chakra 这样的工具存在（是的，虽然是我自己建立的）。

随着生态系统中围绕 Headless 组件、设计标记和服务器组件的最新趋势，组件库的期望正在发生变化，整个领域也在变化。

我一直在思考如何发展 Chakra UI，其中一个主要的想法是把它转变为一个“设计系统基础设施”。让我们深入了解一下。

挑战

Chakra UI 存在的主要技术缺点是它的运行时 CSS-in-JS，这是由于 @emotion/styled 依赖造成的。这并不是 Chakra 独有的问题，其他流行的库如 Material UI、Mantine 和 Theme UI 也存在同样的问题。

我们的用户最常提出的要求之一就是去掉运行时 CSS-in-JS，因为这样可以提高性能，减少初始 JS 负载，并且使得 Chakra 可以在 React Server Components（RSC）中使用。

所以是的，我可能收到了 80 多条私信，问：“你能去掉运行时 CSS-in-JS 吗？”

另一个常见的请求是添加更复杂的组件，比如日期选择器、自定义选择器、嵌套菜单等等。目前，我们已经有许多可以利用的 React hooks，但我们发现，随着新功能或补丁的增加，理解一个组件所需的认知负荷显著增加。

设计一个对 UI 组件友好且易于维护的 API 是具有挑战性的。

话虽如此，我们当然正在开发日期选择器和自定义选择器 😉

当与更大的团队和更高级的工程师合作时，我们发现需要一个更强大的主题解决方案，它不仅限于浅色和深色模式，还能支持多品牌解决方案。

最常见的请求是这样的：“我们如何将类似 Figma Tokens 或 Style Dictionary 这样的标记平台与 Chakra 的主题解决方案集成？”

需求

考虑到这些挑战，最想当然的是：“当然，很好解决”，并且花费大量时间来构建一个适用于 React 的解决方案。但是考虑到 Chakra UI 现在是一个多框架库，这意味着相同的工作量必须在 Vue.js 团队中复制一遍。我们过去尝试过这种方式，但不好搞，因为会导致过度劳累和不一致的开发体验。

我发现解决这些挑战的最佳方法是将它们分解为更小、更可管理的部分。在工程领域中，定义需求是解决问题的关键第一步。

以下是我们对 Chakra UI 未来的一些要求：

跨框架支持：Chakra UI 是一个跨框架库。它可以在 React、Vue、Angular、Svelte 和 Solid 中使用。这意味着我们构建的任何解决方案都必须支持跨框架。
设计标记（Design Tokens）：Chakra UI 的主题系统非常简单，并且在大多数用例中运作良好。然而，它不足以支持更复杂的用例。
样式属性（Style Props）：Chakra UI 的样式属性非常直观易用。我们需要保持这种使用体验，同时去除 CSS-in-JS 的运行时。
减少维护工作量：如果架构得当，我们可以通过将关注点分解为更小、更可管理的部分来减少库的维护负担。

哇！这么多要求，让我们看看我们目前是如何应对它们的。

方法

2022 年中旬，我对状态机和 XState 产生了兴趣，因为它们提供了一个醒目的承诺：可以一次建模任何复杂的系统，然后在各个地方重用它。它们还提供了一种可视化和调试状态图的好办法。

这让我好奇的不行，然后我带着一个名为 Zag.js 的新库回来了，这是一个用于构建 UI 组件的低级状态机。

我与 Lee Robinson 制作了一个视频，在视频中我们讨论了 Chakra 的未来以及我们计划下一步要做的事情。你可以在这里观看：www.youtube.com/watch?v=I5x…

这时，我并不知道我们将如何实现这一目标，但是当我使用 XState 为 Chakra UI 的一些组件构建了一个概念验证时，突然有灵感了。

分解单体应用

目前，我认为 Chakra UI 是一个由不同关注点组成的巨大单体应用。我们有紧密耦合在一起的 React hooks、组件、主题系统、样式系统和多态类型。

多年来，这提高了理解或贡献代码库的门槛。要完全理解每个部分的配合方式需要相当长的时间，使得排障和 BugFix 的时间太长。

为了降低复杂性，我们将 Chakra 中的大型的想法分解为更小、可管理和独立的项目。以下是一个简要概述：

样式系统：零运行时 CSS-in-JS 系统，支持样式属性。
设计 Token：一个地方来定义、记录和自动化设计 Token。
状态机：一次建模组件逻辑，到处重用。
Headless UI 组件：针对状态机的特定框架包装器。类似于适用于所有框架的 Radix UI。

零运行时 CSS-in-JS（Panda）

这是我们从用户那里接到的的最常见和最具挑战性的请求。

运行时 CSS-in-JS 和样式属性是强大的功能，允许开发人员构建可组合、可预测和易于使用的动态 UI 组件。然而，它以性能和运行时开销为代价。

随着 React Server Components 的发布，能够在服务器上编写 Chakra UI 组件变得至关重要。这对于性能、开发和用户体验都是巨大的胜利。

我们正在构建一个新的、与框架无关的样式解决方案，它保留了 Chakra 样式系统的大部分优点，但在构建时提取样式。它还将包含一个 PostCSS 插件，在开发过程中的 PostCSS 运行时提取样式。

Panda 将利用 CSS 变量、级联层和 W3C Token 规范等新的现代平台功能。

这个项目目前仍处于早期开发阶段。如果你想测试它并帮助我们改进，请通过Twitter或segun@chakra-ui.com与我们联系。

组件的状态机（Zag）

Chakra UI 中的每个交互式组件都将被建模为一个状态机。我们的核心原则是，大多数组件无论使用哪个框架，都应该具有相似的功能。

状态机允许我们仔细设计组件逻辑的状态和转换。这种方法将使我们能够构建易于调试、可预测和易于维护的组件。

Zag.js 是我们用来构建 Chakra UI 中所有组件的低级状态机库。我们的目标是开发一套在大多数 JavaScript 框架中都可以使用的强大的 App 和电子商务组件集合。

要了解更多关于 Zag.js 的信息，请查看这里的文档：zagjs.com，或者你可以在 Learn with Jason 节目中观看我的演示：www.youtube.com/watch?v=l8H…

以下是使用 React 使用 Zag.js 构建数字输入组件的快速示例：

// 1. 导入状态机
import * as numberInput from "@zag-js/number-input";
// 2. 导入React绑定
import { useMachine, normalizeProps } from "@zag-js/react";

export function NumberInput() {
  // 3. 使用状态机
  const [state, send] = useMachine(
    numberInput.machine({ id: "1", max: 50, min: -50 })
  );

  // 4. 将状态机转换为用户友好的API
  const api = numberInput.connect(state, send, normalizeProps);

  // 5. 渲染组件
  return (
    <div {...api.rootProps}>
      <label {...api.labelProps}>Enter number:</label>
      <div>
        <button {...api.decrementButtonProps}>DEC</button>
        <input {...api.inputProps} />
        <button {...api.incrementButtonProps}>INC</button>
      </div>
    </div>
  );
}

迁移到 Headless 组件系统（Ark）

使用状态机构建 UI 组件听起来很有意思，但也会增加复杂度。会让人害怕在用之前需要学习状态机。其实不是。

为了增加使用率，我们将 Zag.js 组件逻辑封装到一个 Headless 组件库中，你可以用它来快速构建应用程序和设计系统。

import { NumberInput } from '@ark-ui/react';

export function Demo() {
  return (
    <NumberInput min={-50} max={50}>
      <Number

Input.Label>Label</NumberInput.Label>
      <NumberInput.Field />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>
          <button>-1</button>
        </NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>
          <button>+1</button>
        </NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput>
  );
}

我们创建了一个名为 Ark 的新库，它将成为 Chakra UI 的 Headless 组件基础。