# ADR-003: Leptos CSR-Only para Frontend **Status**: Accepted | Implemented **Date**: 2024-11-01 **Deciders**: Frontend Architecture Team **Technical Story**: Selecting WASM framework for client-side Kanban board UI --- ## Decision Usar **Leptos 0.8.12 en modo Client-Side Rendering (CSR)** para frontend WASM, sin SSR. --- ## Rationale 1. **Fine-Grained Reactivity**: Similar to SolidJS (not virtual DOM), updates only affected nodes 2. **WASM Performance**: Compiles to optimized WebAssembly 3. **Deployment Simplicity**: CSR = static files + API, no server-side rendering complexity 4. **VAPORA is a Platform**: Not a content site, so no SEO requirement --- ## Alternatives Considered ### ❌ Yew - Virtual DOM model (slower updates) - Larger bundle size ### ❌ Dioxus - Promising but less mature ecosystem ### ✅ Leptos CSR (CHOSEN) - Fine-grained reactivity, excellent performance - No SEO needed for platform --- ## Trade-offs **Pros**: - ✅ Excellent WASM performance - ✅ Simple deployment (static files) - ✅ UnoCSS integration for glassmorphism styling - ✅ Strong type safety in templates **Cons**: - ⚠️ No SEO (not applicable for platform) - ⚠️ Smaller ecosystem than React/Vue - ⚠️ Leptos SSR available but adds complexity --- ## Implementation **Leptos Component Example**: ```rust #[component] fn ProjectBoard() -> impl IntoView { let (projects, set_projects) = create_signal(vec![]); view! {
} } ``` **Key Files**: - `/crates/vapora-frontend/src/main.rs` (app root) - `/crates/vapora-frontend/src/pages/` (page components) - `/crates/vapora-frontend/Cargo.toml` (dependencies) --- ## Verification ```bash # Build WASM trunk build --release # Serve and test trunk serve # Check bundle size ls -lh dist/index_*.wasm ``` **Expected**: WASM bundle < 500KB, components render reactively --- ## Consequences - Team must learn Leptos reactive system - SSR not available (acceptable trade-off) - Maintenance: Leptos updates follow Rust ecosystem --- ## References - [Leptos Documentation](https://leptos.dev/) - `/crates/vapora-frontend/src/` (source code) --- **Related ADRs**: ADR-001 (Workspace)