Nectar：一个编译至WebAssembly的Rust风格React框架

背景

Hacker News 上出现了一个名为 Nectar 的新项目，其作者将其描述为“一个类似 Rust 的 React，编译到 WebAssembly”。该项目旨在用单一语言（Rust 风格的语法）构建整个前端应用，最终输出一个 .wasm 二进制文件和一个极小的 JavaScript 运行时层。Nectar 试图挑战当前 JavaScript 生态中臃肿的依赖、VNode 差异计算以及复杂的构建工具链，通过引入 Rust 的所有权模型、类型系统和模式匹配，在编译期捕获错误，并在运行时实现 O(1) 的信号更新。

核心内容

Nectar 的核心理念是：“一种语言，一个二进制，零依赖”。整个应用——逻辑、状态、渲染——全部运行在 WebAssembly 中，JavaScript 被缩减为一个约 10 KB 的“系统调用层”（syscall layer）。作者提供了与 React + JavaScript 的对比：

| 维度 | React + JavaScript | Nectar | |------|-------------------|--------| | JS 依赖数 | 0（但实际依赖 47 个 package.json 包，node_modules 含 1,247 个包） | 0 | | 运行时体积（gzip） | 387 KB | ~10 KB | | 编译器测试数 | 无 | 2,586 | | 虚拟 DOM | 有 | 无 | | 信号更新复杂度 | 非 O(1) | O(1) |

代码示例对比

React 版本：

// package.json: 47 dependencies
// node_modules: 1,247 packages
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Nectar 版本：

// No package.json. No node_modules.
// One file. Compiles to WASM.
component Counter() {
  let mut count: i32 = 0;
  fn increment(&mut self) {
    self.count = self.count + 1;
  }
  render {
    <div>
      <p>{format("{}", self.count)}</p>
      <button on:click={self.increment}>"+"</button>
    </div>
  }
}

技术特性

• 编译与工具链：一个 Rust 二进制文件即可处理所有任务：编译、格式化、lint、测试、开发服务器、LSP、包管理、SSR。无需额外配置。
• 更新机制：每个绑定（binding）的更新是 O(1) 的。没有虚拟 DOM，没有 diffing，没有 reconciliation。当信号变化时，只有精确的 DOM 节点会更新。
• 类型安全：采用 Rust 启发的借用检查器、类型系统和穷举模式匹配，在编译阶段而非生产环境捕获错误。
• 零构建工具：不需要 npm、node_modules、webpack 或 bundler。应用编译为一个 .wasm 二进制文件和一个 3 KB 的运行时。
• 语言内建模式：component、store、router、page、form、auth、payment、upload、db、cache、agent 等常见 Web 模式是语言的原语，而非库。
• 服务端渲染：同一个 WASM 二进制可通过 wasmtime 在服务端运行。内置 SSR、水合（hydration），并支持部署到 29 个 Cloud Run 区域。
• 编译流程：.nectar 源文件 → 编译器（Rust） → 输出 .wasm → 浏览器加载 .wasm 和 10 KB 的 syscall 层。其余一切都在 WASM 中运行。

演示与现状

作者提供了一个对比演示：10,000 个商品列表，使用 Canvas 渲染引擎和响应式信号，全部在 WebAssembly 中运行，与 Svelte 5 并排对比。注意：Svelte 演示在首次加载 10K 商品时可能会超时，如果页面空白请尝试刷新。

当前项目由 一个人 构建，作者开放了邮箱收集反馈和早期访问请求。

关键要点

• 彻底抛弃 JavaScript 生态：Nectar 不在任何意义上依赖 JavaScript 工具链，连 node_modules 都不存在。所有代码（包括组件逻辑、状态管理、渲染）都编译为 WebAssembly，仅保留一个 10 KB 的 JS 胶水层用于与浏览器 API 交互（如 DOM 操作、事件绑定）。
• O(1) 信号更新：通过直接绑定信号到具体 DOM 节点，避免了虚拟 DOM 的 diff 和 reconciliation 开销，理论上可以实现极致的渲染性能。
• Rust 风格的安全保证：借用检查器、类型推断、穷举模式匹配等特性被引入，使前端开发也能在编译期捕获空指针、未处理状态等常见错误。
• 单二进制工具链：开发者只需要一个 Rust 二进制文件即可完成完整的开发工作流，无需配置 webpack、vite 等构建工具，降低了环境搭建的复杂性。
• 语言内建常见模式：将路由、认证、支付、数据库访问等 Web 常见功能作为语言关键字（如 router、auth、db），而非外部库。这可能导致锁定效应，但也减少了依赖风险。
• SSR 与云原生部署：利用 WebAssembly 的跨平台特性，同一个 .wasm 二进制可同时在浏览器和服务端（通过 wasmtime）运行，并直接部署到 Google Cloud Run 等平台。
• 项目仍处于早期阶段：作者是单人开发者，提供了演示