WebAssembly - Работа с Rust

Введение в WebAssembly и Rust

Здравствуйте, будущие программисты! Сегодня мы окунемся в захватывающий мир, где веб-браузеры становятся мощными платформами для выполнения高性能 приложений. Представьте себе возможность играть в сложные 3D-игры или запускать сложные инструменты анализа данных прямо в вашем браузере. Это магия WebAssembly, и мы научимся использовать эту силу с помощью языка программирования Rust.

WebAssembly - Working with Rust

Когда я впервые столкнулся с WebAssembly, у меня的感觉 была, будто я открыл тайное суперсиле для веб-разработки. Это как узнать, что ваш верный велосипед внезапно может превратиться в ракету! Давайте отправимся в это захватывающее путешествие вместе.

Что такое WebAssembly?

WebAssembly, часто сокращается до Wasm, это двоичный формат инструкций, предназначенный для эффективного выполнения в веб-браузерах. Это как тайный код, который браузеры могут понять и запустить incredibly fast. Представьте это как турбонаддув для ваших веб-приложений!

Why Rust для WebAssembly?

Rust - это мощный и безопасный язык программирования. Это как спортивный автомобиль с самыми современными системами безопасности. Уникальные характеристики Rust делают его excellent выбором для разработки на WebAssembly:

Безопасность памяти без мусорной收集ки
Высокая производительность
Малый размер двоичного файла
Легкая интеграция с JavaScript

Настройка вашей рабочей среды

Before мы начнем программировать, нам нужно подготовить наше рабочее место. Это как настройка вашей художественной студии перед написанием шедевра.

Установка Rust

First, install Rust. Open your terminal and run:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Эта команда загружает и устанавливает Rust. Это как посадка семени, которое вырастет в наше мощное кодирование дерево!

Установка wasm-pack

Next, we'll install wasm-pack, a tool that helps us build and work with WebAssembly:

cargo install wasm-pack

Think of wasm-pack as your trusty assistant, always ready to help you package your Rust code for the web.

Your First Rust and WebAssembly Project

Теперь создадим наш первый проект. Мы начнем с простого, с функции, которая складывает два числа.

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

In your terminal, run:

cargo new --lib wasm-add
cd wasm-add

This creates a new Rust library project. Это как открытие новой тетради, готовой для наших coding приключений!

Написание кода на Rust

Open src/lib.rs и замените его содержимое на:

use wasm_bindgen::prelude::*;

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

Давайте разберем это:

use wasm_bindgen::prelude::*; импортирует необходимые bindings для WebAssembly.
#[wasm_bindgen] как магическое заклинание, делающее нашу функцию доступной из JavaScript.
pub fn add(a: i32, b: i32) -> i32 определяет нашу функцию, которая принимает два целых числа и возвращает их сумму.

Компиляция для WebAssembly

Теперь превратим наш код на Rust в WebAssembly. Run:

wasm-pack build --target web

Эта команда как магическая печь, запекающая наш код на Rust в лакомство WebAssembly, которое могут наслаждаться браузеры!

Использование вашего модуля WebAssembly на веб-странице

Теперь comes the exciting part – использование нашего модуля WebAssembly на реальной веб-странице!

Создание HTML файла

Создайте файл с именем index.html в корне вашего проекта с следующим содержимым:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

run();
</script>
</body>
</html>

Этот HTML файл как сцена, где наша звезда WebAssembly будет выступать!

Запуск вашей веб-страницы

Чтобы увидеть ваше творение в действии, вам needed a local web server. If you have Python installed, you can use:

python -m http.server

Then open your browser and navigate to http://localhost:8000. You should see "5 + 7 = 12" displayed on the page. Congratulations! You've just run Rust code in your web browser!

Advanced Topics

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

Работа со строками

Строки немного сложнее в WebAssembly. Давайте создадим функцию, которая здоровается с пользователем:

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

In JavaScript, we'd use it like this:

const greeting = greet("WebAssembly");
console.log(greeting); // Выводит: Hello, WebAssembly!

Управление памятью

Одна из superpowers Rust - это управление памятью. When working with WebAssembly, we need to be extra careful. Вот функция, создающая и возвращающая вектор:

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

Эта функция безопасна, потому что система владения Rust обеспечивает правильное управление памятью, даже когда используется из JavaScript!

Заключение

Поздравляю с первыми шагами в мир WebAssembly с Rust! Мы covered a lot of ground, от настройки вашей среды до создания и использования модулей WebAssembly. Помните, как и при обучении любому новому навыку, мастерство приходит с практикой. Так что продолжайте программировать, продолжайте экспериментировать и, самое главное, получайте удовольствие!

While мы заканчиваем, я вспомнил цитату знаменитого ученого в области вычислений Грейс Хоппер: "Самая разрушительная фраза в языке - 'Мы всегда делали это так'." WebAssembly и Rust представляют собой новый способ мышления о веб-разработке. Принимайте это изменение, и вы откроете мир возможностей в вашем программировании journey.

Happy coding, и пусть ваши приключения с WebAssembly будут наполнены兴奋 и открытиями!

Credits: Image by storyset

Предыдущий учебник:

WebAssembly - Работа с C++

Следующий учебник:

WebAssembly - Работа с Go