Show HN：Nucleus——以文档为状态、由类 CSS 规则驱动的 Web 应用

富 HTML 应用 - 实现新颖的 ASO 架构模式。

在线演示：完全 RESTful 的 Todo 应用 - 不到 50 行代码，零应用 JS，无需构建流程。

todo-app.html todo-app.quark todo-app.css

你的 HTML 就是应用！即插即用的自定义元素，每个元素只承担单一职责，然后编写由 CSS 派生的规则来观察页面并做出相应反应。真相之源——你的 HTML——正是浏览器所绘制的内容。

没有组件，没有虚拟 DOM，没有藏在 JS 内存中的第二份应用状态副本，也没有构建流程。

它与现有 UI 解决方案有何不同

回到未来 🚗⚡️ 欢迎回到构建静态 HTML5 应用的时代。告别那些编译成 HTML 的复杂 JavaScript 应用，稍作喘息。
极少甚至无需 JavaScript 绝大多数 UI 场景下你不再需要编写 JS。对于复杂场景，你仍可调用自己的纯函数。
原生++ 这是真正的 HTML。还配有一位独立且协同的宾客：Quark。
没有魔法 没有特殊框架、构建流程、渲染奇技，也没有“JS 里的 HTML”/“HTML 里的 JS”这类 DSL。
渐进增强 可直接嵌入现有的静态/服务端渲染站点。Nucleus 元素和 Quark 也可独立使用。
完全可组合 模板、模板化、行为和自定义逻辑全部解耦且健壮。
响应式状态机 为你的业务逻辑提供简单、可靠、声明式的语法——Quark。
没有协调开销 无需为状态/DOM 保留大量内存副本，无需在每次状态变化时重建、与 DOM 进行 diff、重新编译。
轻量所有 Nucleus 元素 + Quark + Neutron 的占用（压缩后仅略超 ~50kb）比某些 UI 框架的核心本身还要小。

想看看它在生产级应用中的运行效果，请参见 Wrenfield——一个虚构的全功能电商网站，具备 SSG、SPA、Web AR/3D 模型、WebAuthn、视图过渡、触摸手势等功能。在移动端试用可获得类原生体验。Wrenfield 的构建没有使用应用 JS，也没有 UI 构建流程。

技术栈包含什么

NucleusKit 元素 不断扩充的即插即用自定义元素目录，包括：抽屉、标签页、表格、懒加载视图、表单、路由、通行密钥、数据获取等。
Quark 就像 CSS，但用于文档变更。选择元素、绑定数据、生成列表、连接事件，并用简单规则而非命令式代码驱动状态转换。
Valence.css 语义化、无类名的 CSS，兼顾原生元素和自定义元素，带有主题、明暗配色方案和设计令牌。专为轻松即插即用而设计。可选。
Neutron 用于编写上述元素的小型 JS 工厂。仅当 NucleusKit 目录缺少你所需的内容时才使用它。可选。

每个部分都独立存在。可以在现有网站上使用一个元素，或者将整个技术栈组合成一个完整的单页应用。nucleus-kit 将所有内容打包在一个导入之后；如果你发现自己只使用了少数几个元素，可以改为按需安装那些包（@excom/content-drawer、@excom/quark-sheet……），跳过其余的。

团队为何选择它

显著减少应用代码 这之所以可能，主要有两个原因。首先，因为 NucleusKit 元素完全可组合、可配置、可控制，它们很可能与大多数使用它们的应用所期望的体验兼容；你不太可能需要自己构建。其次，Quark 使得大多数自定义无需引入 JavaScript。
没有组件 这种架构中没有“组件”概念。这使得应用各部分可以最大程度地复用和组合，因为没有地方会用紧密耦合的视图来困住逻辑。
单一事实来源 实时标记就是主要应用状态，因此一整类 bug（“UI 与模型不一致”）不可能存在。
完全可检查 打开开发者工具，整个应用就在你眼前：每个值、每个绑定、每个过渡。状态就是文档/DOM，因此一切都在检查器中清晰透明，可供查看、修改和调试。
默认无障碍 声明式 & ARIA 状态就是状态……而不是某人忘记更新的镜像。
对人类和机器友好 检查此站点即可看到其声明式特性。不再有绑定到无法追踪的 JavaScript 的 <div> 大杂烩。自定义元素造就了极其声明式的文档。一个可读、可寻址、可序列化的页面，是代码生成、AI 辅助编辑和可靠人工审计的理想目标。工具可以推理屏幕的确切状态，而不是推断组件树。同样，手动编写和调试 UI 代码从未如此简单。
声明式业务行为 你的绝大多数专有行为都以简单配置的形式存在，而不是埋藏在命令式意大利面代码中。

它的优势所在

内容丰富的网站、复杂的数据驱动业务规则、静态/服务器渲染页面的渐进增强、嵌入式用户体验。边界情况见局限性。

Nucleus Stack 还开启了此前任何 UI 技术都难以轻松实现的新可能性：

零构建工具的 UI（例如即时生成）
用于 LLM UI 构建的声明式 & 可审计目标
富用户体验的程序化组装（如 CMS）
静态/遗留 SSR 站点的增量升级
资源受限、安全或沙盒化的 Web UI（尤其是在脚本需要被验证或限制的场景，如 ATM）
嵌入式用户体验（例如为 markdown 增加嵌入式功能）

吃自己的狗粮有营养

整个站点——包括复杂部分，如文本编辑器——完全仅使用这一 UI 技术栈构建。由于这些技术的声明式设计，检查文档将让你非常深入地理解应用的组成和功能。打开你的检查器！安装 Nucleus DevTools 还会提供更深入的洞察。

Nucleus Stack 目前正由合作公司在生产环境中使用。

免费 & 开源

Nucleus Stack 采用 MIT 许可证，并将保持免费和开源，提供长期支持。这得益于其贡献者和赞助者。

欢迎贡献代码。

从这里开始

快速开始 - 五分钟内构建一个可运行的页面。
核心概念 - 一次坐下来就能理解的心智模型。
使用元素 - NucleusKit 目录以及元素的行为方式。
编排 - 熟悉 Quark。
样式 - Valence.css 主题、令牌和状态驱动的 CSS。
构建视图 - 构建一个真实应用：路由、视图、懒加载。
其他指南 - 业务逻辑、创建元素、最佳实践、故障排除、使用代理进行调试
深入探索 - 这一切背后的架构，献给好奇者和怀疑者。