Learn Rust Coding · Урок

Rust и WebAssembly (WASM)

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

«Rust и WebAssembly (WASM)» — бесплатный урок Learn Rust Coding на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Learn Rust Coding, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Learn Rust Coding содержит 3 уроков всего.

Что такое WebAssembly (WASM)

WebAssembly, или WASM, — это двоичный формат инструкций для виртуальной машины на основе стека. Он разработан как переносимая цель компиляции для языков высокого уровня, таких как Rust, C/C++ и Go.

Его можно представить как низкоуровневый язык, похожий на ассемблер, который эффективно работает в веб-браузерах и других средах. Он позволяет выполнять код, критичный к производительности, почти с нативной скоростью.

Преимущества Rust для WASM

Rust отлично подходит для разработки WebAssembly благодаря своим уникальным преимуществам:

Производительность: Rust известен высокой скоростью, близкой к скорости C/C++.
Безопасность памяти: система владения Rust предотвращает распространённые ошибки без сборщика мусора.
Небольшие двоичные файлы: минимальная среда выполнения Rust обеспечивает компактные модули WASM.
Инструменты: отличная поддержка с помощью таких средств, как wasm-pack и wasm-bindgen.

Настройка инструментов WASM

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

Также используется wasm-bindgen — пакет Rust и инструмент CLI, упрощающий взаимодействие между модулями WASM и JavaScript на высоком уровне.

Чтобы установить wasm-pack, откройте терминал и выполните:

cargo install wasm-pack

Ваш первый проект WASM

Давайте создадим новый проект Rust, предназначенный для WebAssembly. Для этого воспользуемся cargo generate со специальным шаблоном:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

Следуйте подсказкам, чтобы указать имя проекта. В результате будут созданы файл lib.rs, готовый для кода WASM, и каталог www для простого веб-интерфейса.

Функция Rust для JavaScript

Чтобы функцию Rust можно было вызывать из JavaScript, используется атрибут #[wasm_bindgen] из пакета wasm-bindgen.

Этот атрибут указывает wasm-bindgen сгенерировать необходимый связующий код для взаимодействия JavaScript с Вашей функцией Rust.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

Интеграция WASM с JavaScript

После написания кода Rust соберите его в модуль WASM с помощью wasm-pack build. Эта команда создаёт каталог pkg с файлом .wasm и связующим кодом JS.

Затем в JavaScript можно легко импортировать и использовать экспортированные функции Rust:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Вызов JavaScript из Rust

Rust также может вызывать функции JavaScript. Объявите их в блоке extern "C" и используйте #[wasm_bindgen], чтобы сопоставить их с глобальными объектами или функциями JS.

Аргумент js_namespace позволяет указать, где искать функцию в среде JavaScript, например в объекте console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Передача строк между Rust и JS

wasm-bindgen интеллектуально обрабатывает распространённые типы данных, такие как числа и логические значения. Для строк используется кодировка UTF-8.

Когда Вы передаёте &str или String из Rust, wasm-bindgen преобразует его в JavaScript String и наоборот. Эта абстракция упрощает взаимодействие.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM за пределами браузера

Хотя WebAssembly часто связывают с веб-браузерами, он ими не ограничивается! Среды выполнения WASM существуют во многих средах, открывая новые возможности:

Бессерверные функции: развёртывание быстрых изолированных функций.
Блокчейн: выполнение смарт-контрактов.
Подключаемые модули и расширения: безопасное расширение приложений.
Настольные приложения: встраивание высокопроизводительных модулей.

Это значительно расширяет область применения Rust за пределы традиционного системного программирования.

Ключевые понятия WebAssembly

Давайте проверим, насколько хорошо Вы поняли Rust и WebAssembly.

Итоги: от Rust к WASM

Вы научились переносить производительность и безопасность Rust в WebAssembly!

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

Продолжайте изучать тему, чтобы создавать мощные высокопроизводительные веб-приложения и приложения для других сред на Rust!

Часто задаваемые вопросы

Урок «Rust и WebAssembly (WASM)» бесплатный?

Да — полный текст урока «Rust и WebAssembly (WASM)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Learn Rust Coding, подпишись на CoddyKit PRO. Курс Learn Rust Coding содержит 3 уроков всего.

Чему я научусь в уроке «Rust и WebAssembly (WASM)»?

Компилируйте код Rust в WebAssembly, чтобы высокопроизводительные модули могли работать в веб-браузерах и других средах выполнения WASM. Ты практикуешь Learn Rust Coding с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Learn Rust Coding?

Предыдущий опыт не требуется. Learn Rust Coding на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Rust и WebAssembly (WASM)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Learn Rust Coding?

Да. Каждый урок Learn Rust Coding включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Интерфейс внешних функций (FFI)
Rust и WebAssembly (WASM)
Бенчмаркинг и настройка производительности

← Назад к Learn Rust Coding