Jak renderować HTML i CSS w Rustu bez rozdętego Chromium

Za każdym razem, gdy ktoś pakuje małą aplikację desktopową w Electron, gdzieś płacze patyk pamięci RAM. Nawet alternatywy takie jak Tauri nadal zależą od systemowego WebView, który ma swoje dziwactwa na różnych systemach operacyjnych. Deweloperzy frameworka Dioxus postanowili wybrać trudną drogę i napisać własny lekki silnik renderujący w Rust. Nazwali projekt Blitz.

Dlaczego zbudować kolejny silnik

Chromium lub WebKit zawierają gigabajty kodu. Zawierają wsparcie dla WebGL, WebSockets, WebRTC, Bluetooth, IndexedDB i setek API przeglądarki. Ale jeśli potrzebujesz tylko wyrenderować interfejs użytkownika oparty na HTML i CSS, prawie wszystko to staje się niepotrzebnym balastem.

Blitz pozbywa się wszystkiego, co zbędne. Silnik koncentruje się na jednym zadaniu: parsuj HTML/CSS, obliczaj układ strony i wyprowadzaj wynik na ekran lub teksturę GPU. Domyślnie nie ma silnika JavaScript. Stos sieciowy jest minimalny i może ładować zasoby przez HTTP tylko wtedy, gdy jawnie tego chcesz. Interakcja z systemem pozostaje w twoim kodzie Rust.

Modułowa architektura

Twórcy Blitz nie zaczynali od zera. Wzięli sprawdzone komponenty ze społeczności open-source i złożyli je w jednolity system:

• Parsowanie CSS i obliczanie stylów obsługuje Stylo — silnik CSS z Mozilla Firefox i Servo.
• Obliczenia układu Flexbox i CSS Grid obsługuje biblioteka Taffy.
• Renderowanie tekstu odbywa się za pomocą Parley.
• Parsowanie HTML obsługuje html5ever.
• Renderowanie grafiki odbywa się przez abstrakcję AnyRender i Vello.

Ta struktura zapewnia elastyczność. Jeśli potrzebujesz parsować HTML i określać wymiary elementów bez renderowania na ekranie, potrzebujesz tylko crate'ów blitz-dom i blitz-html. Do budowania natywnych aplikacji Dioxus integrujesz dioxus-native.

Jak to wygląda w kodzie

Projekt jest we wczesnej fazie pre-alfa, więc będziesz musiał zbudować go ze źródeł. Możesz wypróbować przykłady w minutę:

git clone https://github.com/DioxusLabs/blitz
cd blitz
cargo run --release --package browser

Repozytorium zawiera kilka skryptów demonstracyjnych. Na przykład możesz uruchomić prosty podglądacz Markdown bezpośrednio z konsoli:

cargo run --release --package readme ./README.md

Dla tych, którzy już piszą w Dioxus i chcą wyeliminować zależność od WebView, repozytorium oferuje natywną kompilację. Po prostu dodaj bezpośredni link do wersji git w Cargo.toml:

[dependencies]
dioxus-native = { git = "https://github.com/DioxusLabs/blitz", features = ["prelude"] }

Po tym standardowy import use dioxus::prelude::* zmienia się na use dioxus_native::prelude::*, a interfejs użytkownika renderuje się przez Blitz.

Ograniczenia i obecny status

Budowanie komercyjnych produktów z Blitz jest wciąż przedwczesne. Deweloperzy uczciwie ostrzegają o licznych błędach i niezaimplementowanych funkcjach. Podstawowe selektory CSS, Flexbox, proste formularze i zmienne CSS już działają. Jednak złożone zapytania medialne lub specyficzne atrybuty układu mogą zachowywać się nieprzewidywalnie.

Projekt ma jednak pewne mocne strony. Integracja z biblioteką AccessKit zapewnia wsparcie dla czytników ekranu i systemów ułatwień dostępu od razu po wyjęciu z pudełka. A renderowanie przez WGPU pozwala osadzać interfejsy HTML bezpośrednio w silnikach gier lub scenach 3D.

Czy warto wypróbować

Blitz jest zaprojektowany jako narzędzie dla tych, którzy są zmęczeni ciężkimi wrapperami przeglądarki w tworzeniu aplikacji desktopowych. Nie stanie się pełnym zamiennikiem Electrona w najbliższym czasie.

Na razie projekt przypadnie do gustu programistom systemowym Rust, badaczom silników graficznych i entuzjastom ekosystemu Dioxus. Śledzenie rozwoju repozytorium jest warte zachodu, choćby po to, by zobaczyć, jak Stylo i Taffy ewoluują w lekką alternatywę dla CEF.