Rust - язык, который за последние годы завоевал сердца разработчиков своей надежностью, а в особенности безопасностью. WebAssembly в свою очередь позволяет нам перенести производительность и мощь нативных приложений в браузер. Вместе эти инструменты позволяют сделать веб-приложения с высокой скоростью, ну и кончечно - высокой безопасностью.
з.ы: предполагается, что читатель знает основы webassembly и про что-то из rust
Можно вызывать функции JavaScript прямо из Rust. Это позволяет использовать возможности браузера и веб-API, не покидая экосистему Rust.
wasm-bindgen позволяет экспортировать функции Rust в WebAssembly, которые затем могут быть вызваны из JavaScript, также он облегчает обмен сложными типами данных между Rust и JavaScript, например, строками, структурами и даже целыми классами.
Допустим, у нас есть следующая функция JavaScript, которая выводит сообщение в консоль:
function greet(name) {
console.log(`Hello, ${name}!`);
}
Вызываем эту функцию из Rust следующим образом:
use wasm_bindgen:
relude::*;
#[wasm_bindgen]
extern "C" {
fn greet(name: &str);
}
#[wasm_bindgen(start)]
pub fn run() {
greet("World");
}
Теперь сделаем наоборот. Напишем функцию на Rust и вызовем её из JavaScript:
use wasm_bindgen:relude::*;
#[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:relude::*;
#[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 компилирует 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:relude::*;
#[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 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:relude::*;
#[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.
habr.com
з.ы: предполагается, что читатель знает основы 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:
relude::*;#[wasm_bindgen]
extern "C" {
fn greet(name: &str);
}
#[wasm_bindgen(start)]
pub fn run() {
greet("World");
}
Теперь сделаем наоборот. Напишем функцию на Rust и вызовем её из JavaScript:
use wasm_bindgen:
relude::*;#[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:
relude::*;#[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:
relude::*;#[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:
relude::*;#[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.
Как реализовывается WebAssembly в Rust: кратко
Привет, Хабр! Rust - язык, который за последние годы завоевал сердца разработчиков своей надежностью, а в особенности безопасностью . WebAssembly в свою очередь позволяет нам перенести...
habr.com