{"id":1568,"date":"2023-02-07T11:47:10","date_gmt":"2023-02-07T11:47:10","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1568"},"modified":"2025-09-23T03:43:02","modified_gmt":"2025-09-23T03:43:02","slug":"how-to-build-a-rust-webassembly-frontend-app-with-yew-framework","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-a-rust-webassembly-frontend-app-with-yew-framework\/","title":{"rendered":"How to Build a Rust WebAssembly Frontend App with Yew Framework?"},"content":{"rendered":"Reading Time: <\/span> 6<\/span> minutes<\/span><\/span>\n
\"Rust<\/figure>\n\n\n\n

While Rust is known for its backend web development capabilities, the introduction of WebAssembly (Wasm) has enabled the development of rich front-end apps in Rust.<\/p>\n\n\n\n

With the introduction of WebAssembly, it became possible to build frontend web apps in Rust<\/a>, such as the one we just built, expanding development opportunities for developers.<\/p>\n\n\n\n

While all of the libraries, frameworks and technologies discussed in this post are still in their early stages of development, the features and capabilities available are already maturing and stable, allowing for larger projects in the future.<\/p>\n\n\n\n

What Is WebAssembly and Why Is It Important?<\/h2>\n\n\n\n

WebAssembly is a compilation target that enables binary code to be executed on web browsers.<\/p>\n\n\n\n

It offers high performance and near-native speed for applications that run on the web.<\/p>\n\n\n\n

This means that developers can write code in their favorite low-level languages such as C, C++, and Rust which are compiled into WebAssembly and can interact with browser APIs.<\/p>\n\n\n\n

It is important to note that we still need some JavaScript to connect WASM to browser APIs for execution hence proving that it is not a replacement for JavaScript but rather a powerful companion.<\/p>\n\n\n\n

\"Rust<\/figure>\n\n\n\n

As we know, JavaScript has never been the ideal language for creating CPU-intensive applications owing to its single-threaded design.<\/p>\n\n\n\n

By CPU intensive we mean heavy computation that will need significantly greater CPU clock speed for example machine learning algorithms, video games, and video editing.<\/p>\n\n\n\n

JavaScript was initially designed to make web pages interactive by modifying lightweight hypertext files; which is achieved by manipulating the DOM(Document Object Model).<\/p>\n\n\n\n

As years went by, a runtime for JavaScript (Node.js) was created that allowed for JavaScript to be written on the server side which came with advantages such as spawning child processes which may alleviate the problem that comes with CPU-intensive applications on the server side. <\/p>\n\n\n\n

Unfortunately, client-side JavaScript does not support this architecture, not even web workers can be effective in such a case because, for example, you cannot manipulate the DOM inside a Web Worker.<\/p>\n\n\n\n

This is where WebAssembly is a win.<\/p>\n\n\n\n

What Is Yew and How Is It Similar to React?<\/h2>\n\n\n\n

Yew is a Rust Framework for creating web applications that compile to the WebAssembly target that is meant to run on the browser.<\/p>\n\n\n\n

However, it is important to note that WebAssembly is cross-platform and can run outside the browser.<\/p>\n\n\n\n

Yew implements things the React way i.e it has hooks just like in React functional components, uses a JSX-like syntax to structure content, implements state management, implements a routing library, you can pass props to components and also implements a Virtual DOM.<\/p>\n\n\n\n

Rust as a language heavily relies on macros<\/strong> to accomplish abstracted functionalities.<\/p>\n\n\n\n

In Yew, we shall use several macros such as html!<\/strong>(to write jsx) and function_component<\/strong>(to declare components).<\/p>\n\n\n\n

Hands-on<\/h2>\n\n\n\n

We are assuming that Rust is installed in your system. In case you need to install, you can refer to our Rust blog<\/a>.<\/p>\n\n\n\n

Rust comes installed with rustup<\/strong> which is a tool meant for managing Rust versions, rustc<\/strong> which is the Rust compiler and cargo<\/strong> which is the package manager for Rust applications.<\/p>\n\n\n\n

To get started with web assembly, we have to install the WebAssembly target using the command rustup target add wasm32-unknown-unknown<\/strong>.<\/p>\n\n\n\n

Next we have to install trunk<\/strong> using cargo<\/strong>, the command is cargo install –locked trunk<\/strong>. The trunk<\/strong> package\/crate will help us in serving our application and also assets. <\/p>\n\n\n\n

We are also required to install cargo-generate<\/strong> using the command cargo install cargo-generate<\/strong>.<\/p>\n\n\n\n

The cargo-generate<\/strong> package\/crate will help us generate a Yew application using a template stored on a code repository like GitHub.<\/p>\n\n\n\n

You can download the complete code of this implementation from our repository: https:\/\/github.com\/workfall\/workfall-yew-app<\/a>. <\/p>\n\n\n\n

We shall start by creating a Yew application from a provided template using the command cargo generate –git <\/strong>https:\/\/github.com\/yewstack\/yew-trunk-minimal-template<\/strong><\/a>.<\/p>\n\n\n\n

This will prompt you for a project name and it will create a directory with the same name containing all the project files.<\/p>\n\n\n\n

\"Rust<\/figure>\n\n\n\n

Folder Structure<\/h3>\n\n\n\n

The folder structure in src<\/strong> directory will be organized as follows (just by convention, feel free to organize it as you please):<\/p>\n\n\n\n

\"Rust<\/figure>\n\n\n\n

Rust compiler recognizes mod.rs<\/strong> files as modules, therefore we\u2019ll create a components module and a views module.<\/p>\n\n\n\n

We have to declare the modules in main.rs<\/strong> so that they are available anywhere within our application.<\/p>\n\n\n\n

Note: Every time you add a new component or view, you must register it in the respective module(mod.rs)<\/strong> using the syntax pub mod <file_name_without_extension><\/strong>.<\/em><\/p>\n\n\n\n

The example is shown below for the nav<\/strong> component<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In the root folder, we can see some autogenerated files including a scss<\/strong> file that we shall use to style our application.<\/p>\n\n\n\n

If you expand the dist folder, you will see the .wasm<\/strong> file and also a .js<\/strong> file whose main purpose is to load the .wasm<\/strong> file for use by the browser APIs.<\/p>\n\n\n\n

It is not a transpiler WASM as someone may easily think.<\/p>\n\n\n\n

Configuring Logging and Debugging in the Browser Console<\/h3>\n\n\n\n

When using JavaScript we can debug using the console by printing logs using the console.log()<\/strong> method.<\/p>\n\n\n\n

For Yew, we have to configure a wasm logger to assist us with that purpose.<\/p>\n\n\n\n

We have to add the following to our Cargo.toml<\/strong>: log = “0.4.6”<\/strong> and wasm-logger = “0.2.0”<\/strong>.<\/p>\n\n\n\n

In the main.rs file add wasm_logger::init(wasm_logger::Config::default());<\/strong> to the main<\/strong> function before the renderer.<\/p>\n\n\n\n

To create console logs, you can now use the log::info!(“”);<\/strong> macro.<\/p>\n\n\n\n

Handling Routing<\/h3>\n\n\n\n

We are going to configure our router in the app.rs file, but first let us add yew-router = “0.17”<\/strong> crate to our Cargo.toml<\/strong> <\/p>\n\n\n\n

Then create at least a component (a navigation bar) and views(home, about, contact, faq) that we can route to.<\/p>\n\n\n\n

app.rs:<\/strong><\/p>\n\n\n\n

We shall use a procedural macro to create a Route enum with the following syntax:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

nav.rs:<\/strong><\/p>\n\n\n\n

Define a struct for nav items and create a state variable using the use_state<\/strong> hook which will be a vector of type NavItem<\/strong>.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

nav.rs(2):<\/strong><\/p>\n\n\n\n


<\/strong>We shall use the .iter()<\/strong> method to return an iterator from the vector then we can create each nav item and then use .collect()<\/strong> to transform the iterator into a collection of \u201cHTML\u201d or rather JSX elements.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

State Management<\/h3>\n\n\n\n

Yew has the use_state<\/strong> hook to manage the local state and goes further to implement state management using a sort of Context API in React.<\/p>\n\n\n\n

It is always a good idea to centrally manage the state of your application to avoid prop drilling and the same applies to Yew.<\/p>\n\n\n\n

We shall use a simple example that will track the state of a counter that registers effects from the home<\/strong> component.<\/p>\n\n\n\n

app.rs:<\/strong><\/p>\n\n\n\n

We shall start by defining a struct for the global state.<\/p>\n\n\n\n

For now, we shall start with a simple counter. Initialize the state using the use_reducer<\/strong> hook and set the counter to zero.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We shall set the counter state in the home component and consume this state in the other components using the use_context<\/strong> hook.<\/p>\n\n\n\n

home.rs:<\/strong><\/p>\n\n\n\n

We shall create a click<\/strong> event handler for the increment button<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The home view:<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

about.rs:<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The about view:<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

In this blog, we explored how FAST one can create a Frontend App using Yew Framework. You must have noticed many similarities between Yew and React.<\/p>\n\n\n\n

You have also learned that Yew supports state management using contexts and the local state as well.<\/p>\n\n\n\n

We have also discussed how WebAssembly may excel in creating high-performance applications that might be CPU-intensive. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n

Meanwhile\u2026<\/strong><\/p>\n\n\n\n

If you are an aspiring Rust Lover and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n