Rust WASM: přenos CLI do prohlížeče

Převod konzolové utility z Rustu na WebAssembly s nasazením na GitLab Pages

Konzolová aplikace pro generování textových předpovědí byla převedena na WebAssembly v Rustu. Výpočetní logika je izolována v WASM modulu, rozhraní je implementováno jako statická HTML stránka s terminálovým UX. Nasazení přes GitLab Pages zajišťuje okamžitý přístup k demo bez instalace.

Projekt zahrnuje Rust knihovnu pro logiku, frontend na vanilla JS a CSS, artefakty wasm-pack. Vhodné pro lehké utility bez přístupu k souborovému systému a platformním API.

Architektura projektu

Struktura je rozdělena do tří komponent:

• src/lib.rs — hlavní logika v Rustu s exportem funkcí.
• public/index.html, styles.css, app.js — rozhraní ve stylu terminálu.
• public/pkg/ — zkompilované WASM soubory a JS obaly.

Absence závislostí na operačním systému činí převod triviálním: aplikace přijímá příkazy a vrací text.

Export Rustu do WASM

Hlavní funkce je exportována pomocí #[wasm_bindgen]:

#[wasm_bindgen]
pub fn generate_reading_text() -> String {
    // generování a formátování výsledku
}

Sestavení příkazem:

wasm-pack build --target no-modules --release --out-dir public/pkg

Výsledek: iching_wasm.js a iching_wasm_bg.wasm. Volba --target no-modules zjednodušuje integraci bez bundlerů.

Integrace WASM do prohlížeče

V app.js je modul načten synchronně s base64 vestavěným WASM pro práci přes file://:

const wasmBytes = base64ToBytes(window.ICHING_WASM_BASE64);
wasm_bindgen.initSync({ module: wasmBytes });

const text = wasm_bindgen.generate_reading_text();
output.textContent = text;

V index.html jsou připojeny:

• ./pkg/iching_wasm.js — runtime.
• ./pkg/iching_wasm_bg_base64.js — base64 WASM.
• app.js — UI logika.

JS volá WASM, výsledek je vykreslen do DOM.

UI ve stylu terminálu

Rozhraní bez frameworků:

• Kontejner s rámečkem a nadpisem okna.
• Monospace písmo (např. JetBrains Mono).
• Tmavý motiv se zeleným textem.
• <pre> pro výstup.
• Input pro příkazy jako ./generate_reading.

Vizuálně a chováním napodobuje konzoli. Tlačítko spouští WASM volání.

CI/CD pro sestavení a nasazení

.gitlab-ci.yml automatizuje proces:

image: rust:slim

create-pages:
  pages:
    publish: public
  rules:
    - if: '$CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH'
  before_script:
    - rustup target add wasm32-unknown-unknown
    - cargo install wasm-pack --locked
  script:
    - wasm-pack build --target no-modules --release --out-dir public/pkg
    - b64="$(base64 public/pkg/iching_wasm_bg.wasm | tr -d '\n')"
    - printf 'window.ICHING_WASM_BASE64 = "%s";\n' "$b64" > public/pkg/iching_wasm_bg_base64.js

Kroky: instalace target, sestavení wasm-pack, kódování WASM do base64, publikace public/ na Pages.

Výhody přístupu

• Dostupnost: demo funguje v jakémkoli prohlížeči bez Rustu/lokální instalace.
• Bezpečnost: izolace WASM eliminuje rizika od nativního kódu.
• Jednoduchost: statický hosting, jeden CI-job.
• Přenositelnost: vhodné pro CLI bez syscalls.

Co je důležité

• Logika bez FS/API se ideálně hodí na WASM — sestavení za sekundy.
• Base64 vestavění WASM řeší problémy s CORS a file://.
• GitLab Pages + wasm-pack CI — hotový pipeline pro prototypy.
• Vanilla JS/HTML pro UI minimalizuje overhead.
• #[wasm_bindgen] — standard pro export Rustu do JS.

— Editorial Team