t.me/oneRustnoqRust Ежедневная рассылка
Для чего нужна данная статья? :
- Получить представление о WebAssembly.
- Написать простой код CMS и мобильного приложения.
Зачем Вам это уметь? :
1. Для создания более перспективного и интероперабельного интерфейса.
2. Повторное использование кода - необходимо Вам и тем кто потребляет Ваш код.
3. Для поиска компромисса между двоичным размером и
производительностью.
CMS
Написание CMS (системы управления контентом) в Rust с WebAssembly будет включать компиляцию кода Rust в WebAssembly, а затем использование его в веб-приложении. Вот пример того, как вы можете начать структурировать простую CMS в Rust с помощью WebAssembly:
пример простой структуры Page, которая представляет страницу контента в CMS:
#[derive(Debug)]
pub struct Page {
title: String,
content: String,
}
impl Page {
pub fn new(title: String, content: String) -> Self {
Self { title, content }
}
pub fn title(&self) -> &str {
&self.title
}
pub fn content(&self) -> &str {
&self.content
}
}
Этот код определяет структуру Страницы с полями для заголовка и содержимого страницы, а также методы для создания новой страницы и доступа к ее заголовку и содержимому.
Далее скомпилируем код Rust в WebAssembly с помощью инструмента wasm-pack. При этом будет создан WASM-файл, который можно использовать в веб-приложении.
В веб-приложении можно использовать JavaScript для загрузки модуля WebAssembly и создания экземпляра структуры Page. Вот пример того, как это может выглядеть с помощью JavaScript и библиотеки wasm-bindgen:
import init from './pkg/my_cms.js';
async function run() {
const my_cms = await init();
const { Page } = my_cms;
const page = Page.new('Home', 'Welcome to our website!');
console.log(page.title(), page.content());
}
run();
Этот код использует инструкцию import для загрузки модуля WebAssembly, созданного wasm-pack. Затем он использует функцию init для инициализации модуля и получения ссылки на структуру Page. Код создает экземпляр структуры Page с помощью нового метода, а затем вызывает его методы title и content для доступа к своим данным.
Создание мобильного приложения
Создадим простую функцию на Rust, которая будет компилироваться в WebAssembly и вызвана из веб-интерфейса.
1.1 Установите необходимые инструменты:
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
1.2 Создайте новый проект на Rust:
cargo new --lib wasm_example
cd wasm_example
1.3 Напишите код на Rust:
Файл src/lib.rs:
use wasm_bindgen::prelude::*;
#[wasm_bindgen] pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
1.4 Скомпилируйте проект в WebAssembly:
cargo build --target wasm32-unknown-unknown --release
1.5 Генерация обвязки с помощью wasm-bindgen:
wasm-bindgen target/wasm32-unknown-unknown/release/wasm_example.wasm --out-dir ./out --target web
2.1 Использование WebView в Android:
Если вы хотите интегрировать WebAssembly код в мобильное приложение на Android, можно использовать WebView:
2.1.1 Создайте Android проект и добавьте WebView в макет:
Файл res/layout/activity_main.xml:
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
2.1.2 В MainActivity загрузите HTML с WebAssembly:
Файл MainActivity.java или MainActivity.kt:
WebView webView = findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/index.html");
2.1.3 Создайте файл index.html в assets:
Файл assets/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Example</title>
<script type="module"> import init, { greet } from './wasm_example.js'; async function run() {
await init();
document.getElementById("output").textContent = greet("Android User"); }
run();
</script>
</head>
<body>
<div id="output">
</div>
<script src="wasm_example.js">
</script> </body> </html>
Когда вы скомпилируете и запустите Android приложение, оно откроет WebView, который загрузит HTML-страницу с вашим скомпилированным WebAssembly кодом на Rust. Эта страница вызовет функцию greet, которая выполнится на WebAssembly и отобразит результат.