Construindo interfaces elegantes com ClojureScript, React e UIx

Durante a Clojure South, João Lanjoni, Engenheiro de Software no Nubank, abordou um desafio central do desenvolvimento web moderno: como combinar a ergonomia do ClojureScript com a maturidade do React para construir interfaces escaláveis e de alta performance.

Segundo João, a solução é o UIx, uma ferramenta que representa a nova geração de pontes que alinham ainda mais o universo Clojure ao ecossistema React. Em sua sessão, ele detalhou o contexto, as limitações das abordagens anteriores e o valor do UIx como um novo e eficiente ponto de entrada para desenvolvedores React no ClojureScript.

De 2013 até aqui: uma história entre React e ClojureScript

Desde o seu lançamento em 2013, o React redefiniu a estrutura das aplicações frontend ao introduzir conceitos como reatividade consistente. A comunidade ClojureScript respondeu rapidamente com interfaces idiomáticas como o Reagent, que se tornou o padrão de fato devido à sua solidez, oferecendo uma interface minimalista entre ClojureScript e React através da sintaxe baseada em Hiccup para definir componentes. Com a chegada dos componentes funcionais e hooks, por volta de 2019, novas interfaces surgiram para oferecer uma forma direta de usar componentes funcionais (em vez dos antigos componentes baseados em classe).

No entanto, à medida que o React evoluiu continuamente para padrões modernos — incluindo renderização concorrente, componentes funcionais e novas formas de gerenciar o estado — o Reagent permaneceu atado aos componentes de classe, principalmente por questões de retrocompatibilidade. Esse descompasso resultou em algumas limitações, como gargalos de performance em bases de código grandes (devido ao processamento do Hiccup em tempo de execução), dificuldades com componentes funcionais e uma interoperabilidade prejudicada com bibliotecas modernas do React (como Material UI, Mantine e Ant Design), aumentando a distância entre os dois ecossistemas.

O que muda com o UIx

O UIx surge para resolver essa divergência. Atuando como uma interface fina entre o ClojureScript e o React moderno, seu foco é técnico e pragmático: ele oferece uma camada de abstração mínima, performance mais previsível e o uso direto de componentes funcionais e hooks. Além disso, garante interoperabilidade nativa com o ecossistema React, permitindo que o ciclo de vida e o gerenciamento de estado sejam tratados diretamente pelo próprio React.

“Se o React já gerencia bem o estado e o ciclo de vida, por que não deixá-lo fazer isso?”

João Lanjoni, Engenheiro de Software no Nubank

Em vez de criar um framework completo ou adicionar abstrações desnecessárias, o UIx é uma ponte leve que aproveita o que o React moderno tem de melhor, resultando em um código ClojureScript com sintaxe idiomática, mas comportamento idêntico ao React moderno.

Estrutura de componentes UIx

Na prática, o UIx centraliza a construção de componentes em dois elementos: defui para declarar componentes React e $ para renderizar elementos de forma explícita e leve. O corpo dos componentes processa as props de maneira idêntica ao React. Hooks como o useState são expostos usando as convenções idiomáticas do ClojureScript (como use-state), com o UIx cuidando da tradução para as APIs nativas do React.

Essa ergonomia combina o melhor da sintaxe do ClojureScript com a arquitetura do React, o que, segundo João, elimina a necessidade de treinar desenvolvedores React nos detalhes internos de camadas como Reagent ou Re-frame, mantendo o modelo mental alinhado ao padrão de mercado do React.

Performance em números

Um ponto alto da apresentação foi o gráfico criado por Roman Liutikov, mantenedor do UIx, comparando a profundidade da pilha de chamadas (call stack depth) ao renderizar um componente simples em React puro, UIx e Reagent.

O React exibe o caminho mais curto; o UIx, por adicionar apenas uma camada fina, o segue de perto. Em contraste, o Reagent apresenta uma pilha de chamadas significativamente mais profunda devido à interpretação do Hiccup em tempo de execução. Embora a diferença seja mínima em aplicações pequenas, o impacto na previsibilidade e na performance torna-se notável e cresce em produtos com centenas ou milhares de componentes.

Quem já está usando UIx em produção

João apresentou três exemplos do mundo real, todos destacados na página oficial do projeto:

• Metosin, uma das maiores consultorias de Clojure na Europa;
• Pitch, uma plataforma de apresentações baseada em IA;
• Cognition, uma plataforma de e-learning para desenvolvimento pessoal.

O caso da Pitch é particularmente impressionante: a equipe migrou 2.500 componentes do Reagent para o UIx, manteve a compatibilidade com o Re-frame e observou melhorias na previsibilidade e na performance.

A Metosin, por sua vez, conta com Juho Teperi, um dos principais colaboradores do Reagent. Ele criou um projeto de exemplo para um app full-stack usando Clojure e ClojureScript e escolheu o UIx para construir a interface web, utilizando inclusive o Material UI como biblioteca de componentes sem qualquer adaptador especial.

Quando alguém que ajudou a construir a ferramenta anterior começa a defender a nova abordagem, isso diz muito sobre o momento atual da tecnologia, especialmente com o lançamento de uma nova versão do Reagent que introduz componentes funcionais por padrão e uma camada de hooks mais fina (também inspirada pelo UIx).

Reduzindo a curva de aprendizado do desenvolvedor

O valor do UIx se estende à contratação e ao desenvolvimento de engenheiros, abrindo caminho para que mais profissionais entrem no ecossistema ClojureScript sem a obrigatoriedade de dominar as complexidades do Reagent, Re-frame ou do modelo de estado baseado em atoms desde o primeiro dia. Ele representa uma abordagem pragmática para reduzir barreiras sem sacrificar os benefícios de uma linguagem funcional e declarativa.

“O maior valor do UIx é permitir que desenvolvedores React escrevam ClojureScript com uma curva de aprendizado mínima.”

João Lanjoni, Engenheiro de Software no Nubank

Quando o UIx é a melhor escolha

O UIx é especialmente recomendado para aplicações frontend modernas e complexas e equipes já familiarizadas com o React. É ideal para bases de código que dependem fortemente de hooks e para projetos que exigem interoperabilidade com as bibliotecas mais recentes do React, visando um forte potencial de crescimento a longo prazo.

A biblioteca, intencionalmente simples, não tenta reinventar o gerenciamento de estado global, mantendo a compatibilidade com bibliotecas maduras do React, como Zustand e Jotai, em vez de adicionar camadas desnecessárias — ou até mesmo permitindo o uso de um hook customizado que se inscreve em um atom do Clojure para gerenciar o estado global.

Em essência, o UIx não busca substituir o React, mas sim atuar como uma ponte fina, moderna e pragmática. Seu objetivo é permitir que equipes construam frontends escaláveis com o poder do React, preservando a expressividade e a elegância da filosofia e sintaxe do Clojure. Para projetos complexos e modernos em ClojureScript, o UIx pode ser o elo que faltava.