Oat - biblioteca de UI ultraligera, sin dependencias y con HTML·CSS·JS semánticos

• Biblioteca de componentes UI ultraligera basada en HTML y CSS, con una estructura totalmente libre de procesos de build o dependencias de frameworks
• Con solo 6 KB de CSS y 2.2 KB de JS (comprimidos y con gzip), permite usar de inmediato los principales elementos de UI necesarios para aplicaciones web
• Aplica estilo directamente a elementos HTML semánticos como <button>, <input> y <dialog>, minimizando el uso de clases para reducir la contaminación del código
• Considera la accesibilidad (Accessibility) con soporte predeterminado para roles ARIA y navegación por teclado
• Busca una configuración de UI simple, basada en estándares y sostenible a largo plazo, alejándose de las dependencias del complejo ecosistema JS y de la sobreingeniería

---

Resumen de Oat

• Oat es una biblioteca de componentes UI semánticos ultraligera basada en HTML + CSS, totalmente libre de dependencias externas
  • No requiere frameworks, herramientas de build ni configuración del entorno de desarrollo
  • Se puede usar de inmediato con solo incluir pequeños archivos CSS y JS
• Con un tamaño aproximado de 8 KB (6 KB de CSS + 2.2 KB de JS), permite construir rápidamente la UI básica de una aplicación web
• Entre sus componentes principales se incluyen Button, Card, Dialog, Table, Tabs, Tooltip, Toast y Sidebar

HTML semántico y accesibilidad

• Los estilos se aplican automáticamente con base en etiquetas y atributos semánticos, lo que permite mantener un diseño consistente sin asignar clases
  • Ej.: aplica estilos directamente a elementos HTML base como <button>, <input> y <dialog>
  • También reconoce automáticamente atributos semánticos como role="button"
• Compatible con roles ARIA y navegación por teclado en todos los componentes
  • Refuerza la aplicación de estándares de accesibilidad para mejorar la experiencia de usuario

Cero dependencias y simplicidad

• Sin dependencias de frameworks o bibliotecas JS/CSS
  • Elimina por completo la complejidad del ecosistema Node.js y los problemas de dependencias innecesarias
  • Puede usarse directamente sin procesos de build ni gestión de paquetes
• Algunos componentes dinámicos están implementados con WebComponents, usando la mínima cantidad posible de JS

Personalización y temas

• Permite ajustar fácilmente colores y estilos del tema mediante variables CSS
  • Si se agrega el atributo data-theme="dark" al body, se aplica automáticamente el tema oscuro
• El diseño general está influido por la estética de shadcn

Contexto de creación

• Surgió del descontento con la complejidad excesiva y los problemas de dependencias de los frameworks UI de JavaScript
  • Su objetivo es evitar problemas como el “dependency hell” y el “lock-in” del ecosistema Node.js
• Fue creada para usar directamente una biblioteca UI simple, basada en estándares y mantenible a largo plazo
• Con Oat, los desarrolladores pueden implementar una configuración de UI lista para usar de inmediato, sin procesos de build innecesarios

[GN⁺]

Comentarios de Hacker News

• Me parece genial el intento de lograr los efectos correctos de una web app usando solo elementos HTML semánticos
  También me gusta que apunte al paradigma de “classless CSS”. Pero al revisar el catálogo de componentes, se ve una mezcla de elementos semánticos y básicos, etiquetas data y atributos aria, además de clases CSS, así que da la impresión de que le falta consistencia
  Aun así, me impresiona que el CSS reaccione a los atributos aria para aplicar estilos. Parece un buen ejercicio para pensar con un enfoque aria-first en lugar de depender de librerías de componentes pesadas como React
  En particular, me gusta que esta librería de componentes incluya una barra lateral nativa. La mayoría de las librerías se enfocan solo en pequeños componentes reutilizables, pero esta se coloca de forma natural junto al main con una estructura aside > nav > ul, y se ve limpia

• Me sorprendió muchísimo ver este sitio. Apenas toqué el enlace, la página cargó al instante, se sintió ridículamente rápida
  Ya me había olvidado de este nivel de velocidad en internet, y ahora hasta me dieron ganas de probar desarrollo web otra vez

  • Si vas a hacer un sitio, te recomiendo hacerlo con Astro. La velocidad de carga está brutal
  • Como referencia, Hacker News también es un buen ejemplo de esa misma sensación de rapidez

• Este proyecto se siente como la simplicidad que yo esperaba de DaisyUI, pero llevada a la práctica
  Si le sumas Datastar, podría ser una combinación muy potente basada en estándares web. Es un enfoque que se apoya en tecnologías web reales, más que en un “ecosistema”

• fosiao/rclone-webui-oat
  parece estar reemplazando al viejo y pesado rclone-webui-react, que ya no se mantiene

• El post del blog enlazado en la página principal probablemente genere una discusión más interesante que el framework en sí
  En el trabajo uso tanto Angular como Next.js, y cada vez conecto más con la perspectiva de ese texto
  Artículo relacionado: JavaScript ecosystem is a hot mess

  • Buen enlace. Es de 2021, pero todavía tiene muchas ideas vigentes
    Discusión de ese momento: hilo de HN
  • Este sitio web me encanta. Desde el clic hasta la carga completa hay 0 segundos de latencia
  • Como referencia, en 2021 ya se había discutido el mismo tema aquí

• <aside> no siempre es un elemento semántico adecuado para una barra lateral
  Su propósito original es contenido relacionado de forma indirecta con el contenido principal. A veces una barra lateral encaja con esa definición, pero no siempre

• Hay muchísimas librerías CSS semánticas drop-in de este estilo. Siempre da gusto ver un proyecto nuevo
  La calidad varía bastante, pero en este sitio hay una lista de más de 50 hojas de estilo drop-in para HTML semántico
  Enlace: colección de Drop-in Minimal CSS

  • Ah, entonces te referías a “drop-in”. No pensé que un solo guion fuera tan importante :)
  • Esto merece mucha más atención. Si soy sincero, me parece más interesante que la publicación original
  • Me encanta. Puedes recorrer cíclicamente las hojas de estilo con la flecha derecha
  • Me pregunto si de esa lista hay alguna hoja de estilo recomendable

• Este proyecto me recuerda a las primeras versiones de Bootstrap de hace 10 años
  El Bootstrap actual se ha vuelto bastante inflado, pero aquí se siente esa simplicidad de antes
  Referencia: sitio oficial de Bootstrap

• Gracias por probarlo también en navegadores antiguos. De verdad es una librería súper minimalista
  Capturas: imagen1, imagen2

  • Me da curiosidad saber si hay alguna razón por la que normalmente usas navegadores antiguos como navegador principal

• Yo también intenté algo parecido en una app, pero me di cuenta de que algunas etiquetas semánticas/funcionales todavía no tienen buen soporte en los navegadores
  Por ejemplo, en Safari usar showModal del tag dialog hace que se recalcule el layout de toda la página y sea 59 veces más lento que Chromium
  Aun así, este enfoque me sigue gustando mucho