VanJS – 一个基于原生 JavaScript、无需 JSX 的框架

原文 ↗ Hacker News 讨论 ↗

一个新的 JavaScript UI 库 VanJS 承诺仅用不到 1 KB、无需 JSX 或构建步骤，就能通过普通函数实现响应式界面，因此引发了与 React、Preact、Solid、Mithril 以及其他“极简”框架的比较。评论者讨论在现代网络环境下对极端 bundle 体积优化是否仍然重要，但许多人认为更少的工具链、在低端设备上更快的执行速度，以及更简单的心智模型，确实是优势。该讨论串也呈现出对前端栈不断重复造轮子的普遍疲惫，同时也对基于 signal 的响应式、互操作性，以及摆脱虚拟 DOM 和沉重构建流水线的方法表现出真实兴趣。

总体反响与目的

  • 许多人认为 VanJS 只是众多极简“响应式原生 JS”库中的又一个，类似 Xeact、Hyperapp、Arrow、Mithril 等。
  • 有些人对又一个框架持怀疑态度，但也有人认为实验很有价值，这也是今天许多主流框架的起源。
  • 也有不少人喜欢它体积小、概念简单，并且容易 fork 或扩展。

体积、性能与网络成本

  • 讨论重点强烈聚焦在不到 1KB 的体积；有人认为与图片/字体相比，框架体积微不足道，而且反正会被缓存。
  • 其他人则反驳说 JS 体积依然重要，尤其是对低端设备和流量受限的套餐而言，而且影响 UX 的不只是字节数，还有执行成本。
  • VanJS 自己的基准测试被引用来声称它通过不使用虚拟 DOM、在局部更新时优于 React。
  • 一个子讨论指出，即便是极小的便利（例如 SVG/MathML 常量）也被刻意避免，以保持字节数最低；有人称赞这一点，也有人认为这是过度优化。

无需 JSX，基于函数的视图语法

  • 一个主要话题是缺少 JSX：
    • JSX 的支持者认为缺少它是个缺点；他们更喜欢类似 HTML 的嵌套标签，因为可读性和结构更清晰。
    • 反对者则把 JSX 视为历史包袱，是一种需要构建步骤的语法不匹配，认为纯 JS 函数调用更干净，也避免了额外工具链。
  • 有人指出 React 也可以不用 JSX，而 VanJS 的语法最终与非 JSX 的 React 很相似。
  • 关于嵌套函数调用与 XML/HTML 树的可读性，出现了长篇争论，但没有明确共识。

响应式、状态与生命周期

  • VanJS 使用简单的 state.val 对象（类似 signal）。一些人觉得这直观且简洁；另一些人初看会对“val 应该是不可变的，但却通过 setter 赋值”这种表述感到困惑。
  • 也有人提出缺少功能：生命周期钩子（onMount/onCleanup）、store，以及更高层的控制结构如 For/Index/Show。
  • 异步数据获取也被讨论；VanJS 支持类似 Await 的抽象和状态更新，但从主页示例中并不容易立刻看出惯用模式。

更广泛的反思与替代方案

  • 有些人更愿意继续使用现有工具（React、Preact、Solid、Svelte），或者转向 htmx/LiveView，以及通过 WASM 或编译到 JS 的非 JS 语言。
  • 一个反复出现的主题是“框架循环”：极简工具不断增添功能，变得复杂，然后又激发出新一波像 VanJS 这样的小型替代品。