# Yew — Rust WASM Framework for Web Applications

> Yew is a Rust framework for creating reliable and efficient web applications that compile to WebAssembly. Component-based with a virtual DOM, hooks, and familiar React-like API. Write your entire frontend in Rust with type safety and performance.

## Install

Save in your project root:

## Quick Use

```bash
cargo install trunk
cargo init yew-app && cd yew-app
```

Add to `Cargo.toml`:
```toml
[dependencies]
yew = { version = "0.21", features = ["csr"] }
```

```rust
use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let count = use_state(|| 0);
    let onclick = {
        let count = count.clone();
        Callback::from(move |_| count.set(*count + 1))
    };

    html! {
        <div>
            <h1>{ format!("Count: {}", *count) }</h1>
            <button {onclick}>{ "Click me" }</button>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}
```

```bash
trunk serve                                 # Dev server with WASM
trunk build --release                       # Production build
```

## Intro

Yew is a Rust framework for building web applications that compile to WebAssembly. Inspired by React and Elm, Yew provides a component model with virtual DOM, hooks, and a familiar developer experience — but in Rust with full type safety and WASM performance.

- **Repo**: https://github.com/yewstack/yew
- **Stars**: 32K+
- **Language**: Rust
- **License**: Apache 2.0 + MIT

## What Yew Does

- **Components** — function and struct components
- **html! macro** — JSX-like syntax for Rust
- **Hooks** — use_state, use_effect, use_context, use_reducer
- **Virtual DOM** — efficient diffing and patching
- **Agent system** — web workers for background tasks
- **SSR** — server-side rendering support
- **Properties** — typed props with derive macro
- **Events** — click, input, submit, custom
- **Trunk** — build tool for WASM projects

## Comparison

| Framework | Reactivity | SSR | Maturity |
|---|---|---|---|
| Yew | VDOM | Yes | Most mature |
| Leptos | Signals | Yes | Growing fast |
| Dioxus | Signals | Yes | Multi-platform |
| Sycamore | Signals | Yes | Smaller |

## 常见问题 FAQ

**Q: WASM bundle 大吗？**
A: gzip 后约 200-400KB，取决于依赖。比 React bundle 大但运行速度更快。wasm-opt 优化可以再减 20-30%。

**Q: 和 JS 互操作？**
A: 通过 wasm-bindgen 和 web-sys 调用任何 Web API。也可以用 gloo 库简化 DOM/fetch/timer 操作。

## 来源与致谢 Sources

- Docs: https://yew.rs/docs
- GitHub: https://github.com/yewstack/yew
- License: Apache 2.0 + MIT

---
Source: https://tokrepo.com/en/workflows/ce6e1482-3651-11f1-9bc6-00163e2b0d79
Author: AI Open Source