Clay – biblioteca de layouts de UI

• Introducción a Clay

  • Clay es una biblioteca de auto-layout de UI estilo flexbox escrita en C.
  • Ofrece una sintaxis declarativa y rendimiento a nivel de microsegundos.
  • El layout de esta página web también está construido actualmente con Clay.

• Características principales

  • Alto rendimiento

    • Soporta layouts responsivos estilo flexbox.
    • Puede usarse en C/C++ como un solo archivo .h, y puede compilarse a un archivo .wasm de 15 kb.
    • Está compuesta por unas 2000 líneas de código C99 y no tiene dependencias, incluida la biblioteca estándar de C.
    • Puede usarse con distintos renderers como Raylib, WebGL Canvas y HTML.
    • Ofrece una salida flexible que puede componerse fácilmente en motores o entornos personalizados.

  • Sintaxis declarativa

    • Proporciona una sintaxis declarativa flexible y fácil de leer con una jerarquía anidada de elementos de UI.
    • Permite mezclar elementos con código C estándar, como bucles, condicionales y funciones.
    • Permite crear una biblioteca de componentes reutilizables con elementos básicos de UI como texto, imágenes y rectángulos.

  • Alto rendimiento

    • Es lo suficientemente rápida como para recalcular toda la UI en cada frame.
    • Tiene un uso de memoria pequeño de 3.5mb gracias a asignación estática y reutilización. No usa malloc/free.
    • Simplifica las animaciones y el diseño de UI responsiva al evitar los hacks de rendimiento habituales.

• Independencia de renderer y plataforma

  • Produce un arreglo ordenado de comandos básicos de renderizado como RECTANGLE, TEXT e IMAGE.
  • Puedes escribir tu propio renderer en unos cuantos cientos de líneas de código, o usar los ejemplos incluidos como Raylib y WebGL canvas.
  • También se ofrece un renderer HTML, y la página que estás viendo ahora es un ejemplo de ello.

• Herramientas de depuración integradas

  • Incluye una herramienta de depuración integrada estilo "Chrome Inspector".
  • Permite revisar en tiempo real la jerarquía y configuración del layout.
  • Puedes probarla ahora mismo presionando la tecla "d".

[GN⁺]

Opiniones en Hacker News

• Impresiona que se pueda crear algo genial con unos pocos miles de líneas de código. Prefiero CSS Grid antes que Flex, así que hice una biblioteca de layout con CSS Grid en Nim. Planeo comparar Clay con el algoritmo de layout. Me pregunto si será posible exponer una interfaz en C

  • La razón por la que me gusta CSS Grid es que puede imitar formatos como este
  • Enlace de GitHub

• Hay un botón para cambiar entre HTML y Canvas, pero en iOS Safari + Dark Reader la página HTML sí se convierte al modo oscuro y la página Canvas no. Eso le quita un poco del impacto

• Vi un excelente video de YouTube hecho por el desarrollador. Muy impresionante

  • Enlace de YouTube

• La idea de separar la lógica de UI del conjunto de comandos de dibujo es muy útil y versátil. La vi por primera vez en microui, y fue fácil usar la biblioteca en el navegador con WASM y Canvas2D

  • La idea de hacer el layout en WASM y renderizarlo como HTML es excelente
  • Enlace de microui

• Después de la animación, no se puede seleccionar nada del texto. Parece que el foco fue robado

• En el sitio web, si haces clic derecho o clic del medio en los enlaces, se comportan como si fuera clic izquierdo

• Está bien como primer borrador. Es una pena que la salida HTML esté compuesta solo por elementos div. Estaría bien que se pensara un poco más en la accesibilidad. Cuando intentas seleccionar texto, la selección se quita por el re-renderizado

• Está genial que esté implementado en C en 2000 líneas de código y sin dependencias. Pensé si no sería posible implementarlo de forma más segura con Haskell/OCaml

• También existe taffy, escrito en Rust, y se están desarrollando bindings para C

  • Enlace de taffy

• No soy desarrollador frontend, así que me cuesta entender por qué este enfoque es mejor que usar CSS directamente o usar un framework/biblioteca de CSS. Ya existen cientos de frameworks de CSS, y parece que hacen algo como esto