seed-presentation/presentation/index.rst

Seed - Webfrontend in Rust

4 Webfrontend in Rust

Das Projekt

grid grid-cols-2 gap-8

bg-gray-700 rounded-3xl

fade-right

• 👨🏻‍💻 Entwickler: Martin Kavik
• ⚖️ MIT-Lizenz
• 📅 Erstes Release: 2019

Architektur

bg-gray-700 rounded-3xl text-center

Code

Beispielprojekt: Zähler

Model (Zustand der Anwendung)

struct Model {
  counter: i32,
}

fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
  Model { counter: 0 }
}

View (Stellt die Anwendung dar)

fn view(model: &Model) -> Node<Msg> {
  div![
      C!["counter"],
      "This is a counter: ",
      button![model.counter, ev(Ev::Click, |_| Msg::Increment),],
  ]
}

Msg (Ändert den Zustand der Anwendung)

enum Msg {
    Increment,
}

fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
    match msg {
        Msg::Increment => model.counter += 1,
    }
}

Tooling

Trunk (Web application bundler für Rust)

Setup

fade-right

1. Rust installieren (https://rustup.rs)
2. WebAssembly-Target: rustup target install wasm32-unknown-unknown
3. Trunk installieren: cargo install --locked trunk
4. Anwendung mit trunk serve kompilieren und live im Browser anzeigen
5. Anwendung mit trunk build --release im Releasemodus kompilieren

grid grid-cols-3 gap-8 mt-16

bg-gray-700 rounded-3xl text-center

Rust-Code

bg-gray-700 rounded-3xl text-center

WASM

bg-gray-700 rounded-3xl text-center

Webbrowser

Ende

grid grid-cols-2 gap-8

bg-gray-700 rounded-3xl

Webseite von Seed

https://seed-rs.org

bg-gray-700 rounded-3xl

Quellcode zu diese Präsentation

https://code.thetadev.de/HSA/seed-presentation