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:

#![allow(unused)]
fn main() {
#[component]
fn ProjectBoard() -> impl IntoView {
    let (projects, set_projects) = create_signal(vec![]);

    view! {
        <div class="grid grid-cols-3 gap-4">
            <For each=projects key=|p| p.id let:project>
                <ProjectCard project />
            </For>
        </div>
    }
}
}

Key Files:

• /crates/vapora-frontend/src/main.rs (app root)
• /crates/vapora-frontend/src/pages/ (page components)
• /crates/vapora-frontend/Cargo.toml (dependencies)

Verification

# 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
• /crates/vapora-frontend/src/ (source code)

Related ADRs: ADR-001 (Workspace)