Rust и WebAssembly для фронтенда

WebAssembly (Wasm) — бинарный формат исполнения в браузере (и вне его: wasmtime, Wasmer). Rust с wasm-pack / trunk даёт предсказуемую производительность для CPU-heavy задач на клиенте (крипто, игры, парсинг). Основы Rust — владение и безопасность памяти; сборка фронта — Webpack и Vite.

1. Зачем Rust + Wasm

• Переиспользование кода с нативного мира.
• Близость к скорости нативного кода без плагинов NPAPI.

2. Интероп с JS

wasm-bindgen генерирует JS-обёртки; вызовы через import/export между модулями.

В Rust помечают функции атрибутом #[wasm_bindgen]; в JS импортируют сгенерированный модуль как обычный ES-модуль. JavaScript → Wasm: передавайте простые типы и Uint8Array; сложные объекты — сериализовать или держать на стороне JS и передавать только дескрипторы.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn hash_password(password: &str) -> String {
    // CPU-heavy логика здесь
    format!("hashed:{password}")
}

Сборка wasm-pack build создаёт пакет с .wasm и .js, который можно импортировать из приложения на Vite или Webpack — см. сборку фронтенда.

3. Размер бандла

wasm-opt, LTO, отключение паник unwinding в пользу abort — уменьшают .wasm.

4. Ограничения

Нет прямого DOM из Wasm без JS glue; линейная память модели. Многопоточность в браузере — Web Workers + SharedArrayBuffer с оговорками по безопасности.

5. Минимальный поток сборки

wasm-pack build --target web даёт ES-модуль и glue JS. trunk удобен для чистого Rust+HTML без обвязки на Node. В Vite используйте vite-plugin-wasm или ручной instantiateStreaming(fetch('pkg_bg.wasm')) с правильными MIME (application/wasm) на сервере.

6. Память и границы JS ↔ Wasm

Передача больших буферов — через Uint8Array view на wasm-память без лишнего копирования, где возможно. Освобождение временных аллокаций в Rust-модуле — иначе рост линейной памяти до перезагрузки страницы.

7. Отладка

Chrome DevTools показывает wasm-модуль; source maps с --debug увеличивают размер. console_error_panic_hook в Rust помечает паники в консоли читаемее.

8. Чек-лист

• Fallback на JS для старых браузеров при необходимости.
• Загрузка wasm async и индикатор прогресса.
• Не хранить секреты в wasm — видно клиенту.
• COOP/COEP заголовки только если осознанно нужны для SharedArrayBuffer.
• Версионирование .wasm вместе с JS glue при деплое (кэш CDN).

Дальше: тег WebAssembly