Что такое WebAssembly

WebAssembly (wasm) — бинарный формат, который позволяет запускать код на различных платформах. Rust идеально подходит для wasm благодаря отсутствию GC и предсказуемому времени выполнения.

▸Преимущества Rust + WASM

Предсказуемое время выполнения

Низкий размер бинарника

Отсутствие сборщика мусора

Высокая производительность

Настройка окружения

bash

1# Установка target
2rustup target add wasm32-unknown-unknown
3
4# Установка wasm-pack
5cargo install wasm-pack
6
7# Установка wasm-bindgen-cli
8cargo install wasm-bindgen-cli

wasm-pack

▸Создание проекта

bash

1# Создание нового проекта
2cargo new --lib my-wasm-project
3cd my-wasm-project

▸Cargo.toml

toml

1[package]
2name = "my-wasm-project"
3version = "0.1.0"
4edition = "2021"
5
6[lib]
7crate-type = ["cdylib", "rlib"]
8
9[dependencies]
10wasm-bindgen = "0.2"
11js-sys = "0.3"
12
13[dependencies.web-sys]
14version = "0.3"
15features = [
16    "Document",
17    "Element",
18    "HtmlElement",
19    "Node",
20    "Window",
21]

▸Сборка

bash

1# Dev сборка
2wasm-pack build
3
4# Release сборка
5wasm-pack build --release
6
7# С тестами
8wasm-pack test --headless --chrome

wasm-bindgen

▸Экспорт функций

rust

1use wasm_bindgen::prelude::*;
2
3#[wasm_bindgen]
4pub fn greet(name: &str) -> String {
5    format!("Hello, {}!", name)
6}
7
8#[wasm_bindgen]
9pub fn fibonacci(n: u32) -> u32 {
10    match n {
11        0 => 0,
12        1 => 1,
13        _ => fibonacci(n - 1) + fibonacci(n - 2),
14    }
15}

▸Импорт JavaScript

rust

1use wasm_bindgen::prelude::*;
2
3#[wasm_bindgen]
4extern "C" {
5    fn alert(s: &str);
6
7    #[wasm_bindgen(js_namespace = console)]
8    fn log(s: &str);
9}
10
11#[wasm_bindgen]
12pub fn show_alert(message: &str) {
13    alert(message);
14    log("Alert shown");
15}

Web-Sys

▸DOM манипуляции

rust

1use web_sys::{Document, Element, Window};
2use wasm_bindgen::prelude::*;
3
4#[wasm_bindgen(start)]
5pub fn main() -> Result<(), JsValue> {
6    let window = web_sys::window().expect("no global window");
7    let document = window.document().expect("no document");
8
9    let body = document.body().expect("no body");
10
11    let div = document.create_element("div")?;
12    div.set_text_content(Some("Hello from Rust!"));
13    div.set_attribute("class", "rust-component")?;
14
15    body.append_child(&div)?;
16
17    Ok(())
18}

▸Обработка событий

rust

1use web_sys::{Event, MouseEvent};
2use wasm_bindgen::prelude::*;
3
4#[wasm_bindgen]
5pub fn setup_event_listener() -> Result<(), JsValue> {
6    let window = web_sys::window().expect("no window");
7    let document = window.document().expect("no document");
8
9    let button = document.get_element_by_id("my-button")
10        .expect("no button");
11
12    let callback = Closure::wrap(Box::new(move |event: MouseEvent| {
13        web_sys::console::log_1(&"Button clicked!".into());
14    }) as Box<dyn FnMut(MouseEvent)>);
15
16    button.add_event_listener_with_callback(
17        "click",
18        callback.as_ref().unchecked_ref()
19    )?;
20
21    callback.forget();
22
23    Ok(())
24}

Использование в JavaScript

▸HTML

html

1<!DOCTYPE html>
2<html>
3<head>
4    <title>WASM Demo</title>
5</head>
6<body>
7    <div id="output"></div>
8    <script type="module">
9        import init, { greet, fibonacci } from './pkg/my_wasm_project.js';
10
11        async function run() {
12            await init();
13
14            const result = greet("World");
15            document.getElementById('output').textContent = result;
16
17            const fib = fibonacci(10);
18            console.log("Fibonacci(10):", fib);
19        }
20
21        run();
22    </script>
23</body>
24</html>

▸JavaScript

javascript

1import init, { greet, fibonacci } from './pkg/my_wasm_project.js';
2
3async function main() {
4    await init();
5
6    console.log(greet("Alice"));
7    console.log(fibonacci(20));
8}
9
10main();

Оптимизация

▸Уменьшение размера

toml

1# Cargo.toml
2[profile.release]
3opt-level = "z"    # Оптимизация по размеру
4lto = true         # Link-time optimization
5codegen-units = 1  # Один codegen unit
6strip = true       # Удаление символов

▸wasm-opt

bash

1# Установка wasm-opt
2npm install -g wasm-opt
3
4# Оптимизация
5wasm-opt -Oz pkg/my_wasm_project_bg.wasm -o optimized.wasm

Тестирование

rust

1#[cfg(test)]
2mod tests {
3    use super::*;
4
5    #[test]
6    fn test_greet() {
7        assert_eq!(greet("World"), "Hello, World!");
8    }
9
10    #[test]
11    fn test_fibonacci() {
12        assert_eq!(fibonacci(0), 0);
13        assert_eq!(fibonacci(1), 1);
14        assert_eq!(fibonacci(10), 55);
15    }
16}

Реальные проекты

▸Игры на Rust + WASM

Rust and WebGL

ECS (Entity Component System)

Физические движки

▸Вычислительно интенсивные задачи

Обработка изображений

Криптография

Научные вычисления

Заключение

Rust и WebAssembly — мощное сочетание для создания высокопроизводительных веб-приложений. wasm-pack упрощает сборку, wasm-bindgen обеспечивает интеграцию с JavaScript. На собеседовании спрашивают про оптимизацию wasm, безопасность и типичные паттерны использования.

#rust#webassembly#wasm#wasm-pack#frontend

Rust≈ 14 мин чтения23 марта 2024 г.

Rust для WebAssembly: компиляция в wasm

Полное руководство по WebAssembly в Rust: wasm-pack, wasm-bindgen, оптимизация, использование в браузере.

Что такое WebAssembly

▸Преимущества Rust + WASM

Предсказуемое время выполнения

Низкий размер бинарника

Отсутствие сборщика мусора

Высокая производительность

Настройка окружения

bash

1# Установка target
2rustup target add wasm32-unknown-unknown
3
4# Установка wasm-pack
5cargo install wasm-pack
6
7# Установка wasm-bindgen-cli
8cargo install wasm-bindgen-cli

wasm-pack

▸Создание проекта

bash

1# Создание нового проекта
2cargo new --lib my-wasm-project
3cd my-wasm-project

▸Cargo.toml

toml

1[package]
2name = "my-wasm-project"
3version = "0.1.0"
4edition = "2021"
5
6[lib]
7crate-type = ["cdylib", "rlib"]
8
9[dependencies]
10wasm-bindgen = "0.2"
11js-sys = "0.3"
12
13[dependencies.web-sys]
14version = "0.3"
15features = [
16    "Document",
17    "Element",
18    "HtmlElement",
19    "Node",
20    "Window",
21]

▸Сборка

bash

1# Dev сборка
2wasm-pack build
3
4# Release сборка
5wasm-pack build --release
6
7# С тестами
8wasm-pack test --headless --chrome

wasm-bindgen

▸Экспорт функций

rust

1use wasm_bindgen::prelude::*;
2
3#[wasm_bindgen]
4pub fn greet(name: &str) -> String {
5    format!("Hello, {}!", name)
6}
7
8#[wasm_bindgen]
9pub fn fibonacci(n: u32) -> u32 {
10    match n {
11        0 => 0,
12        1 => 1,
13        _ => fibonacci(n - 1) + fibonacci(n - 2),
14    }
15}

▸Импорт JavaScript

rust

1use wasm_bindgen::prelude::*;
2
3#[wasm_bindgen]
4extern "C" {
5    fn alert(s: &str);
6
7    #[wasm_bindgen(js_namespace = console)]
8    fn log(s: &str);
9}
10
11#[wasm_bindgen]
12pub fn show_alert(message: &str) {
13    alert(message);
14    log("Alert shown");
15}

Web-Sys

▸DOM манипуляции

rust

1use web_sys::{Document, Element, Window};
2use wasm_bindgen::prelude::*;
3
4#[wasm_bindgen(start)]
5pub fn main() -> Result<(), JsValue> {
6    let window = web_sys::window().expect("no global window");
7    let document = window.document().expect("no document");
8
9    let body = document.body().expect("no body");
10
11    let div = document.create_element("div")?;
12    div.set_text_content(Some("Hello from Rust!"));
13    div.set_attribute("class", "rust-component")?;
14
15    body.append_child(&div)?;
16
17    Ok(())
18}

▸Обработка событий

rust

1use web_sys::{Event, MouseEvent};
2use wasm_bindgen::prelude::*;
3
4#[wasm_bindgen]
5pub fn setup_event_listener() -> Result<(), JsValue> {
6    let window = web_sys::window().expect("no window");
7    let document = window.document().expect("no document");
8
9    let button = document.get_element_by_id("my-button")
10        .expect("no button");
11
12    let callback = Closure::wrap(Box::new(move |event: MouseEvent| {
13        web_sys::console::log_1(&"Button clicked!".into());
14    }) as Box<dyn FnMut(MouseEvent)>);
15
16    button.add_event_listener_with_callback(
17        "click",
18        callback.as_ref().unchecked_ref()
19    )?;
20
21    callback.forget();
22
23    Ok(())
24}

Использование в JavaScript

▸HTML

html

1<!DOCTYPE html>
2<html>
3<head>
4    <title>WASM Demo</title>
5</head>
6<body>
7    <div id="output"></div>
8    <script type="module">
9        import init, { greet, fibonacci } from './pkg/my_wasm_project.js';
10
11        async function run() {
12            await init();
13
14            const result = greet("World");
15            document.getElementById('output').textContent = result;
16
17            const fib = fibonacci(10);
18            console.log("Fibonacci(10):", fib);
19        }
20
21        run();
22    </script>
23</body>
24</html>

▸JavaScript

javascript

1import init, { greet, fibonacci } from './pkg/my_wasm_project.js';
2
3async function main() {
4    await init();
5
6    console.log(greet("Alice"));
7    console.log(fibonacci(20));
8}
9
10main();

Оптимизация

▸Уменьшение размера

toml

1# Cargo.toml
2[profile.release]
3opt-level = "z"    # Оптимизация по размеру
4lto = true         # Link-time optimization
5codegen-units = 1  # Один codegen unit
6strip = true       # Удаление символов

▸wasm-opt

bash

1# Установка wasm-opt
2npm install -g wasm-opt
3
4# Оптимизация
5wasm-opt -Oz pkg/my_wasm_project_bg.wasm -o optimized.wasm

Тестирование

rust

1#[cfg(test)]
2mod tests {
3    use super::*;
4
5    #[test]
6    fn test_greet() {
7        assert_eq!(greet("World"), "Hello, World!");
8    }
9
10    #[test]
11    fn test_fibonacci() {
12        assert_eq!(fibonacci(0), 0);
13        assert_eq!(fibonacci(1), 1);
14        assert_eq!(fibonacci(10), 55);
15    }
16}

Реальные проекты

▸Игры на Rust + WASM

Rust and WebGL

ECS (Entity Component System)

Физические движки

▸Вычислительно интенсивные задачи

Обработка изображений

Криптография

Научные вычисления

Заключение

#rust#webassembly#wasm#wasm-pack#frontend

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Что такое WebAssembly

▸Преимущества Rust + WASM

Настройка окружения

wasm-pack

▸Создание проекта

▸Cargo.toml

▸Сборка

wasm-bindgen

▸Экспорт функций

▸Импорт JavaScript

Web-Sys

▸DOM манипуляции

▸Обработка событий

Использование в JavaScript

▸HTML

▸JavaScript

Оптимизация

▸Уменьшение размера

▸wasm-opt

Тестирование

Реальные проекты

▸Игры на Rust + WASM

▸Вычислительно интенсивные задачи

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Что такое WebAssembly

▸Преимущества Rust + WASM

Настройка окружения

wasm-pack

▸Создание проекта

▸Cargo.toml

▸Сборка

wasm-bindgen

▸Экспорт функций

▸Импорт JavaScript

Web-Sys

▸DOM манипуляции

▸Обработка событий

Использование в JavaScript

▸HTML

▸JavaScript

Оптимизация

▸Уменьшение размера

▸wasm-opt

Тестирование

Реальные проекты

▸Игры на Rust + WASM

▸Вычислительно интенсивные задачи

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня