first commit

2025-07-21 00:17:46 +02:00
commit 4e43c21b72
54 changed files with 13922 additions and 0 deletions
--- a/examples/website/ARCHITECTURE.md
+++ b/examples/website/ARCHITECTURE.md
@@ -0,0 +1,176 @@
+# Yew WASM Website Architecture
+
+## Overview
+
+This example demonstrates a minimal Yew WASM application optimized for small binary size and fast loading through lazy loading strategies. The architecture prioritizes performance and modularity.
+
+## System Architecture
+
+```mermaid
+graph TD
+    A[Browser] --> B[Main App Component]
+    B --> C[Router]
+    C --> D[Route Matcher]
+    D --> E[Lazy Loader]
+    E --> F[Home Component]
+    E --> G[About Component]
+    E --> H[Contact Component]
+    
+    I[Trunk Build] --> J[WASM Bundle]
+    I --> K[Static Assets]
+    J --> L[Optimized Binary]
+    
+    M[Code Splitting] --> N[Route Chunks]
+    N --> O[Dynamic Imports]
+```
+
+## Core Components
+
+### 1. App Component (`src/app.rs`)
+- Root component managing application state
+- Handles routing initialization
+- Minimal initial bundle size
+
+### 2. Router (`src/router.rs`)
+- Route definitions using `yew-router`
+- Lazy loading configuration
+- Dynamic component imports
+
+### 3. Page Components (`src/pages/`)
+- **Home** - Landing page (eagerly loaded)
+- **About** - Information page (lazy loaded)
+- **Contact** - Contact form (lazy loaded)
+
+## Lazy Loading Strategy
+
+### Route-Based Code Splitting
+```rust
+// Only load components when routes are accessed
+match route {
+    AppRoute::Home => html! { <Home /> },
+    AppRoute::About => {
+        // Lazy load About component
+        spawn_local(async {
+            let component = import_about_component().await;
+            // Render when loaded
+        });
+    }
+}
+```
+
+### Benefits
+- Reduced initial bundle size
+- Faster first paint
+- Progressive loading based on user navigation
+
+## File Structure
+
+```
+examples/website/
+├── Cargo.toml              # Dependencies and build config
+├── Trunk.toml              # Trunk build configuration
+├── index.html              # HTML template
+├── src/
+│   ├── main.rs            # Application entry point
+│   ├── app.rs             # Root App component
+│   ├── router.rs          # Route definitions
+│   └── pages/
+│       ├── mod.rs         # Page module exports
+│       ├── home.rs        # Home page component
+│       ├── about.rs       # About page component
+│       └── contact.rs     # Contact page component
+└── static/                # Static assets (CSS, images)
+```
+
+## Binary Size Optimizations
+
+### Cargo.toml Configuration
+```toml
+[profile.release]
+opt-level = "s"           # Optimize for size
+lto = true               # Link-time optimization
+codegen-units = 1        # Single codegen unit
+panic = "abort"          # Smaller panic handling
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+yew-router = "0.18"
+wasm-bindgen = "0.2"
+```
+
+### Trunk.toml Configuration
+```toml
+[build]
+target = "index.html"
+
+[serve]
+address = "127.0.0.1"
+port = 8080
+
+[tools]
+wasm-opt = ["-Os"]       # Optimize WASM for size
+```
+
+### Additional Optimizations
+- Use `web-sys` selectively (only needed APIs)
+- Minimize external dependencies
+- Tree-shaking through proper imports
+- Compress static assets
+
+## Build Process
+
+1. **Development**: `trunk serve`
+   - Hot reload enabled
+   - Debug symbols included
+   - Fast compilation
+
+2. **Production**: `trunk build --release`
+   - Size optimizations applied
+   - WASM-opt processing
+   - Asset compression
+
+## Performance Targets
+
+- **Initial Bundle**: < 100KB (gzipped)
+- **First Paint**: < 1s on 3G
+- **Route Transition**: < 200ms
+- **Total App Size**: < 500KB (all routes loaded)
+
+## Implementation Notes
+
+### Lazy Loading Pattern
+```rust
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+#[function_component(App)]
+pub fn app() -> Html {
+    html! {
+        <BrowserRouter>
+            <Switch<Route> render={switch} />
+        </BrowserRouter>
+    }
+}
+
+fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Home => html! { <Home /> },
+        Route::About => html! { <Suspense fallback={loading()}><About /></Suspense> },
+    }
+}
+```
+
+### Component Splitting
+- Each page component in separate file
+- Use `#[function_component]` for minimal overhead
+- Avoid heavy dependencies in lazy-loaded components
+
+## Next Steps
+
+1. Implement basic routing structure
+2. Add lazy loading for non-critical routes
+3. Configure build optimizations
+4. Measure and optimize bundle sizes
+5. Add performance monitoring
+
+This architecture provides a solid foundation for a fast, efficient Yew WASM application with room for growth while maintaining optimal performance characteristics.