Clay – Biblioteca de layout de UI

• Introdução ao Clay

  • Clay é uma biblioteca de layout automático de UI no estilo flexbox, escrita em C.
  • Oferece sintaxe declarativa e desempenho na faixa de microssegundos.
  • Atualmente, o layout desta página da web também é construído com Clay.

• Principais recursos

  • Alto desempenho

    • Suporta layouts responsivos no estilo flexbox.
    • Pode ser usado em C/C++ com um único arquivo .h e pode ser compilado em um arquivo .wasm de 15 kb.
    • É composto por cerca de 2000 linhas de código C99 e não tem dependências, incluindo a biblioteca padrão de C.
    • Pode ser usado com vários renderizadores, como Raylib, WebGL Canvas e HTML.
    • Fornece uma saída flexível que pode ser facilmente integrada a mecanismos ou ambientes personalizados.

  • Sintaxe declarativa

    • Oferece uma sintaxe declarativa flexível e fácil de ler, com uma hierarquia aninhada de elementos de UI.
    • É possível misturar elementos com código C padrão, como loops, condicionais e funções.
    • É possível criar uma biblioteca de componentes reutilizáveis com elementos básicos de UI, como texto, imagem e retângulo.

  • Alto desempenho

    • É rápido o suficiente para recalcular toda a UI a cada frame.
    • Tem baixo uso de memória, de 3,5 MB, por meio de alocação estática e reutilização. Não usa malloc/free.
    • Simplifica animações e design de UI responsiva ao evitar truques de otimização tradicionais.

• Independência de renderizador e plataforma

  • Gera um array ordenado de comandos básicos de renderização, como RECTANGLE, TEXT e IMAGE.
  • Você pode escrever seu próprio renderizador com algumas centenas de linhas de código ou usar os exemplos fornecidos, como Raylib e canvas WebGL.
  • Também fornece um renderizador HTML, que é o exemplo da página que você está vendo agora.

• Ferramenta de depuração integrada

  • Inclui uma ferramenta de depuração embutida no estilo "Chrome Inspector".
  • É possível verificar em tempo real a hierarquia e a configuração do layout.
  • Você pode experimentar agora mesmo pressionando a tecla "d".

[GN⁺]

Comentários do Hacker News

• É impressionante que seja possível criar algo incrível com alguns milhares de linhas de código. Prefiro CSS Grid a Flex, então fiz uma biblioteca de layout CSS Grid em Nim. Pretendo comparar os algoritmos de layout dela com os do Clay. Fico curioso se seria possível expor uma interface em C

  • Gosto de CSS Grid porque ele pode imitar formatos como este
  • Link do GitHub

• Há um botão para alternar entre HTML e Canvas, mas no iOS Safari + Dark Reader a página HTML é convertida para o modo escuro, enquanto a página Canvas não. Isso reduz um pouco o impacto

• Assisti a um excelente vídeo no YouTube feito pelo desenvolvedor. Fiquei muito impressionado

  • Link do YouTube

• A ideia de separar a lógica da UI do conjunto de comandos de desenho é muito útil e versátil. Vi isso pela primeira vez no microui, e com WASM e Canvas2D foi possível usar a biblioteca facilmente no navegador

  • A ideia de fazer o layout em WASM e renderizar em HTML é excelente
  • Link do microui

• Depois da animação, nenhum texto pode ser selecionado. Parece que o foco foi roubado

• No site, clicar com o botão direito ou do meio nos links funciona como se fosse clique esquerdo

• Está bom para um primeiro rascunho. É uma pena que a saída HTML seja composta apenas por elementos div. Seria bom considerar um pouco mais a acessibilidade. Ao tentar selecionar texto, a seleção é desfeita por causa da re-renderização

• É legal que isso tenha sido implementado em C com 2000 linhas de código e sem dependências. Pensei se não seria possível implementá-lo de forma mais segura em Haskell/OCaml

• Também existe o taffy, escrito em Rust, e os bindings para C estão em andamento

  • Link do taffy

• Não sou desenvolvedor frontend, então é difícil entender por que essa abordagem é melhor do que usar CSS diretamente ou usar um framework/biblioteca CSS. Já existem centenas de frameworks CSS, e isto parece fazer a mesma coisa