Кодик
Начать бесплатно

Rust для Web: рост WASM и будущее браузерных приложений

В статье — простое объяснение WASM для новичков, практические примеры кода, сравнение скорости с JavaScript и пошаговое создание первого проекта. Разбираем, почему Figma, Google Earth и 1Password выбрали эту технологию, и как вы можете начать использовать её уже сегодня.

WebРазработка

6 мин

Если вы только начинаете свой путь в программировании, то наверняка слышали, что веб-приложения работают на JavaScript. И это правда — но не вся. Сегодня мы поговорим о технологии, которая меняет правила игры: WebAssembly (WASM) и языке Rust, который становится её главным инструментом.

Представьте: вы можете написать код, который будет работать в браузере почти с той же скоростью, что и обычные программы на вашем компьютере. Звучит как магия? Это реальность, и она доступна уже сейчас.

Что такое WebAssembly?

WebAssembly — это не замена JavaScript, а его мощное дополнение. Если простыми словами:

JavaScript — это как универсальный работник, который умеет всё понемногу
WebAssembly — это специалист, который делает конкретные задачи на порядок быстрее

Почему это важно?

Обычный JavaScript:

  • Скорость: 🚗

  • Подходит для: UI, логика приложения

  • Ограничения: медленные вычисления

WebAssembly + Rust:

  • Скорость: 🚀

  • Подходит для: обработка данных, игры, графика

  • Возможности: почти как нативные программы

Почему именно Rust?

Rust — это язык программирования, который создан для безопасности и производительности. Вот его главные преимущества для веб-разработки:

1. Скорость без компромиссов

Код на Rust компилируется в WebAssembly, который работает практически с нативной скоростью.

2. Безопасность по умолчанию

Rust не позволит вам сделать критические ошибки с памятью — компилятор поймает их ещё до запуска программы.

3. Современные инструменты

Rust имеет отличную экосистему для работы с WASM:

  • wasm-pack — для сборки проектов

  • wasm-bindgen — для связи с JavaScript

  • web-sys и js-sys — для работы с Web API

Практический пример: первое приложение

Давайте создадим простое приложение, которое покажет мощь Rust + WASM.

Шаг 1: Установка инструментов

# Установка Rust (если ещё не установлен)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Добавление поддержки WebAssembly
rustup target add wasm32-unknown-unknown

# Установка wasm-pack
cargo install wasm-pack

Шаг 2: Создание проекта

cargo new --lib rust-wasm-demo
cd rust-wasm-demo

Шаг 3: Настройка 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"]

Шаг 4: Пишем код на Rust (src/lib.rs)

use wasm_bindgen::prelude::*;

// Функция для вычисления чисел Фибоначчи
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// Функция для обработки массива
#[wasm_bindgen]
pub fn sum_array(numbers: &[i32]) -> i32 {
    numbers.iter().sum()
}

// Приветствие с использованием Web API
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    web_sys::console::log_1(&"Вызвана функция из Rust!".into());
    format!("Привет, {}! Это сообщение от Rust 🦀", name)
}

Шаг 5: Сборка

wasm-pack build --target web

Шаг 6: Использование в браузере (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 = 
                `Фибоначчи(10) = ${result}`;
        };

        window.testArray = () => {
            const numbers = [1, 2, 3, 4, 5];
            const result = sum_array(numbers);
            document.getElementById('result').innerHTML = 
                `Сумма [1,2,3,4,5] = ${result}`;
        };

        window.testGreet = () => {
            const result = greet("разработчик");
            document.getElementById('result').innerHTML = result;
        };
    </script>
</body>
</html>

Реальные примеры использования

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

Приложения вроде Figma используют WASM для быстрой обработки графики:

#[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. Игры в браузере

Игровые движки вроде Unity и Unreal Engine используют WASM для запуска игр:

#[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) {
        // Быстрые вычисления физики
        self.player_x += delta_time * 10.0;
        self.player_y += delta_time * 5.0;
    }
}

3. Криптография и шифрование

Безопасные операции с данными прямо в браузере:

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())
}

Сравнение производительности

Давайте посмотрим на реальную разницу в скорости:

Задача: вычислить сумму 1 миллиона чисел

JavaScript:

// JavaScript
console.time('JS');
let sum = 0;
for (let i = 0; i < 1000000; i++) {
    sum += i * 2;
}
console.timeEnd('JS');
// Результат: ~3-5ms

Rust + WASM:

// Rust + WASM
#[wasm_bindgen]
pub fn calculate_sum(n: u32) -> u64 {
    (0..n).map(|i| i as u64 * 2).sum()
}
// Результат: ~1-2ms

WASM быстрее в 2-3 раза!

А для более сложных вычислений разница может быть в 10-20 раз.

Современные фреймворки на Rust

Yew — React на 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>{ "Счётчик на Rust!" }</h1>
            <p>{ format!("Значение: {}", *counter) }</p>
            <button onclick={increment}>{ "Увеличить" }</button>
        </div>
    }
}

Leptos — современный и быстрый

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)>
                "Клики: " {count}
            </button>
        </div>
    }
}

Заключение

Rust и WebAssembly — это не просто хайп, а реальное будущее веб-разработки. Это инструменты, которые позволяют создавать быстрые, безопасные и мощные приложения прямо в браузере.

Вам не нужно быть экспертом, чтобы начать. Главное — сделать первый шаг: установить инструменты, написать первую функцию и увидеть, как она работает.

Всё это и намного больше можно изучить на платформе Кодик!

У нас вы найдёте:

📖 Подробные курсы от основ до продвинутых тем

💻 Практические задания для закрепления материала

🎯 Реальные проекты для портфолио

🏆 Систему прогресса с опытом и достижениями

Разберём каждую тему детально, напишем код вместе и закрепим всё на практике!

💬 Нужна поддержка?

Присоединяйтесь к нашему активному Telegram-каналу — уже более 2000 единомышленников помогают друг другу, делятся опытом и обсуждают новинки мира разработки!

👉 Начните своё путешествие в мир современной веб-разработки прямо сейчас!

Комментарии