Durante a Clojure South, Jo\u00e3o 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\u00e1veis e de alta performance.<\/p>\n\n\n\n
Segundo Jo\u00e3o, a solu\u00e7\u00e3o \u00e9 o UIx, uma ferramenta que representa a nova gera\u00e7\u00e3o de pontes que alinham ainda mais o universo Clojure ao ecossistema React. Em sua sess\u00e3o, ele detalhou o contexto, as limita\u00e7\u00f5es das abordagens anteriores e o valor do UIx como um novo e eficiente ponto de entrada para desenvolvedores React no ClojureScript.<\/p>\n\n\n\n
Desde o seu lan\u00e7amento em 2013, o React redefiniu a estrutura das aplica\u00e7\u00f5es frontend ao introduzir conceitos como reatividade consistente. A comunidade ClojureScript respondeu rapidamente com interfaces idiom\u00e1ticas como o Reagent, que se tornou o padr\u00e3o de fato devido \u00e0 sua solidez, oferecendo uma interface minimalista entre ClojureScript e React atrav\u00e9s 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).<\/p>\n\n\n\n
No entanto, \u00e0 medida que o React evoluiu continuamente para padr\u00f5es modernos \u2014 incluindo renderiza\u00e7\u00e3o concorrente, componentes funcionais e novas formas de gerenciar o estado \u2014 o Reagent permaneceu atado aos componentes de classe, principalmente por quest\u00f5es de retrocompatibilidade. Esse descompasso resultou em algumas limita\u00e7\u00f5es, como gargalos de performance em bases de c\u00f3digo grandes (devido ao processamento do Hiccup em tempo de execu\u00e7\u00e3o), dificuldades com componentes funcionais e uma interoperabilidade prejudicada com bibliotecas modernas do React (como Material UI, Mantine e Ant Design), aumentando a dist\u00e2ncia entre os dois ecossistemas.<\/p>\n\n\n\n
O UIx surge para resolver essa diverg\u00eancia. Atuando como uma interface fina entre o ClojureScript e o React moderno, seu foco \u00e9 t\u00e9cnico e pragm\u00e1tico: ele oferece uma camada de abstra\u00e7\u00e3o m\u00ednima, performance mais previs\u00edvel e o uso direto de componentes funcionais e hooks. Al\u00e9m disso, garante interoperabilidade nativa com o ecossistema React, permitindo que o ciclo de vida e o gerenciamento de estado sejam tratados diretamente pelo pr\u00f3prio React.<\/p>\n\n\n\n
\n“Se o React j\u00e1 gerencia bem o estado e o ciclo de vida, por que n\u00e3o deix\u00e1-lo fazer isso?” <\/p>\n\n\n\n
Jo\u00e3o Lanjoni, Engenheiro de Software no Nubank<\/p>\n<\/blockquote>\n\n\n\n
Em vez de criar um framework completo ou adicionar abstra\u00e7\u00f5es desnecess\u00e1rias, o UIx \u00e9 uma ponte leve que aproveita o que o React moderno tem de melhor, resultando em um c\u00f3digo ClojureScript com sintaxe idiom\u00e1tica, mas comportamento id\u00eantico ao React moderno.<\/p>\n\n\n\n
Estrutura de componentes UIx<\/h2>\n\n\n\n
Na pr\u00e1tica, o UIx centraliza a constru\u00e7\u00e3o de componentes em dois elementos: defui<\/em> para declarar componentes React e $<\/em> para renderizar elementos de forma expl\u00edcita e leve. O corpo dos componentes processa as props de maneira id\u00eantica ao React. Hooks como o useState<\/em> s\u00e3o expostos usando as conven\u00e7\u00f5es idiom\u00e1ticas do ClojureScript (como use-state), com o UIx cuidando da tradu\u00e7\u00e3o para as APIs nativas do React.<\/p>\n\n\n\n
Essa ergonomia combina o melhor da sintaxe do ClojureScript com a arquitetura do React, o que, segundo Jo\u00e3o, elimina a necessidade de treinar desenvolvedores React nos detalhes internos de camadas como Reagent ou Re-frame, mantendo o modelo mental alinhado ao padr\u00e3o de mercado do React.<\/p>\n\n\n\n
Performance em n\u00fameros<\/h2>\n\n\n\n
Um ponto alto da apresenta\u00e7\u00e3o foi o gr\u00e1fico 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.<\/p>\n\n\n\n
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 \u00e0 interpreta\u00e7\u00e3o do Hiccup em tempo de execu\u00e7\u00e3o. Embora a diferen\u00e7a seja m\u00ednima em aplica\u00e7\u00f5es pequenas, o impacto na previsibilidade e na performance torna-se not\u00e1vel e cresce em produtos com centenas ou milhares de componentes.<\/p>\n\n\n\n
Quem j\u00e1 est\u00e1 usando UIx em produ\u00e7\u00e3o<\/h2>\n\n\n\n
Jo\u00e3o apresentou tr\u00eas exemplos do mundo real, todos destacados na p\u00e1gina oficial do projeto:<\/p>\n\n\n\n
\n
- Metosin, uma das maiores consultorias de Clojure na Europa;<\/li>\n\n\n\n
- Pitch, uma plataforma de apresenta\u00e7\u00f5es baseada em IA;<\/li>\n\n\n\n
- Cognition, uma plataforma de e-learning para desenvolvimento pessoal.<\/li>\n<\/ul>\n\n\n\n
O caso da Pitch \u00e9 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Quando algu\u00e9m que ajudou a construir a ferramenta anterior come\u00e7a a defender a nova abordagem, isso diz muito sobre o momento atual da tecnologia, especialmente com o lan\u00e7amento de uma nova vers\u00e3o do Reagent que introduz componentes funcionais por padr\u00e3o e uma camada de hooks mais fina (tamb\u00e9m inspirada pelo UIx).<\/p>\n\n\n\n
Reduzindo a curva de aprendizado do desenvolvedor<\/h2>\n\n\n\n
O valor do UIx se estende \u00e0 contrata\u00e7\u00e3o 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\u00e1tica para reduzir barreiras sem sacrificar os benef\u00edcios de uma linguagem funcional e declarativa.<\/p>\n\n\n\n
\n\u201cO maior valor do UIx \u00e9 permitir que desenvolvedores React escrevam ClojureScript com uma curva de aprendizado m\u00ednima.\u201d <\/em><\/p>\n\n\n\n
Jo\u00e3o Lanjoni, Engenheiro de Software no Nubank<\/em><\/p>\n<\/blockquote>\n\n\n\n
Quando o UIx \u00e9 a melhor escolha<\/h2>\n\n\n\n
O UIx \u00e9 especialmente recomendado para aplica\u00e7\u00f5es frontend modernas e complexas e equipes j\u00e1 familiarizadas com o React. \u00c9 ideal para bases de c\u00f3digo 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.<\/p>\n\n\n\n
A biblioteca, intencionalmente simples, n\u00e3o 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\u00e1rias \u2014 ou at\u00e9 mesmo permitindo o uso de um hook customizado que se inscreve em um atom do Clojure para gerenciar o estado global.<\/p>\n\n\n\n
Em ess\u00eancia, o UIx n\u00e3o busca substituir o React, mas sim atuar como uma ponte fina, moderna e pragm\u00e1tica. Seu objetivo \u00e9 permitir que equipes construam frontends escal\u00e1veis com o poder do React, preservando a expressividade e a eleg\u00e2ncia da filosofia e sintaxe do Clojure. Para projetos complexos e modernos em ClojureScript, o UIx pode ser o elo que faltava.<\/p>\n\n\n\n
<\/p>\n\n\n\n