← Усі статті

euv: UI-фреймворк на Rust і WebAssembly для браузера

Вступний гайд з euv: віртуальний DOM, реактивні сигнали, макрос html! і mount — декларативний фронтенд із типобезпекою Rust і збіркою в WASM.

Зміст

Коротко

euv — ще один кандидат у лінійку «Rust + WASM на фронті», але з акцентом на звичну декларативну модель, а не на низькорівневі прив'язки. Має сенс спробувати на ізольованому віджеті або внутрішньому інструменті, перш ніж ставити на весь односторінковий інтерфейс — ланцюжок збірки WASM досі вимагає дисципліни в CI та контролю розміру артефакта.

Що сталося

На Dev.to вийшов стартовий гайд: встановлення через cargo add euv, мінімальний застосунок «Hello, euv!» і розбір базових концепцій. Коренева функція повертає VirtualNode, розмітка описується в макросі html!, монтування — викликом mount("#app", app).

Фреймворк заявляє набір можливостей «з коробки»:

  • Rust + WASM — фронтенд на мові з перевіркою типів, близька до нативної швидкість у браузері.
  • Віртуальний DOM — diff/patch замість прямих масових операцій з DOM.
  • Реактивні сигналиuse_signal, computed!, watch!; оновлюються лише зачеплені вузли.
  • Компоненти — перевикористовувані блоки з типізованими props.
  • Анімації — вбудовані CSS keyframes (euv-spin, euv-fade-in тощо).
  • Доступ до браузерних API — Window, Document, Storage, Clipboard через prelude.
  • Асинхронністьspawn_local, робота з Promise і Response.

Приклад з лічильником показує патерн: сигнал count, обробник onclick з count.get() / count.set(...), автоматичний перерендер зачеплених частин UI.

Чому це важливо

Екосистема «Rust у браузері» давно обіцяла альтернативу JS-фреймворкам, але поріг входу часто високий: інший toolchain (wasm-pack, trunk), інша модель помилок, менше готових UI-бібліотек. euv ставить на знайомий declarative UX — макроси замість JSX, сигнали замість hooks — і знижує когнітивний розрив для тих, хто вже знає React/Solid.

Для команд із Rust на бекенді це шанс уніфікувати мову на full-stack без «двох світів» типів. Для експериментів — спосіб перевірити, наскільки WASM-UI конкурує з звичним бандлом на важких інтерактивних віджетах.

На практиці

  1. Підготуйте WASM-проєктtrunk або wasm-pack для збірки та dev-сервера.
  2. Додайте залежністьcargo add euv.
  3. Опишіть корінь — функція -> VirtualNode з html! { ... }.
  4. Змонтуйтеmount("#app", app) або селектори body, .root, main.
  5. Станuse_signal для локального state; для похідних значень — computed!.
  6. Подіїonclick: move |event| { ... } всередині елементів макроса.
Концепція Аналог у JS-світі
html! JSX / шаблони
use_signal useState / signals
mount createRoot().render
VirtualNode Virtual DOM tree

Підсумок

euv — ще один кандидат у лінійку «Rust + WASM на фронті», але з акцентом на звичну декларативну модель, а не на низькорівневі binding'и. Має сенс спробувати на ізольованому віджеті або внутрішньому інструменті, перш ніж ставити на весь SPA — toolchain WASM досі вимагає дисципліни в CI та розмірі артефакта.