展示 HN：Domphy – 工具应用的简单对象用户界面，支持 AI 修正输出
我创建了一个名为 Domphy 的 UI 框架，因为我多次尝试学习 React，但始终无法掌握。我是说，我无法理解被多层隐藏的 React 代码，尤其是当其中一些使用了 React 生态系统的库时。也许我是一个转行的架构师，所以我没有编程的基础，或者我期待的是一些清晰简洁的东西。
我认为 UI 应该是简单的——HTML 和 JS 足够了，只需要某种方式使其具备状态，而不是让它变得更加复杂。我的想法是：仅使用 JS 对象来反映 HTML，并使用函数来管理状态。当我需要重用一个组件时，我还有一个额外的概念——只需制作一个部分（我称之为 Patch）来向主对象添加属性（但原生属性仍然优先）。采用基于组件的方法会导致深层嵌套和属性膨胀，但使用补丁则不会。下面是一个示例：
```javascript
import { ElementNode, toState } from "@domphy/core";
import { tooltip } from "@domphy/ui";
const count = toState(0);
const App = {
div: [
{ h3: (listener) => `Count: ${count.get(listener)}` },
{
button: "Increment",
onClick: () => count.set(count.get() + 1),
$: [tooltip({ content: "Add one to the count" })],
},
],
style: { display: "flex", gap: "8px", alignItems: "center" },
};
const root = new ElementNode(App);
root.render(document.getElementById("app")!);
```
目前，我是唯一一个使用 Domphy 的人，已经快一年了，主要用于在建筑、工程和施工（AEC）行业创建 SketchUp 和 Revit 插件。我在 AI 代码生成兴起之前就创建了 Domphy，目的是为了生成人类可以清晰阅读和理解的代码，但现在 AI 可以很好地使用 React 构建 UI，所以有时我觉得我的工作毫无意义。不过，我仍然在我的应用中使用 Domphy，因为当 AI 遇到瓶颈时，我在阅读和编辑 UI 代码时会更有信心。
查看原文
I built a UI framework named Domphy because I could not learn React although I tried many times. I mean I could not understand React code which is hidden behind multiple layers, especially when some of them use React ecosystem libs. Maybe I am an architect turned developer, so I had no foundation of programming, or I expected something clear and clean.<p>I just think that UI should be simple — HTML and JS are enough and just need some way to make it stateful instead of making it more complicated. My idea: just using JS objects to reflect HTML, and using functions for state. When I need to reuse a component I had one more concept — just make a partial (I call it a Patch) to add props to the main object (but native props still win). With a component-based approach you get deep nesting and exploding props, but with patches you don't. The example below:<p><pre><code> import { ElementNode, toState } from "@domphy/core";
import { tooltip } from "@domphy/ui";
const count = toState(0);
const App = {
div: [
{ h3: (listener) => `Count: ${count.get(listener)}` },
{
button: "Increment",
onClick: () => count.set(count.get() + 1),
$: [tooltip({ content: "Add one to the count" })],
},
],
style: { display: "flex", gap: "8px", alignItems: "center" },
};
const root = new ElementNode(App);
root.render(document.getElementById("app")!);
</code></pre>
Right now I am the only one using Domphy, for around a year, for creating SketchUp and Revit plugins in the AEC (Architecture, Engineering, Construction) industry. I created Domphy before AI code generation took off, to make code humans can read and understand clearly, but now AI can build UIs with React well, so sometimes I feel my work is meaningless. But I still use Domphy for my apps, because I feel more confident when I need to read and edit UI code when the AI gets stuck.