Durante el evento Clojure South, Jo\u00e3o Lanjoni, Ingeniero de Software en Nubank, abord\u00f3 un desaf\u00edo central del desarrollo web moderno: c\u00f3mo combinar la ergonom\u00eda de ClojureScript con la madurez de React para construir interfaces escalables y de alto rendimiento.<\/p>\n\n\n\n
Seg\u00fan Jo\u00e3o, la soluci\u00f3n es UIx, una herramienta que representa la nueva generaci\u00f3n de puentes que alinean a\u00fan m\u00e1s el universo de Clojure con el ecosistema de React. En su sesi\u00f3n, detall\u00f3 el contexto, las limitaciones de los enfoques anteriores y el valor de UIx como un nuevo y eficiente punto de entrada para desarrolladores de React hacia ClojureScript.<\/p>\n\n\n\n
Desde su lanzamiento en 2013, React ha redefinido la estructura de las aplicaciones frontend al introducir conceptos como la reactividad consistente. La comunidad de ClojureScript respondi\u00f3 r\u00e1pidamente con interfaces idiom\u00e1ticas como Reagent, que se convirti\u00f3 en el est\u00e1ndar de facto gracias a su solidez, proporcionando una interfaz minimalista entre ClojureScript y React mediante una sintaxis tipo \u2033<\/span>Hiccup\u2033<\/span> para definir componentes. Con la llegada de los componentes funcionales y los hooks alrededor de 2019, surgieron nuevas interfaces para permitir el uso directo de estos componentes (en lugar de los antiguos basados en clases).<\/p>\n\n\n\n Sin embargo, a medida que React evolucion\u00f3 hacia patrones modernos \u2014incluyendo el renderizado concurrente, componentes funcionales y nuevas formas de gestionar el estado\u2014, Reagent se mantuvo ligado a los componentes de clase, principalmente por compatibilidad hacia atr\u00e1s. Este desajuste result\u00f3 en limitaciones de rendimiento en bases de c\u00f3digo grandes (debido al procesamiento de Hiccup en tiempo de ejecuci\u00f3n), problemas con los componentes funcionales y dificultades en la interoperabilidad con librer\u00edas modernas de React como Material UI, Mantine y Ant Design, ampliando la brecha entre ambos ecosistemas.<\/p>\n\n\n\n UIx surge para resolver esta divergencia. Al actuar como una interfaz delgada entre ClojureScript y el React moderno, su enfoque es t\u00e9cnico y pragm\u00e1tico: ofrece una capa de abstracci\u00f3n m\u00ednima, un rendimiento m\u00e1s predecible y el uso directo de componentes funcionales y hooks. Adem\u00e1s, garantiza una interoperabilidad nativa con el ecosistema de React, permitiendo que el ciclo de vida y la gesti\u00f3n del estado sean manejados directamente por React.<\/p>\n\n\n\n \u2033<\/span>Si React ya maneja bien la gesti\u00f3n de estado y el ciclo de vida, \u00bfpor qu\u00e9 no dejar que lo haga?\u2033<\/span> <\/p>\n\n\n\n Jo\u00e3o Lanjoni, Ingeniero de Software en Nubank.<\/p>\n<\/blockquote>\n\n\n\n En lugar de crear un framework completo o a\u00f1adir abstracciones innecesarias, UIx es un puente ligero que aprovecha lo mejor de React moderno, resultando en una base de c\u00f3digo en ClojureScript con sintaxis idiom\u00e1tica pero comportamiento id\u00e9ntico al de React.<\/p>\n\n\n\n En t\u00e9rminos pr\u00e1cticos, UIx centraliza la construcci\u00f3n de componentes en dos elementos: defui<\/em> para declarar componentes de React y $<\/em> para renderizar elementos de forma expl\u00edcita y ligera. Los cuerpos de los componentes procesan las props de manera id\u00e9ntica a React. Los hooks, como useState<\/em>, se exponen usando las convenciones idiom\u00e1ticas de ClojureScript, como use-state<\/em>, mientras UIx se encarga de la traducci\u00f3n a las APIs nativas de React. Esta ergonom\u00eda combina lo mejor de la sintaxis de ClojureScript con la arquitectura de React, lo que, seg\u00fan Jo\u00e3o, elimina la necesidad de capacitar a desarrolladores de React en los detalles internos de capas como Reagent o Re-frame, manteniendo el modelo mental alineado con el est\u00e1ndar de React.<\/p>\n\n\n\n Un punto destacado de la presentaci\u00f3n fue el gr\u00e1fico creado por Roman Liutikov (mantenedor de UIx), que compara la profundidad de la pila de llamadas (call stack) al renderizar un componente simple en React puro, UIx y Reagent. React muestra el camino m\u00e1s corto; UIx, al a\u00f1adir solo una capa delgada, le sigue de cerca. En contraste, Reagent muestra una pila significativamente m\u00e1s profunda debido a que Hiccup se interpreta en tiempo de ejecuci\u00f3n. Aunque la diferencia es m\u00ednima en aplicaciones peque\u00f1as, el impacto en la predictibilidad y el rendimiento se vuelve notable en productos con cientos o miles de componentes.<\/p>\n\n\n\n Jo\u00e3o present\u00f3 tres ejemplos del mundo real, destacados en la p\u00e1gina oficial del proyecto:<\/p>\n\n\n\n El caso de Pitch es particularmente impresionante: el equipo migr\u00f3 2,500 componentes de Reagent a UIx, mantuvo la compatibilidad con Re-frame y observ\u00f3 mejoras en la predictibilidad y el rendimiento.<\/p>\n\n\n\n Por su parte, Metosin cuenta con Juho Teperi, uno de los principales contribuyentes de Reagent, quien cre\u00f3 un proyecto de ejemplo para una app full-stack usando Clojure y ClojureScript y eligi\u00f3 UIx para la interfaz web, utilizando Material UI sin necesidad de wrappers especiales. Cuando alguien que ayud\u00f3 a construir la herramienta anterior comienza a abogar por el nuevo enfoque, dice mucho sobre el momento actual de la tecnolog\u00eda.<\/p>\n\n\n\n El valor de UIx se extiende a la contrataci\u00f3n y desarrollo de ingenieros, abriendo paso a que m\u00e1s profesionales entren al ecosistema de ClojureScript sin el requisito de dominar las complejidades de Reagent, Re-frame o el modelo de estado basado en \u00e1tomos desde el primer d\u00eda.<\/p>\n\n\n\n \u201cEl mayor valor de UIx es permitir que los desarrolladores de React escriban ClojureScript con una curva de aprendizaje m\u00ednima.\u201d<\/em> <\/p>\n\n\n\n Jo\u00e3o Lanjoni, Ingeniero de Software en Nubank.<\/p>\n<\/blockquote>\n\n\n\n UIx se recomienda especialmente para aplicaciones frontend modernas y complejas, y para equipos que ya est\u00e1n familiarizados con React. Es ideal para bases de c\u00f3digo que dependen fuertemente de hooks y para proyectos que requieren interoperabilidad con las \u00faltimas librer\u00edas de React. La librer\u00eda, intencionalmente simple, no intenta reinventar la gesti\u00f3n de estado global, manteniendo la compatibilidad con librer\u00edas maduras como Zustand y Jotai, o incluso permitiendo el uso de hooks personalizados que se suscriben a un \u00e1tomo de Clojure.<\/p>\n\n\n\n En esencia, UIx no busca reemplazar a React, sino actuar como un puente delgado, moderno y pragm\u00e1tico. Su objetivo es permitir que los equipos construyan frontends escalables con el poder de React, preservando la expresividad y elegancia de la filosof\u00eda de Clojure. Para proyectos complejos y modernos en ClojureScript, UIx podr\u00eda ser el eslab\u00f3n perdido.<\/p>\n\n\n\n <\/p>\n\n\n\nLo que UIx cambia en tu c\u00f3digo<\/h2>\n\n\n\n
\n
Estructura de componentes en UIx<\/h2>\n\n\n\n
Rendimiento en cifras<\/h2>\n\n\n\n
Qui\u00e9nes ya est\u00e1n usando UIx en producci\u00f3n<\/h2>\n\n\n\n
\n
Reduciendo la curva de aprendizaje<\/h2>\n\n\n\n
\n
Cu\u00e1ndo UIx es la mejor opci\u00f3n<\/h2>\n\n\n\n