website·Indexed 35 days ago
https://yew.rsA Rust framework for creating multi-threaded web applications with WebAssembly. Documentation covers function and struct components, the html! macro, routing for SPAs, state management, and advanced features like Suspense, Portals, and Agents for offloading tasks to web workers. Supports versions 0.21, 0.22, 0.23, and Next.
Components are the fundamental building blocks of Yew applications. They are responsible for computing the HTML (DOM) visible to the user. Key characteristics include:
Html (which is an alias for VNode), representing a virtual version of the DOM.Html type is an alias for VNode (a virtual node).Html is deterministically derived from its props. This means the view function does not mutate state or produce side effects; for any given set of props, it will always produce the same Html output.use yew::{Properties, component, Html, html};
#[derive(Properties, PartialEq)]
pub struct Props {
pub is_loading: bool,
}
#[component]
fn HelloWorld(props: &Props) -> Html {
if props.is_loading {
html! { "Loading" }
} else {
html! { "Hello world" }
}
}web-sys crate provides Rust bindings for Web APIs, enabling developers to interact with browser features (like the DOM) using a type-safe, 'rustified' interface instead of writing raw JavaScript.let document = window.document;yew-router are sensitive to trailing slashes; /about and /about/ are treated as distinct routes. This affects how browsers resolve relative asset paths. To support both, define separate enum variants for each version of the path.#[derive(Clone, Routable, PartialEq)]
enum Route {
#[at("/about")]
About,
#[at("/about/")]
AboutSlash,
}bincode for communication between threads, making this operation more expensive than a standard function call.html! macro converts a custom HTML-like declarative syntax into valid Rust code. While not strictly required for Yew development, it is recommended because it allows the UI layout code to closely match the generated HTML. The macro generates code that utilizes the public Yew library API (though some internal methods are undocumented to prevent misuse). To ensure hygiene and avoid name collisions, the macro uses fully qualified paths (e.g., ::yew::<module> and ::alloc::vec::Vec::new()) and explicit trait dispatch (e.g., <Type as Trait>).Scope object is the primary mechanism for components to trigger updates and create callbacks. A reference to the component's scope is obtained by calling ctx.link() on the Context object passed to the component's lifecycle methods (such as create or view).Component trait in Yew defines a set of lifecycle methods that manage a component's existence from creation to destruction. To create a struct component, you must implement the Component trait, specifying the Message and Properties associated types.impl Component for MyComponent {
type Message = Msg;
type Properties = Props;
fn create(ctx: &Context<Self>) -> Self {
MyComponent
}
fn view(&self, ctx: &Context<Self>) -> Html {
html! { /* ... */ }
}
}