If you are just starting your journey in programming, then you have probably heard that web applications run on JavaScript. And that's true - but not all of it. Today we will talk about a technology that changes the rules of the game: WebAssembly (WASM) and language Rust, which becomes its main tool.
Imagine: you can write code that will work in a browser almost at the same speed as regular programs on your computer. Sounds like magic? It's reality, and it's available right now.
What is WebAssembly?
WebAssembly is not a replacement for JavaScript, but a powerful addition to it. In simple words:
JavaScript - it's like a universal worker who knows a little bit of everything
WebAssembly is a specialist who does specific tasks much faster
Why is this important?
Regular JavaScript:
Speed: 🚗
Suitable for: UI, application logic
Limitations: slow calculations
WebAssembly + Rust:
Speed: 🚀
Suitable for: data processing, games, graphics
Features: almost like native programs
Why Rust?
Rust is a programming language that was created for safety and performance. Here are its main advantages for web development:
1. Speed without compromise
Rust code is compiled into WebAssembly, which runs at almost native speed.
2. Default security
Rust will not allow you to make critical memory errors — the compiler will catch them before the program is launched.
3. Modern tools
Rust has an excellent ecosystem for working with WASM:
wasm-pack— for project assemblywasm-bindgen— for communication with JavaScriptweb-sysandjs-sys— for working with the Web API
Case study: first application
Let's create a simple application that will show the power of Rust + WASM.
Step 1: Installing the tools
# Installing Rust (if not already installed)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Adding WebAssembly support
rustup target add wasm32-unknown-unknown
# Installing wasm-pack
cargo install wasm-packStep 2: Creating a project
cargo new --lib rust-wasm-demo
cd rust-wasm-demoStep 3: Setting up Cargo.toml
[package]
name = "rust-wasm-demo"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
[dependencies.web-sys]
version = "0.3"
features = ["console"]Step 4: Write code in Rust (src/lib.rs)
use wasm_bindgen::prelude::*;
// Function for calculating Fibonacci numbers
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
match n {
0 => 0,
1 => 1,
_ => fibonacci(n - 1) + fibonacci(n - 2),
}
}
// Function for processing an array
#[wasm_bindgen]
pub fn sum_array(numbers: &[i32]) -> i32 {
numbers.iter().sum()
}
// Greeting using the Web API
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
web_sys::console::log_1(&"Function called from Rust!".into());
format!("Hi, {}! This is a message from Rust 🦀", name)
}Step 5: Assembly
wasm-pack build --target webStep 6: Use in browser (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rust + WASM Demo</title>
</head>
<body>
<h1>Rust WebAssembly в действии</h1>
<div>
<button onclick="testFibonacci()">Вычислить Фибоначчи(10)</button>
<button onclick="testArray()">Сумма массива</button>
<button onclick="testGreet()">Приветствие</button>
</div>
<div id="result"></div>
<script type="module">
import init, { fibonacci, sum_array, greet } from './pkg/rust_wasm_demo.js';
await init();
window.testFibonacci = () => {
const result = fibonacci(10);
document.getElementById('result').innerHTML =
`Fibonacci(10) = ${result}`;
};
window.testArray = () => {
const numbers = [1, 2, 3, 4, 5];
const result = sum_array(numbers);
document.getElementById('result').innerHTML =
`Sum [1,2,3,4,5] = ${result}`;
};
window.testGreet = () => {
const result = greet("developer");
document.getElementById('result').innerHTML = result;
};
</script>
</body>
</html>
Real-life use cases
1. Image processing
Apps like Figma use WASM for fast graphics processing:
#[wasm_bindgen]
pub fn apply_grayscale(pixels: &mut [u8]) {
for chunk in pixels.chunks_mut(4) {
let gray = (chunk[0] as f32 * 0.299
+ chunk[1] as f32 * 0.587
+ chunk[2] as f32 * 0.114) as u8;
chunk[0] = gray;
chunk[1] = gray;
chunk[2] = gray;
}
}2. Browser games
Game engines like Unity and Unreal Engine use WASM to run games:
#[wasm_bindgen]
pub struct GameState {
score: u32,
player_x: f64,
player_y: f64,
}
#[wasm_bindgen]
impl GameState {
pub fn new() -> GameState {
GameState {
score: 0,
player_x: 0.0,
player_y: 0.0,
}
}
pub fn update(&mut self, delta_time: f64) {
// Quick physics calculations
self.player_x += delta_time * 10.0;
self.player_y += delta_time * 5.0;
}
}3. Cryptography and encryption
Secure data operations directly in the browser:
use sha2::{Sha256, Digest};
#[wasm_bindgen]
pub fn hash_password(password: &str) -> String {
let mut hasher = Sha256::new();
hasher.update(password.as_bytes());
format!("{:x}", hasher.finalize())
}Performance comparison
Let's look at the real difference in speed:
Task: calculate the sum of 1 million numbers
JavaScript:
// JavaScript
console.time('JS');
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i * 2;
}
console.timeEnd('JS');
// Result: ~3-5msRust + WASM:
// Rust + WASM
#[wasm_bindgen]
pub fn calculate_sum(n: u32) -> u64 {
(0..n).map(|i| i as u64 * 2).sum()
}
// Result: ~1-2msWASM is 2-3 times faster!
And for more complex calculations, the difference can be 10-20 times.
Modern frameworks in Rust
Yew — React on Rust
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
let counter = use_state(|| 0);
let increment = {
let counter = counter.clone();
Callback::from(move |_| counter.set(*counter + 1))
};
html! {
<div>
<h1>{ "Counter in Rust!" }</h1>
<p>{ format!("Value: {}", *counter) }</p>
<button onclick={increment}>{ "Enlarge" }</button>
</div>
}
}Leptos - modern and fast
use leptos::*;
#[component]
fn Counter() -> impl IntoView {
let (count, set_count) = create_signal(0);
view! {
<div>
<button on:click=move |_| set_count.update(|n| *n += 1)>
"Clicks: " {count}
</button>
</div>
}
}Conclusion
Rust and WebAssembly are not just hype, but the real future of web development. These are the tools that allow you to create fast, safe and powerful apps directly in the browser.
You don't need to be an expert to get started. The main thing is to take the first step: install the tools, write the first function and see how it works.
All this and much more can be learned on the Kodik platform!
Here you will find:
📖 Detailed courses from basics to advanced topics
💻 Practical tasks to secure the material
🎯 Real projects for portfolio
🏆 Progress system with experience and achievements
We will analyze each topic in detail, write the code together and consolidate everything in practice!
💬 Need support?
Join our active Telegram channel - already more than 2000 like-minded people help each other, share experiences and discuss the latest developments in the world of development!
👉 Start your journey into the world of modern web development right now!