Show HN：Domphy – 面向工具应用的纯对象 UI，AI 可纠正输出
6 分•作者: khanhhuunguyen•3 天前
我创建了一个名为 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 插件。我创建 Domphy 的时候，AI 代码生成还没有兴起，目的是为了让代码易于人类阅读和理解，但现在 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.