“我们不想因为数以百万计的冗余技术微决策而损失时间和金钱。”

---

MoonZoon 是一个用于构建具有多线程和耐久计算的 Web 和桌面应用的 Rust 全栈框架。无需 HTML、CSS 或 JS。

---

代码示例

use zoon::*;

fn main() {
    start_app("app", root);
}

static COUNTER: Lazy<Mutable<i32>> = lazy::default();

fn root() -> impl Element {
    Row::new()
        .s(Align::center())
        .s(Gap::new().x(15))
        .item(counter_button("-", -1))
        .item_signal(COUNTER.signal())
        .item(counter_button("+", 1))
}

fn counter_button(label: &str, step: i32) -> impl Element {
    let (hovered, hovered_signal) = Mutable::new_and_signal(false);
    Button::new()
        .s(Width::exact(45))
        .s(RoundedCorners::all_max())
        .s(Background::new()
            .color_signal(hovered_signal.map_bool(|| color!("#edc8f5"), || color!("#E1A3EE", 0.8))))
        .s(Borders::all(
            Border::new()
                .width(2)
                .color(color!("oklch(0.6 0.182 350.53 / .7")),
        ))
        .on_hovered_change(move |is_hovered| hovered.set(is_hovered))
        .label(label)
        .on_press(move || *COUNTER.lock_mut() += step)
}

示例

新项目模板 Netlify 上 | 模板

• 由命令 mzoon new 使用（见下文的 创建并运行项目 部分）

聊天示例

• 仓库：examples/chat

  • 相关博客文章：《聊天示例，MoonZoon 云[dev.to / MD]》.

    

---

创建并运行项目

1. 安装最新的稳定版 Rust。（或者使用 rustup update stable 进行升级。）

2. 安装 web assembly 目标 rustup target add wasm32-unknown-unknown

3. cargo install mzoon --git https://github.com/MoonZoon/MoonZoon --locked

4. mzoon new my_counter

5. cd my_counter

6. mzoon start --open

   

---

部署项目

前端与后端同时部署

我在 Hetzner 上使用 Coolify 以及这个 Dockerfile：

FROM rust:1
WORKDIR /app

RUN rustup target add wasm32-unknown-unknown
# NOTE: Set `--rev` to the commit you use in your project
RUN --mount=type=cache,target=/usr/local/cargo,from=rust,source=/usr/local/cargo \
    cargo install mzoon --git https://github.com/MoonZoon/MoonZoon --rev ccc15d043e78a6656d68a60d46de1f540724e093 --locked

COPY . .

RUN --mount=type=cache,target=/usr/local/cargo,from=rust,source=/usr/local/cargo \
    --mount=type=cache,target=target \
    /usr/local/cargo/bin/mzoon build -r

RUN --mount=type=cache,target=target \
    ["cp", "./target/release/backend", "/usr/local/bin/moon_app"]

ENTRYPOINT ["moon_app"]

MoonZoon 应用成功部署到了其他服务上，如 Heroku（buildpack）、Clever Cloud、CapRover 或 Fly.io。

仅前端

1. mzoon build --release --frontend-dist netlify

   • 托管名称（netlify）是可选的。它将创建如 netlify.toml 的文件。

2. [可选] 使用开发服务器（如 miniserve）进行测试：

   cargo install miniserve
   
   miniserve --port 8079 --index index.html --spa frontend_dist
   

3. 将 frontend_dist 目录拖放到 Netlify 上。

   

---

示例

• 仓库中的 示例，运行方法请见 development.md。

• MoonZoon 上的光线追踪器（未维护）

• [基于 Solana 区块链的投票系统](https://github.com/MartinKavik/voting-solana-moonzoon)（未维护）

  

---

博客

• Web 开发之疗法 [Medium / dev.to / MD]

• 前端和后端的 Rust 应用 [Always Bet on Rust]

• 关于 MoonZoon 的 Martin 采访 [console.substack.com]

开发动态

1. 命令行界面、构建管道、实时重载、HTTPS [dev.to / MD]

2. 实时演示、Zoon、示例、架构 [dev.to / MD]

3. 信号、类似 React 的钩子、优化 [dev.to / MD]

4. Actix、异步命令行、错误处理、Wasm-pack 安装程序 [dev.to / MD]

5. 聊天示例、MoonZoon 云 [dev.to / MD]

---

文档

1. 哲学与非目标.md

2. 前端.md

3. 后端.md

4. 命令行界面.md

6. 开发.md

---

大小与速度

• MartinKavik/js-framework-benchmark

---

赞助商

---

感谢您的阅读！我们在 Discord 上等您。