## Keyboard shortcuts

Press `←` or `→` to navigate between chapters

Press `S` or `/` to search in the book

Press `?` to show this help

Press `Esc` to hide this help

# 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)