Yew Rust Framework

Yew is a modern Rust framework designed for building multi-threaded, front-end web applications using WebAssembly (Wasm).

Key features include:

• HTML Macro: A macro for declaring interactive HTML with Rust expressions, providing a developer experience similar to JSX in React.
• High Performance: Optimized to minimize DOM API calls during page renders and supports offloading heavy processing to background web workers.
• JavaScript Interoperability: Allows developers to leverage existing NPM packages and integrate Yew with existing JavaScript applications.

Gloo is a modular toolkit designed for building fast, reliable Web applications and libraries with Rust and Wasm. It provides ergonomic Rust wrappers for various browser-native capabilities. You can use specific Gloo modules for:

• Console timers (gloo-console-timer)
• Dialogs (gloo-dialogs)
• Events (gloo-events)
• Files (gloo-file)
• Requests (gloo-net)
• Timers (gloo-timers)
• Web Storage (gloo-storage)

The Yew ecosystem relies on several key tools for building, bundling, and optimizing WebAssembly applications.

Build and Workflow Tools

• Trunk: A tool to build, bundle, and ship your Rust Wasm application to the web.
• wasm-pack: A workflow tool for Rust to WebAssembly.
• cargo-web: A Cargo subcommand designed for the client-side Web.

CI/CD Acceleration (GitHub Actions)

To speed up CI/CD pipelines, you can use specialized GitHub actions that download pre-built executables:

• wasm-pack-action: Installs wasm-pack.
• wasm-bindgen-action: Installs wasm-bindgen.
• trunk-action: Installs Trunk.

Optimization Tools

Use these toolkits to reduce the size of your .wasm files:

• wabt (WebAssembly Binary Toolkit): Provides wasm-strip and wasm-objdump.
• binaryen: Provides the wasm-opt tool for compiler infrastructure and optimization.

Suspense allows you to suspend component rendering while waiting for an asynchronous task (like data fetching or background tasks) to complete. Instead of waiting for data to be fetched before rendering (Fetch-then-render) or fetching after rendering (Fetch-on-render), Suspense enables a "Render-as-You-Fetch" pattern where components initiate requests during the rendering process.

When a component suspends, Yew displays a fallback (placeholder) UI provided by the <Suspense /> component until the task completes and the component is ready to re-render.

// Conceptual usage pattern
<Suspense {fallback}>
    <Content />
</Suspense>

Because Yew applications run in the browser, they cannot access environment variables at runtime. To use environment variables, you must capture them at compile time using the std::env! macro. This embeds the value directly into your application binary during the build process.

// Example of using an environment variable at compile time
const API_URL: &str = env!("API_URL");

You can import functionality from JavaScript into your Yew/Rust application using wasm-bindgen. This is achieved by defining an extern block in your Rust code that declares the JavaScript functions or objects you wish to call.

For detailed implementation details, refer to the wasm-bindgen guide on importing JS.

To ensure that hooks work correctly across renders, you must follow these rules. Violating them will result in compile-time or run-time errors:

1. Naming Convention: A hook function name must always start with use_.
2. Location Constraints: Hooks can only be used in:
   • The top-level of a function or hook.
   • Blocks inside a function/hook, provided the block is not already branched (e.g., not inside a loop or a conditional that might skip the hook).
   • The condition of a top-level if expression inside a function/hook.
   • The scrutinee of a top-level match expression inside a function/hook.
3. Call Order: Hooks must be called in the exact same order for every render. You cannot return early from a component (e.g., via a return statement) unless you are using Suspense.

The SuspensionHandle is responsible for signaling Yew to re-render the suspended components once the asynchronous task is finished. There are two ways to trigger a re-render using the handle:

1. Explicitly calling the .resume() method.
2. Dropping the handle.

CRITICAL: You must preserve the SuspensionHandle (e.g., by moving it into a closure or storing it) until the data loading is complete. If the handle is dropped prematurely before the task finishes, the component may enter an infinite re-render loop, severely impacting performance.