全栈组件定制金字塔
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
目录
前段时间，我看到Clerk.com的 Colin 发了一条推文，他说“组件是新的 API ”。我完全同意。多年来，我们一直致力于为客户构建可嵌入的组件。我们的目标很简单：如何创建一个功能齐全、集成度高、无缝衔接的组件，让它看起来像是宿主应用程序内部开发的？
过去，使用可控 iframe 嵌入组件的常见模式会导致行为不一致，并且在很多情况下会让人感觉与应用程序脱节。元框架和无服务器理念的兴起提供了一种更简便的范式，可以将框架原生组件嵌入到宿主应用程序中，使其与宿主应用程序融为一体。
你可能已经遇到过很多例子：Stripe、Clerk、Liveblocks、Algolia 等。
组件解剖
我接触过的所有成功组件都展现出以下特点：
- 一流的用户体验 (UX)：感觉就像有一个专门的团队专门为我的应用程序打造了这个组件。
- 卓越的开发者体验 (DX)：它直观易用，几分钟即可轻松上手。
- 可定制性：它可以无缝融入我的宿主应用程序，同时仍然能提供强有力的意见。
- 轻量级包装：它高效且体积小巧。
- 通用框架：该组件在我应用中使用的框架中可用。
我是否遗漏了您认为重要的内容？请在评论区分享您的看法。
本文将重点介绍组件的定制和样式设计。我将分享我们在构建全新 Novu<Inbox />组件过程中汲取的一些经验教训，以及我们如何满足客户的需求。
定制金字塔
自定义和样式设置的范围很广，从完全控制到完全控制，应有尽有。无论您是刚刚起步、希望快速上手的新手，还是拥有严格设计体系、专业设计团队和复杂需求的财富 500 强企业，您都应该能够在最短的时间内实现目标，并获得卓越的开发体验。
<Inbox />让我们以 Novu 的新组件为例，来探讨一下定制金字塔的概念。顺便一提，我们的源代码是开源的，可以在Novu 的 GitHub 代码库中公开获取。
最后，我们也公开了我们的Figma 设计资源文件。
外观道具
您可以将外观属性视为组件 UI 系统内部的白标功能，它允许对组件的不同方面进行样式设置和修改。
一个好的组件应该具有鲜明的设计理念，并能开箱即用地呈现精美的用户界面。对于 Novu 的<Inbox />组件来说，这就像<Inbox />在你的应用程序中渲染一样简单。你会立即获得一个功能齐全的用户界面，其中包含一个铃铛图标，点击即可弹出窗口。
我们首先要做的是确保组件中的品牌颜色和设计规范与品牌颜色和设计规范保持一致。这时，appearance道具就派上用场了。
<Inbox appereance={{
variables: {
primaryColor: 'pink',
borderRadius: '4px'
},
elements: {
notificationSubject: {
marginBottom: '5px'
},
notificationPrimaryAction__button {
lineHeight: '18px'
}
}
}} />
变量
这些变量适用于用户界面中的所有主要元素。只需调整其中几个变量，组件即可立即采用宿主应用程序的外观和风格。字体、颜色和间距等变量都应包含在此处。
元素
本节提供对组件内可见元素的更深入控制。在 Novu，我们对组件的命名空间定义如下：
notificationSubjectnotificationBodynotificationPrimaryActionnotificationPrimaryAction__button- 对于子元素，我们使用下划线表示法来命名重复的组件，例如按钮和标签。
客户应该能够选择他们喜欢的样式框架，无论是 Tailwind、CSS Modules 还是纯 CSS，并且都应该能够开箱即用，无缝运行。
🌟提示：我们在类名列表中添加了🔔图标，以帮助识别元素名称。此表情符号之前的所有内容都可以使用元素字段轻松定位和设置样式。
渲染属性
在某些情况下，仅使用 CSS 进行样式设置是不够的。例如，在我们的环境中，客户可能希望渲染自定义通知项组件、使用实时数据丰富这些组件，或者在通知流程中重用现有的 UI 元素。
以下是它的样子：
<Inbox renderNotification={(notification) => <CustomersCustomItem />} />
这种方法可以更好地控制通知的外观、感觉和行为，同时还能抽象化布局、实时更新、获取和通知设置的复杂性。
作品
虽然你的组件应该有自己的设计理念，但你不应该限制客户实现其最终目标。在某些情况下，你无法预测他们想要使用的、符合其业务特定需求的UX模式。
在“无头”模式（需要从零开始构建所有内容）和几乎抽象掉所有内部细节的单行组件之间存在着巨大的鸿沟。可组合子组件应该能够弥合这一鸿沟，它将单行组件拆分成多个可以重新组织以适应不同用户体验模式的组件。
为了实现这一点，你的组件应该是可组合的。将组件结构分解成独立的元素，每个元素专注于一个单一的目标。在我们的示例中：
<Bell /><Notifications /><Preferences /><Inbox />
每个元素都可以作为独立组件渲染，并组合起来创建各种布局，同时还能抽象化复杂性。
React Hooks
当客户对设计和用户体验有严格的要求时，使用 React Hooks 就显得尤为重要。然而，采用这种无头架构有时意味着未能提供足够的样式和组件组合选项，或者可能使用了特定于框架的 SDK。为了更好地理解其背后的原因，我们会与选择这种方式的客户进行交流，了解他们的用例是否能为其他客户带来益处。
React Hooks 无头 SDK 允许客户构建他们想要的任何 UI，自行管理外观、状态、交互和布局。
举个例子：
import { Novu } from "@novu/js";
const novu = new Novu({
subscriberId: "SUBSCRIBER_ID",
applicationIdentifier: "APPLICATION_IDENTIFIER",
});
const notifications = await novu.notifications.list({
limit: 30,
});
novu.on("notifications.notification_received", (data) => {
console.log("new notification =>", data);
});
无头 SDK 不提供用户界面，但提供了一组简单的封装器，用于封装组件最常用的 API 和服务器操作。
结论
从用户的角度思考，并在初期搭建合适的架构至关重要。花时间探讨用户体验设计（DX），将其展示给用户，并努力了解他们在使用过程中遇到的主要痛点。最后，分层设计定制策略，让客户能够快速上手，即使他们有更具体的样式和用户体验需求，也不会阻碍他们。
我很好奇“组件是新的 API”这一理念未来会带领我们团队走向何方，也很期待向我们优秀的社区学习。
最后，我必须提醒您看看我们的成果。在这里，您会看到一个功能齐全的<Inbox />演示环境，我们将其设计成模仿热门应用（Notion 和 Reddit）的风格，您还可以通过自定义来尝试不同的设计。
