113 lines
2.3 KiB
Markdown
113 lines
2.3 KiB
Markdown
|
# 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! {
|
||
|
|
<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
|
||
|
|
|
||
|
|
```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)
|