Привет, Хабр!

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

з.ы: предполагается, что читатель знает основы webassembly и про что-то из rust

Реализация

wasm-bindgen

wasm-bindgen – это библиотека и инструмент командной строки, который облегчает взаимодействие между кодом на Rust и JavaScript, позволяет вызывать функции JavaScript из Rust и наоборот, а также работать с различными типами данных.

Можно вызывать функции JavaScript прямо из Rust. Это позволяет использовать возможности браузера и веб-API, не покидая экосистему Rust.

wasm-bindgen позволяет экспортировать функции Rust в WebAssembly, которые затем могут быть вызваны из JavaScript, также он облегчает обмен сложными типами данных между Rust и JavaScript, например, строками, структурами и даже целыми классами.

Допустим, у нас есть следующая функция JavaScript, которая выводит сообщение в консоль:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

Вызываем эту функцию из Rust следующим образом:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    fn greet(name: &str);
}

#[wasm_bindgen(start)]
pub fn run() {
    greet("World");
}

Теперь сделаем наоборот. Напишем функцию на Rust и вызовем её из JavaScript:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(x: i32, y: i32) -> i32 {
    x + y
}

Теперь мы можем вызвать эту функцию из JavaScript:

import { add } from './my_module';

console.log(add(5, 7)); // Выведет 12

wasm-bindgen также позволяет работать со структурами Rust в JavaScript. Например:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct Point {
    x: i32,
    y: i32,
}

#[wasm_bindgen]
impl Point {
    pub fn new(x: i32, y: i32) -> Point {
        Point { x, y }
    }

    pub fn x(&self) -> i32 {
        self.x
    }

    pub fn y(&self) -> i32 {
        self.y
    }
}

В JavaScript мы можем создать и использовать объект Point так:

import { Point } from './my_module';

const p = Point.new(2, 3);
console.log(p.x()); // Выведет 2
console.log(p.y()); // Выведет 3

wasm-pack

wasm-pack – это инструмент, предназначенный для сборки Rust-кода в WebAssembly и управления всем процессом от начала до конца.

wasm-pack компилирует Rust-код в WebAssembly, оптимизируя его для использования в вебе. После сборки wasm-pack помогает упаковать проект в формат, совместимый с npm, что упрощает его распространение и использование.

wasm-pack поддерживает тестирование кода на WebAssembly.

Установку wasm-pack можно сделать через cargo:

cargo install wasm-pack

Затем создаем новый проект с использованием cargo:

cargo new --lib my_wasm_project
cd my_wasm_project

В файле Cargo.toml проекта указывается зависимостьwasm-bindgen, так как wasm-pack работает в тандеме с ним:

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

В файле src/lib.rs создадим простую функцию:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)

Теперь можно собрать проект с помощью wasm-pack:

wasm-pack build

Команда создаст папку pkg, в которой будет находиться скомпилированный WebAssembly код и автоматически сгенерированные JavaScript-обвязки.

После успешной сборки можно опубликовать свой пакет в npm:

wasm-pack publish

Теперь WebAssembly-модуль готов к использованию в JavaScript-проекте. Можно импортировать и использовать функцию greet в JavaScript-коде:

import { greet } from 'my_wasm_project';

console.log(greet('World')); // Выведет "Hello, World!"

cargo-web

cargo-web предоставляет простой в использовании локальный веб-сервер, который автоматически перезагружает ваше приложение при изменении кода.

Для начала установим cargo-web:

cargo install cargo-web

Затем создадим новый проект:

cargo new --lib my_web_project
cd my_web_project

В Cargo.toml, укажем тип сборки и добавим зависимости:

[package]
name = "my_project"
version = "1"
edition = "2"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

В src/lib.rs добавим простую функцию, которая будет использоваться в веб-приложении:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn say_hello() -> String {
    "Hello from Rust!".to_string()
}

Теперь можно запустить локальный веб-сервер с помощью cargo-web:

cargo web start

Эта команда запустит веб-сервер и откроет приложение в браузере. Любые изменения в коде будут автоматически отображаться.

Чтобы использовать функцию say_hello в веб-странице, создадим HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Rust WebAssembly App</title>
    <script type="module">
        import init, { say_hello } from './my_web_project.js';

        async function run() {
            await init();
            alert(say_hello());
        }

        run();
    </script>
</head>
<body>
    <h1>Hello from Rust and WebAssembly!</h1>
</body>
</html>

Этот код загрузит и инициализирует сгенерированный WebAssembly-модуль, а затем вызовет функцию say_hello.

Rust имеет хорошие инструменты для реализации WASM. Спасибо за прочтение статьи

В продолжение темы хочу напомнить про бесплатные вебинары от экспертов рынка про безопасный unsafe Rust и про то, как Rust побуждает использовать композицию.

А больше курсов от экспертов OTUS можно найти в полном каталоге.

Как реализовывается WebAssembly в Rust: кратко