Getting Started with euv

What is euv?

euv is a modern frontend UI framework built on Rust and WebAssembly (WASM). It brings the performance and type safety of Rust to the browser, enabling developers to build fast, reliable web applications. At its core, euv uses a virtual DOM for efficient UI updates and a reactive signals system for state management â similar in spirit to frameworks like React and Solid, but with the unique advantages of the Rust ecosystem.

Key Features

Rust + WASM: Write your frontend in Rust and compile to WebAssembly for near-native performance in the browser.
Virtual DOM: Efficient diffing and patching of the DOM, minimizing expensive browser operations.
Reactive Signals: A fine-grained reactivity system that automatically tracks dependencies and updates only what's necessary.
Macro-powered DSL: The html! and class! macros provide a familiar, HTML-like syntax directly in Rust code.
Component System: Build reusable, composable UI components with strongly-typed props.
Built-in Animations: Ready-to-use CSS keyframe animations like euv-spin, euv-fade-in, and more.
Browser API Access: First-class support for Window, Document, Storage, Clipboard, Navigator, and other browser APIs.
Async Support: Seamless async operations via spawn_local, with JsFuture, Promise, and Response available through the prelude.

Installation

Getting started with euv is straightforward. Since it's a Rust crate, you add it to your project using Cargo:

cargo add euv

This command adds euv as a dependency to your Cargo.toml. Make sure you already have a WASM-compatible project set up (e.g., using wasm-pack or trunk for building and serving).

Your First euv Application

Let's build the classic "Hello, World!" application in euv. This will introduce the fundamental concepts: the html! macro, the mount function, and the component pattern.

use euv::*;

fn app() -> VirtualNode {
    html! {
        div {
            h1 { "Hello, euv!" }
        }
    }
}

mount("#app", app);

Let's break this down:

use euv::* â This brings all the essential items into scope: the html! macro, the mount function, the VirtualNode type, and many more utilities.
fn app() -> VirtualNode â Every euv application starts with a root component function that returns a VirtualNode. This function describes what the UI should look like.
html! { ... } â The html! macro lets you write HTML-like syntax directly in Rust. Inside the macro, you can nest elements, add text content, and compose your UI declaratively.
mount("#app", app) â This function takes a CSS selector and a component function, then renders the component into the DOM element matching the selector.

Mounting to Different Selectors

The mount function supports several types of CSS selectors:

// Mount to an element with id="app"
mount("#app", app);

// Mount to the <body> element
mount("body", app);

// Mount to an element with class="root"
mount(".root", app);

// Mount to the first <main> element
mount("main", app);

Choose the selector that best fits your project's HTML structure. The most common choice is an ID selector like "#app".

Understanding the Basic Structure

Every euv application follows a consistent pattern:

use euv::*;

// Define your root component
fn app() -> VirtualNode {
    html! {
        div {
            // Your UI goes here
            h1 { "Welcome to euv" }
            p { "Build fast web apps with Rust and WASM." }
        }
    }
}

// Mount the application to the DOM
mount("#app", app);

The html! macro is the heart of euv's templating system. It allows you to write:

Nested elements: div { p { "text" } }
Text content: Just place a string inside curly braces after an element name
Attributes: input { type: "text", placeholder: "Enter name" }
Event handlers: button { onclick: move |event| { /* handler */ } "Click" }
Conditional rendering: if { condition } { /* visible */ } else { "" }
List rendering: for item in { items.get() } { li { item } }

A Slightly More Complex Example

Let's look at a more complete example that demonstrates state and interactivity:

use euv::*;

fn app() -> VirtualNode {
    let count: Signal<i32> = use_signal(|| 0);

    html! {
        div {
            h1 { "My First euv App" }
            p { "The counter will go here" }
            button {
                onclick: move |event: Event| {
                    count.set(count.get() + 1);
                }
                "Increment"
            }
        }
    }
}

mount("#app", app);

In this example:

We create a reactive signal count with an initial value of 0 using use_signal.
The button has an onclick event handler that reads the current value with count.get() and updates it with count.set(...).
When the signal changes, euv automatically re-renders the affected parts of the UI.

Next Steps

Now that you've created your first euv application, here are some topics to explore next:

Reactive Signals: Learn how use_signal, computed!, and watch! power euv's reactivity system.
The Virtual DOM: Understand how VirtualNode works under the hood.
Components: Build reusable UI components with props and children.
Styling: Use the class! macro to define CSS classes and animations.
Event Handling: Master event handling patterns for interactive applications.
Conditional Rendering & Lists: Dynamically render UI based on state.

euv combines the best of Rust's type safety and performance with a modern, declarative UI paradigm. Whether you're building a small interactive widget or a full-featured single-page application, euv provides the tools to do it efficiently and enjoyably.

Happy coding with euv!

推荐订阅源

DEV Community