6 分•作者: khanhhuunguyen•4 个月前
我创建了一个名为 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 代码时，我感觉更自信。