1 line
5.6 KiB
Markdown
1 line
5.6 KiB
Markdown
|
# WebAssembly Demo Page\n\nThis page demonstrates WebAssembly integration with the Web Builder Framework, showcasing performance comparisons between JavaScript and WebAssembly implementations.\n\n## Features\n\n- **Fibonacci Calculation**: Compare recursive and iterative implementations\n- **Prime Number Testing**: CPU-intensive primality testing\n- **Matrix Multiplication**: Memory and computation intensive operations\n- **Performance Benchmarking**: Mathematical computation benchmarks\n\n## Prerequisites\n\nTo build and run the WebAssembly components:\n\n1. **Rust toolchain**:\n\n ```bash\n curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\n ```\n\n2. **wasm-pack**:\n\n ```bash\n cargo install wasm-pack\n ```\n\n3. **WebAssembly target** (usually included with wasm-pack):\n\n ```bash\n rustup target add wasm32-unknown-unknown\n ```\n\n## Building the Demo\n\n1. **Development build** (no WebAssembly compilation):\n\n ```bash\n cd /path/to/web-builder-framework\n ./wb page build wasm-demo --dev\n ```\n\n2. **Production build** (with WebAssembly compilation):\n\n ```bash\n ./wb page build wasm-demo --prod\n ```\n\n3. **Development server** (with hot-reload):\n\n ```bash\n ./wb page dev wasm-demo --watch --port 8080\n ```\n\n## Project Structure\n\n```plaintext\npages/wasm-demo/\n├── config.toml # Page configuration with WASM enabled\n├── src/\n│ ├── index.html # Main HTML page\n│ ├── assets/\n│ │ ├── css/\n│ │ │ ├── main.css # Main styles\n│ │ │ └── wasm-ui.css # WASM-specific UI components\n│ │ └── js/\n│ │ ├── wasm-interface.js # WASM integration layer\n│ │ └── main.js # Application logic and demos\n│ └── wasm/\n│ └── compute/ # Rust WebAssembly module\n│ ├── Cargo.toml # Rust dependencies\n│ └── src/\n│ └── lib.rs # WASM implementation\n└── dist/ # Built output (generated)\n ├── index.html\n ├── assets/\n │ ├── css/main.min.css\n │ └── js/main.min.js\n └── wasm/ # WebAssembly binaries and loader\n ├── compute.wasm\n └── wasm-loader.js\n```\n\n## Implementation Details\n\n### WebAssembly Module (Rust)\n\nThe `compute` module provides:\n\n- `fibonacci(n)`: Fast Fibonacci calculation\n- `is_prime(n)`: Primality testing with optimizations\n- `matrix_multiply(a, b, size)`: Matrix multiplication\n- `benchmark_computation(iterations)`: Performance benchmark\n- `greet(name)`: Simple demonstration function\n\n### JavaScript Interface\n\nThe `wasm-interface.js` provides:\n\n- Automatic WASM module loading with fallbacks\n- Performance measurement wrapper functions\n- JavaScript equivalents for comparison\n- Error handling and browser compatibility\n\n### CSS Styling\n\n- Modern gradient backgrounds and animations\n- Responsive grid layout for demo sections\n- Performance result visualization\n- Loading states and error messages\n\n## Browser Compatibility\n\n- **WebAssembly**: Modern browsers (Chrome 57+, Firefox 52+, Safari 11+)\n- **Fallback**: JavaScript implementations work in all browsers\n- **Features**: ES2018+ with fallbacks for older browsers\n\n## Performance Tips\n\n1. **Matrix Size**: Start with smaller matrices (50x50) and increase gradually\n2. **Fibonacci**: Numbers above 45 may take significant time in JavaScript\n3. **Prime Testing**: Large primes (>10^9) show the biggest performance gains\n4. **Benchmark**: Adjust iterations based on your device performance\n\n## Troubleshooting\n\n### WebAssembly Not Loading\n\n1. Check browser console for errors\n2. Ensure wasm-pack is installed: `cargo install wasm-pack`\n3. Verify the build completed: Check for `dist/wasm/compute.wasm`\n4. Try building with: `./wb page build wasm-demo --prod --verbose`\n\n### Build Errors\n\n1. **Rust not found**: Ins
|