XMLUI
(blog.jonudell.net)- XMLUI aplica el modelo de desarrollo por componentes de Visual Basic a la web moderna, permitiendo crear apps web incluso sin conocimientos de React ni CSS de forma sencilla
- XMLUI permite combinar fácilmente diversos componentes con marcado XML y admite data binding reactivo, gestión de temas y extensión de esquemas, entre otros
- A través de Model Context Protocol (MCP), permite colaborar con IA para mejorar la eficiencia de desarrollo y aumentar la mantenibilidad del código
- Al simplificar el complejo ecosistema de React, XMLUI ofrece un entorno donde incluso personas no especialistas pueden desarrollar fácilmente interfaces y apps
- Es fácil de desplegar y escalar, y permite a desarrolladores que no dominan React o CSS realizar diversos proyectos web e implementaciones de CMS
Introducción y panorama general
El proyecto XMLUI busca llevar al entorno web la forma intuitiva de combinar componentes que se veía en Visual Basic de los años 90. En ese entonces, incluso quienes no eran programadores profesionales podían conectar distintos componentes para crear software útil con facilidad. En cambio, en la web no se llegó a construir ese mismo nivel de usabilidad ni de ecosistema. XMLUI envuelve componentes de React y CSS, y permite desarrollar apps web usando solo marcado en formato XML.
A continuación, un ejemplo de unas pocas líneas de código XMLUI:
<App>
<Select id="lines" initialValue="bakerloo">
<Items data="https://api.tfl.gov.uk/line/mode/tube/status">;
</Items>
</Select>
<DataSource
id="tubeStations"
url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound";
resultSelector="stations"/>
<Table data="{tubeStations}" height="280px">
<Column bindTo="name" />
<Column bindTo="modes" />
</Table>
</App>
Con apenas unas 12 líneas de XML, ya se pueden expresar las siguientes tareas:
- Rellenar automáticamente las opciones de un Select mediante llamadas a API
- Usar el valor del Select para obtener datos desde otra API
- Extraer solo campos específicos del resultado de la API y enlazarlos en forma de tabla
XMLUI conserva características modernas, basadas en componentes y reactivas, pero permite que el usuario desarrolle y mantenga sin conocimientos internos de React o CSS. Ese es un diferenciador clave para reducir la barrera que ha levantado el ecosistema tradicional de JavaScript.
Ecosistema de componentes
Pasado y presente
En la época de Visual Basic, era fácil integrar en una app diversos elementos de construcción (componentes), como gráficos, red, acceso a datos o reproducción multimedia. Sin embargo, ese ecosistema productivo de componentes no logró trasladarse por completo a la web. Hoy se usan principalmente componentes basados en React, pero todavía requieren capacidades de desarrollo especializadas. XMLUI envuelve esos componentes de React para que cualquiera pueda usarlos fácilmente.
Componentes definidos por el usuario
XMLUI no solo ofrece una amplia variedad de componentes integrados, sino que también permite definir componentes propios y combinarlos o reutilizarlos según sea necesario. Por ejemplo, se puede definir un componente TubeStops que muestre información sobre estaciones del metro de Londres así:
<Component name="TubeStops">
<DataSource ... />
<Text variant="strong">{...}</Text>
<Table ... >
<Column ... />
</Table>
</Component>
TubeStops obtiene datos desde la API según el nombre de la línea y los muestra en formato de tabla. En el marcado real, la legibilidad es alta, y cuando el código supera las 100 líneas, se puede refactorizar en componentes para facilitar el mantenimiento. Últimamente, con la ayuda de los LLM (modelos de lenguaje de gran tamaño), la refactorización de componentes y el mantenimiento del código se han vuelto aún más flexibles.
Binding reactivo y desarrollo declarativo
En XMLUI, los cambios en los datos y en los valores de la UI se sincronizan automáticamente (Reactive Data Binding). Por ejemplo, si cambia la selección en el componente Select, la dirección de API que la referencia (url de DataSource) también se actualiza automáticamente para volver a consultar datos nuevos. Este enfoque se parece a las referencias de celdas en Excel.
Hace falta acostumbrarse al paradigma de desarrollo declarativo (Declarative), en lugar del estilo imperativo tradicional, pero una vez dominado permite una experiencia de desarrollo rápida e intuitiva. Por ejemplo, al implementar una función de búsqueda, se puede construir fácilmente una estructura en la que los cambios en el valor de una caja de entrada se conectan en tiempo real con los datos y se reflejan en una tabla, sin necesidad de botones.
Sistema de temas
Al principio no había mucho interés en el sistema de temas, pero la gestión de temas de XMLUI es muy potente. Sin escribir CSS, es posible gestionar de manera consistente, mediante variables, aspectos como color, fondo, espaciado y tipografía de cada componente. Por ejemplo, se puede definir el color de un botón de forma distinta según el contexto y el estado (como hover).
El tema permite un control detallado con formas como color-primary o backgroundColor-Button, y hace fácil definir una paleta general de colores de la UI y aplicarla de forma global o específica.
Uso de scripts
XMLUI no es completamente declarativo. Como en Visual Basic, permite la introducción parcial de scripts simples (principalmente JavaScript), por ejemplo para procesar respuestas de API (transformResult) o renderizado condicional. El nivel de dificultad es manejable para cualquier desarrollador general, sin requerir experiencia de nivel experto.
Model Context Protocol (MCP) y colaboración con IA
Ante la pregunta de “si ahora los LLM ya pueden crear apps React directamente, ¿qué sentido tiene XMLUI?”, el autor destaca el valor de XMLUI en términos de accesibilidad del código, mantenibilidad y colaboración.
MCP (Model Context Protocol) proporciona un servidor para que agentes como los LLM puedan buscar, comprender y citar código, documentación y ejemplos de XMLUI. Gracias a esto, la IA y los desarrolladores pueden comunicarse dentro de la misma red semántica y coordinar la generación y modificación gradual de código.
- Ejemplo: durante el desarrollo, es posible consultar y responder de inmediato con un LLM sobre cómo usar una función específica, ejemplos, documentación o casos de uso
También se ofrecen lineamientos para colaborar correctamente con LLM. Por ejemplo, discutir antes de proponer código, usar solo ejemplos documentados y limitar estilos innecesarios. Además, el sitio de documentación incluye una sección "How To" y una estructura integrada con MCP para que la IA también pueda acceder fácilmente.
Gestión de contenido y aplicación en CMS
Con XMLUI, también es fácil construir sitios web y CMS, y el mantenimiento y la edición cotidiana de páginas se simplifican incluso sin conocimientos de React o Next.js. De hecho, el sitio oficial de XMLUI, sus demos y su documentación están todos creados y mantenidos con XMLUI.
Es práctico porque permite ofrecer en un mismo documento código, explicación y demo en tiempo real.
Escalabilidad
Por defecto, XMLUI envuelve varios componentes de React, pero también facilita envolver nuevos componentes externos. Por ejemplo, el editor avanzado de documentos Tiptap se envolvió fácilmente como XMLUI TableEditor. En la práctica, esto permite resolver con facilidad, mediante un editor visual, partes difíciles de la edición Markdown como la creación de tablas.
Así, aunque antes los roles entre desarrolladores de componentes y desarrolladores de soluciones estaban claramente separados, con XMLUI incluso los desarrolladores generales pueden ampliar y combinar por sí mismos componentes de UI útiles.
Despliegue
El despliegue de una app XMLUI es muy sencillo.
- Configuración mínima: basta con Main.xmlui,
index.htmly el archivo JS de XMLUI - Puede usarse con cualquier servidor web estático y ejecutarse directamente desde un bucket de AWS S3
- No se requiere un entorno de servidor complejo, y si hace falta también se pueden configurar un servidor local adicional, un proxy CORS, etc.
Desarrollo web para todos
El creador de XMLUI, Gent Hito, ha trabajado en /n software, CData y otros lugares para reducir la barrera de entrada a los entornos de desarrollo.
- /n software: facilidad de uso de componentes de red
- CData: simplificación del acceso a datos
- XMLUI: simplificación del desarrollo de UI
Durante los últimos más de 20 años, el desarrollo de UI para la web se ha vuelto cada vez más especializado y complejo, pero XMULI está diseñado para que incluso quienes no son expertos puedan crear fácilmente sus propias interfaces y apps. En la práctica, puede aplicarse de inmediato a diversos ejemplos, como interfaces de dashboards relacionadas con CoreSSH.
Se recomienda ampliamente a cualquier desarrollador que quiera un entorno más sencillo para crear apps web, en especial a quienes construyen soluciones sin ser especialistas, desarrolladores junior y desarrolladores centrados en backend.
1 comentarios
Comentarios en Hacker News
Jon lleva mucho tiempo en la industria y soy fan suyo. Es una persona con mucha trayectoria y experiencia, y vale la pena escuchar lo que dice. Soy fan de los web components, pero creo que React domina porque el entorno sigue siendo difícil de abordar para desarrolladores que antes aprovechaban bien componentes al estilo de Visual Basic. Ese es el punto más importante de este artículo. La explicación técnica también importa, pero aquí se señala la esencia de por qué hace falta un intento así. Habrá que ver si XMLUI ofrece la abstracción adecuada para esos desarrolladores. Aun así, ya da gusto ver un reto como este
Hacia 2014, Polymer también intentó algo parecido. Por ejemplo, implementaba solicitudes de red con componentes como
<iron-ajax>enlace a iron-ajax. También hubo una época en que Adobe Flex estuvo muy de moda, y hoy sobrevive como Apache Royale enlace a Apache Royale. Microsoft también tuvo XAML, NetUI y FlexUI, y la interfaz de Office 2007 también se hizo así. En teoría, todo eso sonaba muy bien, pero en la práctica sentí que estas abstracciones basadas en markup eran menos efectivas incluso para principiantes que un enfoque code-first como JSXAl mismo tiempo pienso “estamos reinventando HTML otra vez” y “esto me serviría de inmediato”. El ser humano es multifacético por naturaleza
Yo contribuí al código abierto de KDE durante 7 años con Qt C++. Esto me recuerda a los archivos
.uide QtWidgets, es decir, archivos de UI personalizados que siguen cierto esquema XML. Después apareció QML, pero me pareció poco intuitivo y perdí el interés. Aun así, sigo creyendo que usar XML para definir UI tiene sentido, y entiendo por qué todavía se usa en entornos grandes.ui. Nunca sintieron razones suficientes para cambiarse a QMLEn mi opinión, el mejor enfoque para GUI es JUCE. Todos los elementos de UI son clases de C++ con funciones de dibujo separadas. Los nuevos elementos de UI se pueden crear componiendo otros elementos en otra clase, y el editor genera el código fuente automáticamente. Cosas como botones tienen grandes bloques de if…else para dibujar según el estado (hover, pressed, active, disabled, etc.). Por dentro usa bibliotecas de dibujo ligeras como Metal/OpenGL/DirectX. Este enfoque totalmente imperativo se siente refrescante. Puedes poner breakpoints en cualquier parte y ver de inmediato cómo se llama algo y con qué parámetros. También es fácil exportar resultados intermedios del render con imdraw. Salvo por el antialiasing de fuentes, el renderizado es prácticamente exacto al píxel en casi cualquier plataforma. En cambio, este enfoque en XML que presentan aquí es justo la clase de magia dependiente del framework que siempre intento evitar. Tengo la certeza de que con apenas tres actualizaciones más el layout ya empezará a desalinearse poco a poco. En vez de que el usuario controle el layout directamente, termina suplicando la misericordia del framework. Electron, al estar sobre tecnología vieja (como CSS), sufre un poco menos este problema, pero fuera de eso siempre se complica controlar el layout
Me da pena que no se haya mencionado XSLT. Creo que es importante para explicar a la gente que alguna vez pensó en estilizar/transformar XML lo enorme que ha sido el salto hasta donde estamos hoy. Viendo que Jon Udell escribió sobre XSLT enlace de referencia, hasta parece que esta vez lo omitió a propósito, aunque no entiendo bien por qué
Últimamente estoy construyendo algo parecido con HTML, web components y signals. Es un proyecto llamado Heximal enlace a Heximal. Creo que si se le agregan expresiones, plantillas, reactividad y una estructura de componentes a HTML, puede convertirse en una base excelente para crear apps o páginas muy modulares y declarativas. Muchas de las funciones añadidas a HTML también podrían estandarizarse
Creo que el uiSchema de RJSF mostró una buena dirección como capa de presentación que complementa el modelo de definición de jsonSchema enlace de referencia de uiSchema. Recuerdo haber pensado que estaba diseñado de forma impresionante, y me sorprendió que no se extendiera más
Lo que más me entusiasma son las partes que aún no se ven. Además de una ingeniería sólida, parece claro que se ha pensado en los programadores WYSIWYG (desarrolladores que arman UI de forma intuitiva). Creo que pude acercarme a la programación de niño gracias a Visual Basic. Sin la complejidad de los punteros en C++, se podían hacer muchas cosas de manera fácil y casi mágica, y ojalá esa misma línea llegue también a la programación web con un enfoque priorizando a principiantes, logrando compromisos realistas sin sacrificar capacidad de respuesta ni fluidez. Lo más interesante todavía es https://docs.xmlui.com/mcp. Herramientas como Claude podrían reducir la cantidad de tokens necesarios al generar código de UX/dashboard, produciendo código más conciso. Pienso probarlo desde hoy mismo
XAML (sobre todo la versión limitada de Silverlight) era una herramienta realmente divertida si se usaba bien. Pero si se usaba de la forma más fácil y evidente (y también más ineficiente), podía ser terrible. Probablemente quedó en el olvido por HTML5 o por la falta de herramientas. Una buena herramienta debería ayudar incluso a principiantes a llegar al éxito, y en ese sentido XAML se quedó corto