BookinglyTech News
Software

web-tui-kit 1.0: un sistema de diseño para navegador sin framework

El proyecto traslada la estética de debconf, dialog y whiptail al navegador con CSS, HTML semántico y JavaScript opcional, y define un contrato público que sigue SemVer.

3 min de lecturaDev.to0 vistas

Quien haya visto un instalador de Debian en modo texto reconoce la estética: colores apagados, bordes duros, todo texto y menús navegables con teclado. Un desarrollador ha publicado web-tui-kit, un sistema de diseño para navegador que lleva ese lenguaje visual a aplicaciones modernas sin atarse a React, Vue ni ningún otro framework. Va por la versión v1.0.1 y está bajo licencia MIT.

Qué es y qué no es

No es un framework de componentes, ni un runtime, ni un gestor de estado. Es CSS, HTML semántico y un poco de JavaScript opcional. La aplicación enlaza dos hojas, tokens.css y tui.css, y si necesita los realces de teclado añade tui.js con defer. No hay paso de build obligatorio. React, Vue y las plantillas renderizadas en servidor consumen el mismo marcado y las mismas clases en lugar de implementaciones separadas por framework.

La parte interesante es el contrato público. A partir de la 1.0 el proyecto define explícitamente de qué puede depender quien lo integra: tokens CSS, clases públicas, relaciones del marcado semántico, data attributes, eventos del navegador y comportamiento de interacción. Eso se rige por SemVer, así que un parche no puede renombrar una clase ni cambiar el contrato de un evento porque por dentro siga viéndose bien. El autor lo justifica pensando en varias aplicaciones que compartan el sistema y también en asistentes de código que generan o modifican interfaz: una referencia estable sirve más que decirle a un consumidor automático que copie lo que haya ese día en main.

Pruebas y artefactos

Cuando una interfaz pasa a ser dependencia de otras aplicaciones, las capturas de pantalla no bastan. El repositorio mantiene líneas base de regresión visual en Chromium para las composiciones canónicas, comprueba la interacción en Chromium y Firefox, y ejecuta chequeos de regresión semántica de accesibilidad sobre roles calculados por el navegador, nombres accesibles, relaciones de etiquetas, estados nativos y semántica de progreso. Añade pruebas representativas en pantalla estrecha y táctil, con una línea base grabada en Chrome para Android para la rama estable 1.0. Las recetas de integración con React, Vue y renderizado en servidor son fixtures ejecutables, no fragmentos de documentación que nadie corre.

El autor es explícito en que esas comprobaciones no son una certificación WCAG ni una evaluación completa con productos de apoyo: son evidencia sobre semántica concreta en determinados navegadores.

Las releases se tratan como artefactos. v1.0.1 genera un ZIP y su checksum SHA-256, y antes de publicar se ejecutan las pruebas del proyecto, la validación de documentación, las regresiones de navegador, la verificación de las recetas y las comprobaciones del propio artefacto. Para consumo reproducible se puede fijar una versión inmutable con git clone --branch v1.0.1 --depth 1. Para probarlo en local basta clonar y servir con python3 -m http.server 8000 y abrir /demo/.

El autor dice que ahora le resulta más útil la crítica técnica externa que seguir añadiendo funciones, y pide opinión sobre dos cosas concretas: si el límite declarado del contrato público es demasiado amplio o demasiado estrecho, y si el vendorizado directo desde un tag resulta práctico para una biblioteca de este tipo. No es una pregunta menor: ese contrato es justo lo que decidirá si compensa adoptarla.