Rust und Leptos Schulung: Full-Stack-Webanwendungen

Rust im Web: Einordnung und Einrichtung

• Warum Rust für Webanwendungen: ein Typ vom Server bis zum Browser, WebAssembly, Speichersicherheit
• Leptos im Vergleich zu Yew, Dioxus und JavaScript-Frameworks: feingranulare Reaktivität ohne VDOM
• Erste Schritte mit Leptos: Komponenten, view!-Makro und mount_to_body im Browser
• Entwicklungsumgebung: rustup target add wasm32-unknown-unknown, cargo-leptos, rust-analyzer
• leptosfmt für das Formatieren von view!-Blöcken, Debugging von WASM im Browser

Projekt-Setup und Tailwind CSS

• Leptos-Projekt aus der Vorlage start-axum erzeugen, Alternativen für Actix und reines CSR mit Trunk
• Projektstruktur: gemeinsamer App-Code, Server-Einstieg und Hydrate-Einstieg
• Build-Prozess: Features ssr und hydrate, Server-Binary und WASM-Paket aus einer Codebasis
• cargo leptos watch mit Hot Reload, Konfiguration in [package.metadata.leptos]
• Tailwind CSS über die Einstellung tailwind-input-file von cargo-leptos einbinden
• Statische Dateien, Stylesheets und Meta-Tags mit leptos_meta verwalten

Leptos-Kernkonzepte im Frontend

• View Templates mit view!: Attribute, Ereignisse, Klassen und dynamische Styles
• Komponenten mit #[component], Props, optionale Props und Children
• Signals mit signal() und RwSignal, abgeleitete Signale und Memo
• Bedingtes Rendern mit Show und Pattern Matching in Views
• Router mit leptos_router: Routen, verschachtelte Routen und Outlet
• Pfad- und Query-Parameter auslesen, Navigation mit A und use_navigate

Datenbank und Backend

• SQLx und SQLite einrichten: Verbindungspool, DATABASE_URL und Migrationen mit sqlx migrate
• Datenbankpool als Zustand an Axum übergeben und in Serverfunktionen nutzen
• Serverfunktionen mit #[server]: Serialisierung, Endpunkte und ServerFnError
• Abfragen mit sqlx::query_as! zur Übersetzungszeit prüfen, Offline-Modus mit cargo sqlx prepare
• Einfügen, Ändern und Löschen in Transaktionen, Fehler sauber an den Client melden
• Von SQLite zu PostgreSQL: was sich bei SQLx und den Migrationen ändert

Full-Stack-Entwicklung mit Ressourcen und Aktionen

• Ressourcen: Serverdaten laden mit Resource und LocalResource
• Ladezustände mit Suspense und Transition, Fehler mit ErrorBoundary abfangen
• Aktionen mit ServerAction und ActionForm: Formulare, die auch ohne JavaScript funktionieren
• Nach einer Aktion Daten neu laden und optimistische Anzeige umsetzen
• Datensammlungen rendern mit For und stabilen Schlüsseln, Iteratoren direkt im View
• Effekte mit Effect::new – und warum die meisten Fälle mit abgeleiteten Signalen auskommen
• Kontext mit provide_context und use_context für Anmeldung, Theme und Einstellungen

Rendering, Sicherheit und Betrieb

• Rendermodi: SSR mit Hydration, Streaming, Islands und reines Client-Rendering
• Hydration-Fehler erkennen: unterschiedliche Ausgabe auf Server und Client
• Anmeldung mit Sessions und Cookies, Berechtigungen in jeder Serverfunktion prüfen
• Tests: Komponentenlogik mit cargo test, End-to-End mit cargo leptos end-to-end und Playwright
• Release-Build, WASM-Größe optimieren, Auslieferung als Container-Image

Leptos mit Coding-Agenten

• Leptos-Version als Projektregel festlegen, damit der Agent keine 0.6-APIs wie create_signal einstreut
• Nach jeder Agentenänderung beide Ziele prüfen: cargo check --features ssr und --features hydrate
• Agent hält .sqlx-Abfragedaten aktuell, damit query_as! auch ohne Datenbank in der CI baut
• Vom Agenten erzeugte #[server]-Funktionen als öffentliche Endpunkte auf Eingabeprüfung reviewen
• Junie in RustRover: Komponente vorschlagen lassen, Hydration im Browser per Playwright abnehmen

Praxisprojekt: Mängelmeldungen für eine Wohnungsgenossenschaft

• Mieter:innen melden Mängel mit Kategorie, Wohnung und Dringlichkeit über ein ActionForm
• Meldungsliste aus SQLite, serverseitig gerendert, filterbar nach Status und Haus, gestaltet mit Tailwind
• Hausmeister:innen ändern den Status, die Liste lädt per Ressource neu; Rechte im Server geprüft
• Ende-zu-Ende-Test für Meldung und Statuswechsel, Auslieferung als Container-Image

Lernziele

• Sie richten ein Leptos-Projekt mit cargo-leptos ein und verstehen das Zusammenspiel von SSR- und Hydrate-Build
• Sie gestalten Oberflächen mit Komponenten, Signals, Memo und dem Leptos-Router
• Sie schreiben Serverfunktionen mit typgeprüften SQLx-Abfragen auf SQLite und behandeln Fehler bis in die Oberfläche
• Sie laden und ändern Daten mit Ressourcen, Suspense und ActionForm und setzen Kontext gezielt ein
• Sie testen und bauen eine Leptos-Anwendung für den Betrieb im Container

Zielgruppe

• Rust-Entwickler:innen, die Weboberflächen und Backends in derselben Sprache bauen möchten
• Webentwickler:innen mit Erfahrung in React, Vue oder Svelte, die Rust im Web einsetzen wollen
• Teams, die einen bestehenden Rust-Dienst um eine eigene Weboberfläche ergänzen