Show HN: Hyper – 首重标准的 React 替代方案

Show HN: Hyper – Standards-first React alternative

Source | HN Comments

文章介绍了 Hyper，一个首重标准的 React 替代方案，旨在通过使用 HTML、CSS 和 JavaScript 等 Web 标准，构建简洁、可扩展的用户界面。Hyper 强调简单性，减少抽象，并提供解耦的设计系统，与 React 的单体架构形成对比。文章通过对比 React 和 Hyper 在简单和复杂组件、设计系统和可扩展性方面的差异，展示了 Hyper 的优势。Hyper 最终目标是构建更简单的堆栈，并计划在全栈应用和生成式 UI 方面进行发展。

Home Docs Blog Vision Hyper Standards first React alternative › Slack 8.5k Back 2025年5月8日

Introducing Hyper — 首重标准的 React 替代方案 (开发者预览版)

Tero Piirainen @tipiirai Hyper 是一种首重标准的标记语言，用于构建用户界面。它使开发者（和 AI 模型）能够生成具有惊人简洁语法的复杂 UI。

项目目标

首重标准：用户界面应使用 HTML 组装，使用 CSS 样式化，并使用 JavaScript 增强。
简洁：UI 组合应该简单，并且尽可能减少客户端和服务器端 (SSR) 的习惯用法和抽象。
设计系统：设计应该是一个独立的子系统，方便那些关心和理解设计的开发者访问。
可扩展性：复杂的 UI 应该在应用程序增长时保持简单。

为了理解这些目标是如何实现的，我们将 React 作为一个反例，因为它与 Hyper 的架构和设计目标相反。React 采用了一种单体架构，其中逻辑、结构和样式混合在一起，而 Hyper 正是 React 1.0 (2013) 最初设想的：只是一个无头的视图层。让我们更详细地研究一下差异：

比较：React vs Hyper

简单组件

下面是一个基本的 <table> 组件，以三种方式定义：现代 React 老派 React Hyper

现代 React 现代 React 代表了当今构建用户界面的常用方法，使用诸如 ShadCN/UI、Material UI、Chakra 或 Tailwind Catalyst 之类的组件库。在此示例中，我们选择了 ShadCN，因为它近年来获得了极大的欢迎，并且具有强大的 AI 工具支持。例如，Claude 和 ChatGPT 在其代码预览中提供了对 ShadCN 的内置支持。 Source • Demo
老派 React 是在样式与组件代码分离的时代，React 组件的构建方式。 Source • Demo
Hyper 展示了首重标准的方法。 Source • Demo

虽然这些差异可能看起来很小，但当我们转向更复杂的组件时，它们会变得很明显：

复杂组件

接下来，我们检查这些方法如何处理日益增长的复杂性。这是相同的表组件，但现在具有排序和过滤功能：现代 React Vanilla TSX Hyper

现代 React 是根据 ShadCN 的 data table 文档组装的。捆绑的 JavaScript 为 91.3KB。 Source • Demo
Vanilla TSX 使用 useState 和 useMemo 来实现添加的功能，并且 HTML 以老派方式使用大量的类名进行标记。
Hyper 使用语义 HTML，具有最少的类名和两种用于排序和过滤的实例方法。生成的 JS 仅为 3.9KB minzipped (1.2KB + 2.7KB for hyper.js)。 Source • Demo

设计系统

这是一个使用 Hyper 组装的示例仪表板： Source • Demo 这是相同的仪表板，但具有 "Ramsian" 的外观：这种转换不需要更改任何组件代码。只是一个 32 行的 CSS 文件扩展了基本设计系统。 Demo

现代 React：紧密耦合的设计

当设计选择通过 CSS-in-JS 或 Tailwind 耦合到组件中时，这种设计交换会变成一项大型编程工作。例如，在 ShadCN 中，要更改标题的排版，您需要编辑 alert-dialog.tsx, alert.tsx, card.tsx, dialog.tsx, drawer.tsx, 和 sheet.tsx。这需要理解诸如 data-slot, {...props}, cn(), clsx(), 和 twMerge() 之类的习惯用法。这是标题和描述元素的代码：紧密耦合还会产生维护问题。例如，ShadCN 的 "New York" 主题复制了它们的默认主题，从而导致需要维护的 additional TSX code 超过 40,000 行。虽然你绝对可以将样式与 React 组件分离，但在实际应用程序中很少看到这种模式。相反，由于担心 "全局命名空间污染" 或其他原因，通常不鼓励使用原始 CSS。

Hyper：解耦的设计系统

相比之下，Hyper 将你的排版问题集中到一个 CSS 文件中，充当你的 h2 和 p 元素样式的单一来源： ``` // typography.css @layer globals { h2 { font-size: 1.125em_;_ font-weight: 500_;_ } p { color: var(--base-500)__; text-wrap: balance_;_ line-height: 1.5_;_ } // all typography rules "colocated" here }


这解决了现代 React 中的三个关键问题：
  1. 跨项目和样式环境的**真正可重用的组件**
  2. **集中式设计系统**，可从同一位置轻松维护
  3. 由于严格分离了关注点，因此**零样板**

Nue 实际上 _强制_ 你使用外部设计系统。 任何形式的紧密耦合：CSS-in-JS、类名滥用、组件特定的 `<style>` 元素、内联 `style` 属性或像 `size-[max(100%,2.75rem)]` 这样的神秘类名值都会被系统地消除。
## [](https://nuejs.org/blog/standards-first-react-alternative/<#scalability> "Scalability")可扩展性
以下是简单性如何扩展的：一个完整的 [app](https://nuejs.org/blog/standards-first-react-alternative/</mpa.nuejs.org/app/>) 比 React 按钮更轻：
Hyper 的首重标准的方法建立了一种不同的范例，以简单性为中心：
![](https://nuejs.org/img/react-button-vs-nue-spa-big.png)
你的应用程序开始很简单，并且随着项目的增长而保持简单。 [Source](https://nuejs.org/blog/standards-first-react-alternative/</github.com/nuejs/nue/tree/master/packages/examples/simple-mpa>) • [Demo](https://nuejs.org/blog/standards-first-react-alternative/</mpa.nuejs.org/app/>)
### [](https://nuejs.org/blog/standards-first-react-alternative/<#note> "Note")注意
上面的应用程序是用 [Nue JS](https://nuejs.org/blog/standards-first-react-alternative/</github.com/nuejs/nue/tree/master/packages/nuejs>) 编写的，Hyper 最终会替换它。 转换为 Hyper 后，由于可执行文件更小和组件更小，该应用程序甚至更小。
## [](https://nuejs.org/blog/standards-first-react-alternative/<#get-started-with-hyper> "Get started with Hyper")开始使用 Hyper
首先，安装 [Bun](https://nuejs.org/blog/standards-first-react-alternative/</bun.sh>):
![](https://nuejs.org/icon/copy.svg) ```
# Install Bun
curl _-_fsSL _/__/_bun_._sh_/_install _|_ bash

Hyper 使用 Bun 是因为它具有出色的 Web 标准支持、内置的 JavaScript 打包器、缩小器和强大的性能。在我们的 FAQ 中查看详细信息，了解为什么我们更喜欢 Bun 而不是 Node。

安装 Hyper

```

Install Hyper

bun install nue_-_hyper


#### [](https://nuejs.org/blog/standards-first-react-alternative/<#learn-hyper> "Learn Hyper")学习 Hyper
从 [Hyper documentation](https://nuejs.org/blog/standards-first-react-alternative/</hyper/>) 检查示例、API 文档和语言语法
## [](https://nuejs.org/blog/standards-first-react-alternative/<#faq> "FAQ")常见问题解答
### [](https://nuejs.org/blog/standards-first-react-alternative/<#how-is-this-different-from-svelt> "How is this different from Svelte and Vue?")这与 Svelte 和 Vue 有什么不同？
虽然 Svelte 和 Vue 都提供了比 React 更轻量级的开发环境，但它们仍然与 Hyper 的首重标准的愿景不同。 尽管它们通过其组件结构提供了更好的关注点分离，但这些生态系统中的许多流行模式仍然鼓励通过作用域 CSS、CSS-in-JS 库或 Tailwind 集成将设计与组件耦合。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#what-is-nue> "What is Nue?")什么是 Nue？
Nue 是一个基于 [Nue JS](https://nuejs.org/blog/standards-first-react-alternative/</github.com/nuejs/nue/tree/master/packages/nuejs>) 模板的网站/webapp 生成器。 Hyper 是 Nue JS 的下一个演变，它将取代它。 所有 Nue 项目都位于同一个 [monorepo](https://nuejs.org/blog/standards-first-react-alternative/</github.com/nuejs/nue/tree/master/packages/>) 下。 以下是产品层次结构最终的样子：
![Hyperlink is the upcoming router solution. The shield icon represents the close connection to web standards](https://nuejs.org/blog/standards-first-react-alternative/img/branding-big.png)Hyperlink 是即将推出的路由器解决方案。 盾牌图标表示与 Web 标准的紧密联系
### [](https://nuejs.org/blog/standards-first-react-alternative/<#isnt-this-just-another-framewor> "Isn't this just another framework?")这不只是另一个框架吗？
Hyper 采用了一种与此问题所暗示的不同方法。 Hyper 的目标不是增加工具和抽象的生态系统，而是通过回归 Web 标准来减少工具和复杂性。 它消除了对许多专门框架、库和实践的需求，这些框架、库和实践的出现是为了解决 React 生态系统中的挑战。 我们的目标是提供一种更简单的途径，从而减少不断学习新框架和工具的需求。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#why-are-standards-so-important> "Why are standards so important?")为什么标准如此重要？
标准提供重要的长期利益：
  1. **永恒的技能**：HTML、CSS 和 JavaScript 基础知识在几十年内仍然有价值，而特定于框架的知识可能会过时。
  2. **可持续的产品**：主要使用 Web 标准构建的应用程序往往需要更少且更少破坏性的重写。

考虑一下 React 的生态系统是如何随着时间推移而发展的：类组件让位于 hooks，状态管理从 Redux 转移到 Context 再到各种替代方案，如 Zustand 和 Jotai，而样式方法继续从 Styled Components 演变为 Emotion 再到 CSS Modules 等等。每次转变都需要开发者学习新的模式，并且经常重构现有代码。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#whats-next-in-line> "What's next in line?")接下来是什么？
我们分两个阶段让 Hyper 能够让所有人轻松访问，包括后端开发者、初学者和 AI 模型：
#### [](https://nuejs.org/blog/standards-first-react-alternative/<#full-stack-applications> "Full-stack applications")全栈应用程序
Hyper 和 Nue 有能力展示：
  * 直观的路由和导航系统
  * 简单的跨组件通信
  * 后端服务器和数据库集成
  * 三个可互换的设计系统
  * 部署到云（运行时不可知）

预计：3 个月。
#### [](https://nuejs.org/blog/standards-first-react-alternative/<#generative-uis> "Generative UIs")生成式 UI
一种让你和 AI 以最小的努力生成 UI 的方法：
  * 基本的 HTML 和 CSS 构建块
  * 更高级的组合
  * 内置的可访问性和响应性
  * 自文档化的 API 和模式
  * 基本设计系统（无头，仅网格）

预计：4-5 个月。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#how-can-a-small-library-challeng> "How can a small library challenge React's dominance?")一个小型的库如何挑战 React 的统治地位？
逐步地。 为了成功，我们需要解决以下问题：
  1. **开发者认知**：许多前端开发者已经开始将抽象层视为必不可少的。 随着 Hyper 演示了如何在没有这些复杂性的情况下构建专业的 UI，这种认知将会改变。
  2. **产品完成**：一些关键部分仍在开发中，特别是可靠的启动器模板和全面的设计系统。

一旦解决了这些挑战，Hyper 就有可能获得显着的发展势头。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#isnt-the-name-already-in-use> "Isn't the name already in use?")这个名字不是已经被使用了吗？
是的，"Hyper" 是一个 Rust HTTP 库、一个 Electron 终端模拟器，现在是一种基于 HTML 的语言语法。 每一个都在不同的上下文中服务于独特的目的。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#can-i-contribute> "Can I contribute?")我可以贡献吗？
是的。 尤其是不干扰核心架构的想法。 如果你具有深厚的 CSS 专业知识，我特别希望与你联系。
### [](https://nuejs.org/blog/standards-first-react-alternative/<#can-i-give-feedback> "Can I give feedback?")我可以提供反馈吗？
当然可以！ 加入我们的邮件列表，以便在 Hyper 正式发布时收到通知。 加入后你可以提供反馈。
## 最终目标
我们的最终目标是构建一个更加简单的堆栈。 我们正在分三个主要步骤进行：
[ ![Nue roadmap](https://nuejs.org/blog/standards-first-react-alternative/img/roadmap-2025-2-big.png) ](https://nuejs.org/blog/standards-first-react-alternative/</vision/>)
加入邮件列表以关注我们的进度并了解我们的 [vision](https://nuejs.org/blog/standards-first-react-alternative/</vision/>) 如何展开：
![Nue logo](https://nuejs.org/img/logo.png)
[Why Nue](https://nuejs.org/blog/standards-first-react-alternative/</docs/>) [FAQ](https://nuejs.org/blog/standards-first-react-alternative/</docs/faq.html>) [Blog](https://nuejs.org/blog/standards-first-react-alternative/</blog/>) [Vision](https://nuejs.org/blog/standards-first-react-alternative/</vision/>) ![](https://nuejs.org/icon/close.svg) [Home](https://nuejs.org/blog/standards-first-react-alternative/</>) [Docs](https://nuejs.org/blog/standards-first-react-alternative/</docs/>) [Blog](https://nuejs.org/blog/standards-first-react-alternative/</blog/>) [Vision](https://nuejs.org/blog/standards-first-react-alternative/</vision/>) [GitHub](https://nuejs.org/blog/standards-first-react-alternative/</github.com/nuejs/nue>)