GUI de modo imediato escrita em Rust, Egui

• egui é uma biblioteca de GUI em modo imediato (Immediate Mode) escrita em Rust, que funciona em ambientes web e nativos
• Na web, é compilada para WebAssembly e renderizada via WebGL; em ambientes nativos, oferece suporte a várias plataformas, como Mac, Linux e Windows
• Implementada inteiramente em Rust puro, sem DOM, HTML, JS ou CSS
• Projetada para ser fácil de usar, altamente portável e oferecer desempenho rápido

Principais características

1. Modo imediato (Immediate Mode)

• Uma abordagem que simplifica a criação de GUIs e torna o fluxo de código mais conciso
• Exemplo:

  if ui.button("Save").clicked() {  
      my_state.save();  
  }  
  

• Não é necessário armazenar o estado do botão nem usar callbacks
• O modo imediato melhora a usabilidade e reduz a complexidade, embora tenha algumas limitações em layout e desempenho

2. Compatibilidade entre plataformas

• Web: funciona via WebAssembly e WebGL
• Nativo: oferece suporte a Mac, Linux, Windows, Android etc.
• Pode ser integrado a game engines (por exemplo, integração com Bevy)

3. Integração com o ecossistema Rust

• Fornece o framework oficial eframe:
• Permite escrever aplicações web e nativas com o mesmo código
• Dependências leves:
• O egui usa apenas dependências mínimas do Rust, como ab_glyph e ahash
• Dependências pesadas são separadas em crates distintos (egui_extras etc.)

Principais recursos

• Widgets: botões, sliders, checkboxes, botões de opção, edição de texto, seletor de cores etc.
• Layout: suporte a organização horizontal, vertical, por colunas e quebra automática de linha
• Edição de texto: multiline, copiar/colar, suporte a emoji
• Janelas: mover, redimensionar, minimizar/fechar
• Renderização: texto e formas com anti-aliasing
• Acessibilidade: suporte a leitores de tela por meio da integração com o AccessKit

Vantagens e desvantagens

• Vantagens
  • Simplicidade: permite criar GUIs com código conciso, sem callbacks
  • Portabilidade: o mesmo código pode ser executado em ambientes web e nativos
  • Usabilidade: não há problemas de sincronização entre o estado da aplicação e o estado da GUI
• Desvantagens
  • Complexidade de layout: devido à natureza do modo imediato, layouts complexos exigem trabalho adicional
  • Uso de CPU: como é necessário calcular todo o layout a cada frame, pode haver queda de desempenho em UIs grandes

Público-alvo

• Desenvolvedores que querem criar uma GUI simples rapidamente
• Usuários que querem adicionar uma GUI a uma game engine ou projeto baseado em Rust
• Autores de aplicações que precisam oferecer suporte tanto para web quanto para ambientes nativos

Explicação adicional sobre o modo imediato

• Diferentemente do modo retido (retained mode) baseado em callbacks, o modo imediato processa o estado de forma imediata a cada frame
• Exemplo: if ui.button("Save").clicked() { save(); }
• Vantagem: o fluxo de código fica mais simples e não há problemas de sincronização de estado
• Desvantagem: o cálculo de layout é mais complexo e pode impactar o desempenho em UIs grandes

[GN⁺]

Comentários no Hacker News

• Tentei usar um framework em Rust para entender problemas matemáticos, mas tive dificuldade porque o ciclo editar-compilar-executar é longo demais. Fico me perguntando se dividir o projeto em módulos ajudaria

• Se o navegador não oferece suporte a renderização subpixel, bibliotecas de renderização de UI baseadas em canvas ficam em desvantagem em relação às baseadas em DOM, exceto em dispositivos de alta resolução. A biblioteca egui também reconhece esse problema

• A página de demonstração compilada para o navegador é tecnicamente impressionante, mas é difícil imaginar as possibilidades de apps feitos com egui. Fico curioso para ver exemplos interessantes de uso do egui

• No Natal, cometi uma travessura e forcei o unwrap de Option em vez de usar pattern matching, o que causou um erro. Isso aconteceu na versão mobile do Brave

• O suporte a internacionalização é limitado. Por exemplo, ao colar o "hello" em árabe, ele aparece como quadradinhos

• Fico curioso sobre o que significa "modo imediato". O método de adicionar widgets à UI usa .add(). Será que uma API fluente de builder para esses widgets é o que o torna "modo imediato"?

• Fico curioso sobre como depurar esse tipo de interface no navegador. Será que dá para depurar como JavaScript ou como WebAssembly em C++?

• Há um problema com o redimensionamento da janela. No exemplo "Highlighting", ao clicar na área de arraste no canto inferior direito, a seta diagonal vira uma seta vertical e só permite redimensionar na vertical. Em outros exemplos padrão também parece que deveria ser possível redimensionar na vertical e na horizontal ao mesmo tempo, mas não dá para ajustar na vertical

• A resposta à entrada é muito lenta. Ao digitar rápido, o texto não acompanha. Não é possível selecionar nem copiar texto, o que é um grande problema para uma GUI personalizada. Desejo a todos um feliz fim de ano