immediate-gui: new

1 files changed, 57 insertions, 0 deletions

diff --git a/content/immediate-gui/index.md b/content/immediate-gui/index.md
new file mode 100644
index 0000000..4fb8ee2
--- /dev/null
+++ b/content/immediate-gui/index.md
@@ -0,0 +1,57 @@
++++
+title = "暴论：ImGui是后现代 CSS-in-JS。"
+date = 2023-08-17
+authors = ["135e2 (Mole Shang)"]
+[taxonomies]
+tags = ["随想"]
++++
+
+* 注：本文中所有出现的 `ImGui` 一词，均代指「即时模式GUI框架(Immediate mode GUI)」，而非 [Dear ImGui](https://github.com/ocornut/imgui) 。
+
+<!-- more -->
+
+闲来无事，尝试了一堆 [ImGui 框架](https://en.wikipedia.org/wiki/Immediate_mode_GUI) 。
+
+想法很美好，现实倒是依旧一样地骨感。一旦涉及复杂layout嵌套、多种样式排版、动态窗口大小适配等种种甚至不算高级的需求，就不得不依赖开发者自己造轮子解决。suckless.org [早已把 Nuklear 列入了推荐库列表](https://suckless.org/rocks/)，但当我们做一个GUI框架、面对一切UI/UX设计体验问题的时候，「Keep it simple, stupid」的哲学又是否依旧适用？
+
+Just an FYI, nuklear 的 CJK 支持[目前依旧半死不活](https://github.com/Immediate-Mode-UI/Nuklear/issues/542)。什么，你不想引入ICU和Harfbuzz？等着处理114514个edge case吧。Unicode留下的历史债，你不还没人帮你还.jpg
+
+没有人会反对Glib + GTK是依托答辩，但连Gnome都懂得帮你包好底层图形栈、顺便仍给你一套 [UI Builder](https://wiki.gnome.org/Apps/Glade) 跟 [设计规范](https://developer.gnome.org/hig/)，大家骂归骂，满足需求的东西才不会止步于「开发者的玩具」。
+
+做GUI绝对不只是开发这一环的事情。不用写事件驱动爽是真的爽，但在ImGui社区能拿出一套完备的体系之前，我依旧难对这套东西持乐观态度。散了散了，大家都去用Qt吧。
+
+---
+
+> BTW: ImGui 这一套样式写法，无端幻视 css-in-js 🤔 🤔 🤔
+
+```javascript
+// JSS
+jss.setup(preset())
+const style = {
+  myButton: {
+    color: 'green'
+  }
+}
+const sheet = jss.createStyleSheet(style)
+sheet.attach()
+```
+
+```c
+/* Nuklear */
+struct nk_color table[NK_COLOR_COUNT];
+table[NK_COLOR_SCROLLBAR] = nk_rgba(50, 58, 61, 255);
+table[NK_COLOR_SCROLLBAR_CURSOR] = nk_rgba(48, 83, 111, 255);
+nk_style_from_table(ctx, table);
+```
+
+```cpp
+/* Dear ImGui */
+ImGuiStyle* style = dst ? dst : &ImGui::GetStyle();
+ImVec4* colors = style->Colors;
+
+colors[ImGuiCol_Text] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
+colors[ImGuiCol_ScrollbarBg] = ImVec4(0.02f, 0.02f, 0.02f, 0.53f);
+
+```
+
+![css-in-js.png](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/05/aKsPahlPZ8qr6R8aVCancNsC_LOuKlcpBo-Ys44a1ya3QDvoLabbiBTYf36xX90hAfgMxgvBjMxxuBgIGnzH-_NId-71NfK7hh-ZFBJizZF6l3A4sLgb2vyYKgwnod86YBoLsE4.png)
\ No newline at end of file