Como Renderizar HTML e CSS em Rust Sem o Chromiuminchado

Toda vez que alguém empacota um pequeno aplicativo desktop com Electron, em algum lugar um pente de RAM chora. Mesmo alternativas como Tauri ainda dependem do WebView do sistema, que tem suas próprias peculiaridades em diferentes sistemas operacionais. Os desenvolvedores do framework Dioxus decidiram seguir o caminho difícil e escrever seu próprio mecanismo de renderização leve em Rust. Eles chamaram o projeto de Blitz.

Por que criar outro mecanismo

Chromium ou WebKit contêm gigabytes de código. Eles incluem suporte para WebGL, WebSockets, WebRTC, Bluetooth, IndexedDB e centenas de APIs de navegador. Mas se você só precisa renderizar uma interface de usuário baseada em HTML e CSS, quase tudo isso se torna lastro desnecessário.

Blitz remove tudo o que é desnecessário. O mecanismo foca em uma única tarefa: analisar HTML/CSS, calcular o layout da página e enviar o resultado para a tela ou textura GPU. Não há mecanismo JavaScript por padrão. A stack de rede é mínima e só pode carregar recursos via HTTP se você quiser explicitamente. A interação com o sistema permanece no seu código Rust.

Arquitetura Modular

Os criadores do Blitz não começaram do zero. Eles pegaram componentes comprovados da comunidade de código aberto e os montaram em um sistema unificado:

• A análise de CSS e o cálculo de estilos são tratados pelo Stylo — o mecanismo CSS do Mozilla Firefox e Servo.
• Os cálculos de layout Flexbox e CSS Grid são tratados pela biblioteca Taffy.
• A renderização de texto é feita usando Parley.
• A análise de HTML é tratada pelo html5ever.
• A renderização gráfica acontece através da abstração AnyRender e Vello.

Essa estrutura oferece flexibilidade. Se você precisa analisar HTML e determinar as dimensões dos elementos sem renderizar na tela, você só precisa dos crates blitz-dom e blitz-html. Para construir aplicativos nativos Dioxus, você integra dioxus-native.

Como fica no código

O projeto está em pré-alfa inicial, então você precisará compilá-lo a partir do código-fonte. Você pode testar os exemplos em um minuto:

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

O repositório contém vários scripts de demonstração. Por exemplo, você pode executar um visualizador de Markdown simples diretamente do console:

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

Para quem já escreve em Dioxus e quer eliminar a dependência do WebView, o repositório oferece uma build nativa. Basta adicionar um link direto à versão git no Cargo.toml:

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

Depois disso, a importação padrão use dioxus::prelude::* muda para use dioxus_native::prelude::*, e a UI é renderizada através do Blitz.

Limitações e estado atual

Construir produtos comerciais com Blitz ainda é prematuro. Os desenvolvedores alertam honestamente sobre numerous bugs e funcionalidades não implementadas. Seletores CSS básicos, Flexbox, formulários simples e variáveis CSS já funcionam. No entanto, media queries complexas ou atributos de layout específicos podem se comportar de forma imprevisível.

O projeto tem alguns pontos fortes, porém. A integração com a biblioteca AccessKit fornece suporte a leitores de tela e sistema de acessibilidade pronto para uso. E a renderização através do WGPU permite embedar interfaces HTML diretamente em engines de jogos ou cenas 3D.

Vale a pena experimentar

Blitz é projetado como uma ferramenta para quem está cansado de wrappers pesados de navegador no desenvolvimento desktop. Não vai se tornar um substituto completo do Electron tão cedo.

Por enquanto, o projeto vai agradar programadores de sistemas Rust, pesquisadores de engines gráficas e entusiastas do ecossistema Dioxus. Acompanhar o desenvolvimento do repositório vale a pena, se não for por outra razão, para ver como Stylo e Taffy evoluem para uma alternativa leve ao CEF.