XMLUI
(blog.jonudell.net)- XMLUI aplica ao web moderno o modelo de desenvolvimento por componentes do Visual Basic, permitindo criar apps web sem conhecimento de React e CSS de forma simples
- O XMLUI permite combinar facilmente vários componentes com marcação XML e oferece suporte a data binding reativo, gerenciamento de temas e extensão de schema
- Por meio do Model Context Protocol (MCP), é possível colaborar com IA para aumentar a eficiência do desenvolvimento e melhorar a manutenibilidade do código
- Ao simplificar o ecossistema complexo do React, o XMLUI oferece um ambiente em que até não especialistas podem desenvolver UI e apps com facilidade
- É fácil de implantar e expandir, e até desenvolvedores que não dominam React e CSS podem realizar vários projetos web e implementações de CMS
Introdução e visão geral
O projeto XMLUI é uma tentativa de trazer para o ambiente web a forma intuitiva de composição de componentes encontrada no Visual Basic dos anos 1990. Naquela época, mesmo quem não era programador profissional podia conectar vários componentes e criar softwares úteis com facilidade usando o Visual Basic. Já no ambiente web, esse mesmo nível de usabilidade e de ecossistema não chegou a se concretizar. O XMLUI encapsula componentes React e CSS, permitindo desenvolver apps web apenas com marcação em XML.
A seguir, um exemplo com algumas linhas 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>
Com cerca de 12 linhas de XML, já é possível expressar as seguintes tarefas:
- Preencher automaticamente as opções de um Select por meio de chamadas de API
- Obter dados de outra API usando o valor do Select
- Extrair apenas campos específicos do resultado da API e vinculá-los em formato de tabela
O XMLUI tem características modernas, baseadas em componentes e reativas, mas ainda assim permite que o usuário desenvolva e faça manutenção sem conhecimento interno de React ou CSS. Esse é um diferencial importante para reduzir as barreiras do ecossistema JavaScript tradicional.
Ecossistema de componentes
Passado e presente
Na era do Visual Basic, era fácil combinar em um app vários elementos de construção (componentes), como gráficos, rede, acesso a dados e reprodução de mídia. Porém, esse ecossistema produtivo de componentes não foi totalmente transportado para a web. Hoje, componentes baseados em React são amplamente usados na web, mas ainda exigem capacidade de desenvolvedor especialista. O XMLUI encapsula esses componentes React para que qualquer pessoa possa usá-los facilmente.
Componentes personalizados
O XMLUI oferece não apenas uma variedade de componentes embutidos, mas também permite definir componentes manualmente e combiná-los e reutilizá-los conforme necessário. Por exemplo, é possível definir assim um componente TubeStops que mostra informações sobre estações do metrô de Londres:
<Component name="TubeStops">
<DataSource ... />
<Text variant="strong">{...}</Text>
<Table ... >
<Column ... />
</Table>
</Component>
TubeStops busca dados da API para cada nome de linha e os exibe em formato de tabela. Na marcação real, a legibilidade é alta, e quando o código passa de 100 linhas, é possível refatorá-lo em componentes para facilitar a manutenção. Recentemente, com a ajuda de LLMs (large language models), a refatoração de componentes e a manutenção do código ficaram ainda mais flexíveis.
Binding reativo e desenvolvimento declarativo
No XMLUI, mudanças nos dados e nos valores da UI são vinculadas automaticamente (Reactive Data Binding). Por exemplo, quando a seleção do componente Select muda, o endereço da API que o referencia (url do DataSource) também é atualizado automaticamente, fazendo uma nova consulta aos dados. Esse modo de funcionamento é semelhante a referências de células no Excel.
É preciso se acostumar com o paradigma de desenvolvimento declarativo em vez do estilo imperativo tradicional, mas, depois disso, a experiência de desenvolvimento se torna rápida e intuitiva. Por exemplo, ao implementar uma funcionalidade de busca, é fácil criar uma estrutura em que os dados são sincronizados em tempo real e refletidos na tabela apenas com a mudança de valor da caixa de entrada, sem botão.
Sistema de temas
No início, o interesse pelo sistema de temas não era tão grande, mas o recurso de gerenciamento de temas do XMLUI é muito poderoso. Mesmo sem escrever CSS, é possível gerenciar de forma consistente, com base em variáveis, cores, fundos, espaçamentos, fontes etc. de cada componente. Por exemplo, é possível definir a cor de um botão de forma diferente conforme o contexto e o estado (como hover).
Os temas permitem controle detalhado em formas como color-primary, backgroundColor-Button etc., possibilitando definir facilmente a paleta geral de cores da UI e aplicá-la de forma global ou específica.
Uso de scripts
O XMLUI não é inteiramente declarativo. Assim como no Visual Basic, ele permite a adoção parcial de scripts simples (principalmente JavaScript), usados, por exemplo, para processar respostas de API (transformResult) e renderização condicional. Isso tem um nível de dificuldade que desenvolvedores em geral conseguem usar bem, sem exigir complexidade de especialista.
Model Context Protocol (MCP) e colaboração com IA
À pergunta “Agora que LLMs já criam apps React diretamente, qual é o sentido do XMLUI?”, o autor destaca o valor do XMLUI em termos de acessibilidade do código, manutenibilidade e colaboração.
O MCP (Model Context Protocol) fornece um servidor para que agentes como LLMs possam pesquisar, compreender e citar código, documentação e exemplos de XMLUI. Com isso, IA e desenvolvedores conseguem se comunicar dentro da mesma rede de significados e coordenar a geração e modificação gradual do código de forma automatizada.
- Ex.: é possível avançar no desenvolvimento consultando e recebendo respostas do LLM imediatamente sobre uso de recursos específicos, exemplos, documentação e casos de uso
Também são fornecidas diretrizes para colaborar corretamente com LLMs. Entre elas estão discutir antes de propor código, usar apenas exemplos documentados e limitar estilizações desnecessárias. Além disso, o site de documentação oferece uma seção "How To" e integração com MCP, criando uma estrutura acessível também para IA.
Gerenciamento de conteúdo e aplicação em CMS
Com o XMLUI, também é fácil montar sites e CMS, e mesmo sem conhecimento de React ou Next.js fica simples fazer alterações cotidianas em páginas e manutenção. Na prática, o site oficial, demos e documentação do XMLUI são todos produzidos e mantidos com o próprio XMLUI.
É prático porque código, explicação e demo em tempo real podem ser oferecidos juntos em um mesmo documento.
Expansibilidade
Por padrão, o XMLUI encapsula vários componentes React, mas também é fácil encapsular novos componentes externos. Como exemplo, o editor avançado de documentos Tiptap foi facilmente encapsulado como o TableEditor do XMLUI. Na prática, isso permite resolver com facilidade, por meio de um editor visual, partes difíceis da edição em Markdown, como a criação de tabelas.
Desse modo, embora antes os papéis de quem desenvolvia componentes e de quem desenvolvia soluções fossem claramente separados, com o XMLUI até desenvolvedores em geral podem expandir e combinar diretamente componentes úteis de UI.
Implantação
A implantação de apps XMLUI é muito simples.
- Configuração mínima: basta ter Main.xmlui, index.html e o arquivo JS do XMLUI
- Pode-se usar qualquer servidor web estático, e ele pode ser executado diretamente a partir de um bucket AWS S3
- Um ambiente de servidor complexo não é obrigatório, e, se necessário, também é possível configurar servidor local adicional, proxy CORS etc.
Desenvolvimento web para todos
O criador do XMLUI, Gent Hito, vem se dedicando a reduzir as barreiras de entrada em ambientes de desenvolvimento em empresas como /n software e CData.
- /n software: uso facilitado de componentes de rede
- CData: simplificação do acesso a dados
- XMLUI: simplificação do desenvolvimento de UI
Nos últimos 20 e poucos anos, o desenvolvimento de UI para a web ficou cada vez mais especializado e complexo, mas o XMLUI foi projetado para que, mesmo sem ser especialista, desenvolvedores de soluções possam criar facilmente suas próprias UIs e apps. Na prática, ele pode ser aplicado imediatamente em vários exemplos, como dashboards relacionados ao CoreSSH.
É fortemente recomendado para todos os desenvolvedores que desejam um ambiente mais simples para criar apps web, especialmente criadores de soluções não especialistas, desenvolvedores júnior e desenvolvedores com foco em backend.
1 comentários
Opiniões do Hacker News
Jon está no setor há muito tempo, e eu sou fã dele. É alguém experiente, com muita vivência, e vale a pena ouvir o que ele tem a dizer. Sou fã de web components, mas acho que o motivo de o React dominar é que o ambiente continua pouco acessível para desenvolvedores que antes conseguiam aproveitar bem componentes no estilo do antigo Visual Basic. Esse é o ponto mais importante deste texto. As explicações técnicas também importam, mas ele acertou em cheio na essência de por que esse tipo de tentativa é necessário. Ainda resta ver se o XMLUI vai oferecer a abstração certa para esse público. Mesmo assim, já é divertido ver esse tipo de desafio
Por volta de 2014, o Polymer já teve uma tentativa parecida. Por exemplo, implementava requisições de rede com componentes como
<iron-ajax>link do iron-ajax. Também houve uma época em que o Adobe Flex era muito popular, e hoje ele sobrevive como Apache Royale link do Apache Royale. A Microsoft também teve XAML, NetUI e FlexUI, e a interface do Office 2007 também foi feita dessa forma. Em teoria, tudo isso era muito elegante, mas na prática sempre achei que essas abstrações baseadas em markup funcionavam pior para iniciantes do que uma abordagem code-first como JSXFico ao mesmo tempo com a sensação de “estamos reinventando o HTML de novo” e de “isso parece algo que me seria útil agora mesmo”. O ser humano é naturalmente multifacetado
Contribuí para o KDE em open source por 7 anos com Qt C++. Isso me lembra os arquivos
.uido QtWidgets, isto é, arquivos de UI customizados que seguem um esquema XML específico. Depois veio o QML, mas achei pouco intuitivo e perdi o interesse. Ainda assim, continuo achando que usar XML para definir UI faz sentido, e entendo por que isso ainda é usado em ambientes de grande escala.ui. Nunca sentiram que havia motivo suficiente para migrar para QMLNa minha opinião, a melhor abordagem de GUI é a do JUCE. Todos os elementos de UI são classes C++, com funções de desenho separadas. Novos elementos podem ser criados compondo outros elementos em mais uma classe, e o editor gera o código-fonte automaticamente. Coisas como botões têm grandes blocos de if…else para desenhar estados diferentes (hover, pressed, active, disabled etc.). Internamente, usa bibliotecas finas de desenho como Metal/OpenGL/DirectX. Esse estilo totalmente imperativo é revigorante. Dá para colocar breakpoint em qualquer lugar e ver na hora com que parâmetros algo foi chamado e como está sendo executado. Também é fácil exportar resultados intermediários de renderização para imdraw. Tirando o antialiasing de fontes, o rendering é praticamente pixel-perfect em quase todas as plataformas. Já esse estilo em XML apresentado aqui é o tipo de mágica dependente de framework que eu sempre tento evitar. Tenho quase certeza de que, depois de só três updates, o layout vai começar a sair um pouco do lugar. Em vez de o usuário controlar o layout diretamente, ele fica à mercê do framework. O Electron sofre um pouco menos com isso por estar sobre tecnologia antiga e consolidada (como CSS), mas fora disso você vive tendo dificuldades para controlar layout
JUCE::Componentparece equivalente a elementos de DOM/canvas, então talvez dê para compará-lo à plataforma web. O XMLUI talvez devesse ser comparado, na verdade, a sistemas de UI declarativa sobre JUCE (GUI Magic, JIVE, VITRO). UI declarativa e imperativa não são mutuamente exclusivas. Ambientes como SwiftUI e UIKit usam as duasSenti falta de uma menção a XSLT. Acho que isso é importante para explicar o tamanho do salto atual a quem já passou pela época de pensar em estilizar/transformar XML. Como o Jon Udell já escreveu sobre XSLT link de referência, até parece que ele omitiu isso de propósito desta vez, mas não sei bem por quê
Recentemente estou fazendo algo parecido com HTML, web components e signals. É um projeto chamado Heximal link do Heximal. Acho que, se você adicionar expressões, templates, reatividade e estrutura de componentes ao HTML para criar apps ou páginas extremamente modulares e declarativos, isso vira uma base excelente. Muitos desses recursos adicionais ao HTML também poderiam ser padronizados
Acho que o
uiSchemado RJSF mostrou um bom caminho como camada de apresentação para complementar a definição de modelo dojsonSchemalink de referência do uiSchema. O design me impressionou, e lembro de ter achado surpreendente que isso não tenha se espalhado maisEstou especialmente animado com o que ainda não está visível. Além de engenharia sólida, parece haver um cuidado real com os programadores WYSIWYG (desenvolvedores que montam UI de forma intuitiva). Acho que foi graças ao Visual Basic, quando eu era criança, que consegui entrar na programação. Sem a complexidade dos ponteiros em C++, dava para fazer muita coisa de forma fácil e quase mágica. Espero que isso também leve o desenvolvimento web a uma abordagem mais voltada a iniciantes, com os compromissos certos com o mundo real, sem abrir mão de reatividade e fluidez. O que acho ainda mais interessante é https://docs.xmlui.com/mcp. Ferramentas como Claude podem reduzir a quantidade de tokens necessária para gerar código de UX/dashboard, produzindo código mais conciso. Vou testar isso a partir de hoje
XAML (especialmente a versão mais limitada do Silverlight) podia ser realmente divertido quando bem utilizado. Mas também podia ser horrível quando usado da forma mais fácil e óbvia — e ao mesmo tempo ineficiente. Talvez tenha sido esquecido por causa do HTML5 ou pela falta de ferramentas. Boas ferramentas deveriam ajudar até iniciantes a chegar ao sucesso, e o XAML falhava nisso