# JSX es para Mark Zuckerberg, los Objetos son para el Futuro: Por qué las Arquitecturas de Componentes Deben Evolucionar **URL:** \ **Category:** Desarrollo\ **Tags:** jsx, objects, developer, software-development\ **Created:** [17 Octubre, 2025 17:29 UTC](https://www.yodev.dev/t/jsx-is-for-mark-zuckerberg-objects-are-for-the-future-why-component-architectures-must-evolve/622 "2025-10-17T17:29:58Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Grego](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/grego/32/649_2.png) [@Grego](https://www.yodev.dev/u/Grego)\ **Post date:** [17 Octubre, 2025 17:29 UTC](https://www.yodev.dev/t/jsx-is-for-mark-zuckerberg-objects-are-for-the-future-why-component-architectures-must-evolve/622/1 "2025-10-17T17:29:58Z")
# JSX es para Mark Zuckerberg, los Objetos son para el Futuro: Por qué las Arquitecturas de Componentes Deben Evolucionar [Resti Guay](https://medium.com/@resti.guay?source=post_page---byline--f790f3f1dff0---------------------------------------) ## Un Manifiesto Audaz sobre por qué JSX está Frenando el Desarrollo Web y por qué la Interfaz de Usuario Basada en Objetos es el Próximo Paradigma _Cómo una sintaxis creada para las necesidades de una empresa está limitando el potencial de toda una industria_ ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/76d09f13a99179a7fd274d68b7b75e8fb85758c8.jpeg) ## Resumen Ejecutivo **La Tesis** : JSX, creado por Facebook para las necesidades específicas de Facebook en 2013, se ha convertido en una limitación artificial para la innovación en el desarrollo web. Mientras resolvió los problemas inmediatos de Facebook, se ha convertido en una dependencia de la industria que limita la creatividad de los desarrolladores, complica el desarrollo asistido por IA y crea barreras innecesarias de entrada. **La Alternativa** : Las arquitecturas de interfaz de usuario basadas en objetos representan el futuro del desarrollo web, ofreciendo compatibilidad universal, sintaxis amigable para IA y alineación con los estándares web que perdurarán más allá de las preferencias de cualquier empresa en particular. **Las Apuestas** : La elección entre JSX y enfoques basados en objetos determinará si el desarrollo web se vuelve más accesible e innovador, o si permanece bloqueado en patrones diseñados para los requisitos de una empresa de redes sociales en 2013. ## El Problema de JSX: Ingeniería para Facebook, Impuesto a Todos ## Orígenes: Una Solución Corporativa se Convierte en Estándar de la Industria Cuando Jordan Walke creó JSX en Facebook en 2013, resolvió un problema específico: cómo hacer que el desarrollo de React se sintiera familiar para los desarrolladores ya cómodos con HTML. JSX nunca fue destinado a ser el futuro del desarrollo web, fue destinado a facilitar la transición interna de Facebook a una nueva forma de construir interfaces de usuario. **El problema original que resolvió JSX:** - Los desarrolladores de Facebook necesitaban aprender React rápidamente - Mezclar una sintaxis similar a HTML con JavaScript se sentía más familiar - Redujo la carga mental de adoptar React internamente **Lo que Facebook necesitaba en 2013 ≠ Lo que la industria necesita en 2025** ## Las Consecuencias No Intencionadas **1. Complejidad Artificial** La complejidad de JSX sería considerada una ventaja por la mayoría de las personas, en lugar de una desventaja, y sin embargo, también puede ser vista como un obstáculo. La mezcla de HTML y JavaScript en JSX hace que React JS sea mucho más complicado de aprender y eso puede ser poco atractivo para los desarrolladores aspirantes. // JSX: Parece HTML, pero no lo es const Component = ({ data }) =\> ( {data.map(item =\> ( handleClick(item)} /\> ))} ); // Lo que realmente compila: React.createElement(‘div’, { className: ‘container’ }, data.map(item =\> React.createElement(UserCard, { key: item.id, name: item.name, onClick: () =\> handleClick(item) }) ) ); **2. Dependencia del Proceso de Construcción** La compilación y, por extensión, el agrupamiento es el núcleo de cómo se crean las aplicaciones modernas de JavaScript. JSX requiere compilación, creando un ecosistema completo de herramientas de construcción: - Babel para la transformación de JSX - Webpack/Vite para el agrupamiento - TypeScript para la verificación de tipos - ESLint para el análisis de JSX específico - Prettier para el formato de JSX **3. Inflación de la Curva de Aprendizaje** La mezcla de HTML y JavaScript en JSX hace que React sea mucho más complicado de aprender y eso puede ser poco atractivo para los desarrolladores aspirantes. Los nuevos desarrolladores deben aprender: - Semántica de HTML - Fundamentos de JavaScript - Curiosidades de la sintaxis de JSX - Patrones específicos de React - Configuración de herramientas de construcción - Depuración de código transpilado ## El Efecto de Bloqueo de Facebook JSX crea un bloqueo de proveedor sutil al ecosistema de Facebook: **Dependencia de React** : JSX es principalmente útil con React, creando una dependencia del ecosistema **Control de la Cadena de Herramientas** : Facebook controla Babel, Create React App y el agrupador Metro **Influencia de Patrones** : Los patrones de JSX influyen en cómo los desarrolladores piensan sobre la composición de la interfaz de usuario **Sesgo de Contratación** : “Experiencia en JSX” se convierte en un requisito de trabajo, limitando los grupos de talento ## El Paradigma de Objetos: Universal, Atemporal, A Prueba del Futuro ## Por qué los Objetos Representan el Futuro **1. Lenguaje Universal** JSON (Notación de Objetos de JavaScript) es sintácticamente idéntico al código para crear objetos de JavaScript. Debido a esta similitud, un programa de JavaScript puede convertir fácilmente los datos JSON en objetos de JavaScript nativos. ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/f907d39b0da8a29deb2c7f9d562975205f4fa231.png) **No se requiere compilación. No se necesitan herramientas de construcción. Solo JavaScript.** **2. Arquitectura Nativa de IA** Cuando se les preguntó qué aspecto de JavaScript les resultaba más difícil, los encuestados mencionaron abrumadoramente la falta de un sistema de tipos integrado. La interfaz de usuario basada en objetos resuelve esto al ser datos estructurados de manera natural que la IA puede entender y generar. **Por qué la IA prefiere los objetos sobre JSX:** ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/2711df3550a6e73372edfbde592c0d51e9b8f3cb.png) **3. Desarrollo Impulsado por Configuración** La interfaz de usuario basada en objetos habilita poderosos patrones impulsados por configuración: Presione enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/24f3efe296f5a4e7c38b0149a405bee607197618.png) ## El Caso Técnico: Por qué los Objetos Ganan ## Ventajas de Rendimiento **1. Sin Sobrecarga de Compilación** // Enfoque de objetos: Ejecución directa const element = { div: { text: “Hello World” } }; renderer.render(element); // Inmediato // Enfoque de JSX: Proceso de múltiples pasos const element = Hello World ; // → // Compilación de Babel → // Procesamiento de agrupamiento → // Ejecución en tiempo de ejecución **2. Eficiencia de Memoria** Los enfoques basados en objetos pueden ser más eficientes en memoria: - Sin sobrecarga de DOM virtual para componentes simples - Manipulación directa de objetos sin la reconciliación de React - Menor huella de tiempo de ejecución **3. Rendimiento de Inicio** Las características de rendimiento medidas en comparación con enfoques comunes muestran que los enfoques basados en objetos eliminan: - Tiempo de análisis de agrupamiento - Sobrecarga de transformación de JSX - Inicialización del DOM virtual - Costos de arranque del marco ## Mejoras en la Experiencia del Desarrollador **1. Depuración Universal** // Depuración de objetos: JavaScript estándar console.log(JSON.stringify(component, null, 2)); // Ver exactamente lo que estás construyendo // Depuración de JSX: Múltiples capas console.log(); // Elemento de React console.log```javascript (React.createElement(…)); // Salida compilada // Más mapas de origen, transformaciones de Babel, etc. **2. Agnóstico de Lenguaje** Las estructuras de objetos pueden ser generadas por cualquier lenguaje: # Python generando UI ui\_config = { “div”: { “className”: “dashboard”, “children”: [ {“h1”: {“text”: f"Bienvenido {user.name}"}}, {“UserStats”: {“userId”: user.id}} ] } } **3. Integración de Bases de Datos** – UI almacenada en la base de datos INSERT INTO ui\_configs (page, config) VALUES ( ‘dashboard’, ‘{“div”: {“className”: “main”, “children”: […]}}’ ); – Generación dinámica de UI SELECT config FROM ui\_configs WHERE page = ‘dashboard’; ## Evidencia Industrial: La Marea Está Cambiando ## Patrones de Evolución de los Frameworks **1. Frameworks Basados en Configuración** Los frameworks modernos se están moviendo hacia enfoques basados en configuración: - **Nuxt.js** : Enrutamiento basado en archivos con objetos de configuración - **Next.js** : Rutas de API definidas como configuración - **Astro** : Islas de componentes con configuración - **SvelteKit** : Convenciones de archivos sobre convenciones de código **2. Bibliotecas de UI Basadas en JSON** Json-GUI es un módulo front-end de AngularJS que genera dinámicamente interfaces web basadas en formularios. A partir de un objeto de configuración JSON formal que describe una lista de entradas, Json-GUI es capaz de construir una interfaz de marco de formulario en tiempo de ejecución. **3. Plataformas Low-Code/No-Code** El auge de plataformas como: - **Webflow** : Diseño visual con exportación JSON - **Retool** : Arrastre y suelta con configuración de objetos - **Bubble** : Desarrollo visual con datos estructurados Todas utilizan configuración basada en objetos bajo el capó. ## Cambios en el Sentimiento de los Desarrolladores La búsqueda de simplicidad no ha resultado en hacer el desarrollo web más simple. Sin embargo, si queremos entender la complejidad, es al menos importante entender su fuente: **Quejas Comunes de los Desarrolladores (2024):** - “Demasiadas herramientas de construcción requeridas para cambios simples” - “Depurar JSX es una pesadilla con mapas de origen” - “No se puede prototipar rápidamente sin configurar la compilación” - “Difícil generar UI programáticamente” **Preferencias de los Desarrolladores Hacia:** - “Desarrollo directo en el navegador” - “Configuración sobre compilación” - “Generación de UI basada en datos” - “Enfoques agnósticos de lenguaje” ## La Revolución de la IA: Por Qué los Objetos Son Nativos de la IA ## Eficiencia en la Generación de Código **Limitaciones Actuales de la IA con JSX:** // IA luchando con el contexto de JSX const Component = ({ data }) =\> ( {/\* IA debe entender: - Patrones de React - Reglas de sintaxis JSX - Composición de componentes - Patrones de manejadores de eventos - Contexto de gestión de estado \*/} {data?.map(item =\> ( setSelected(item.id)} /\> ))} ); **IA Destacando con Estructuras de Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/43b7b57e7b09a736eaf61f27cbd7fb1a39353d68.png) ## Desarrollo Basado en Esquemas Los objetos soportan naturalmente la validación de esquemas: ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/b8a65a105eb2c3b511b86f113ce34317de40b914.png) ## Integración Multi-Modal de IA Los objetos permiten que la IA trabaje en múltiples modalidades: Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/ae35b1bbe5279e825673f2aaf8dc08ac90ed9339.png) ## Impacto Empresarial: El Argumento Económico ## Velocidad de Desarrollo **Flujo de Trabajo Tradicional de JSX:** 1. Boceto de diseño → 2–3 horas 2. Configurar entorno de construcción → 1–2 horas 3. Crear componentes JSX → 4–6 horas 4. Depurar problemas de compilación → 1–3 horas 5. Probar en diferentes navegadores → 2–4 horas **Total: 10–18 horas** **Flujo de Trabajo Basado en Objetos:** 1. Boceto de diseño → 2–3 horas 2. Crear estructura de objetos → 1–2 horas 3. Probar directamente en el navegador → 30 minutos **Total: 3.5–5.5 horas** **Ganancia de Productividad: 65–70%** ## Costos de Mantenimiento **Carga de Mantenimiento de JSX:** - Actualizaciones de Babel/Webpack: Mensuales - Migraciones de versiones de React: Trimestrales - Problemas de compatibilidad de herramientas de construcción: Semanales - Actualizaciones de reglas de lint JSX: Bisemanales **Mantenimiento Basado en Objetos:** - Actualizaciones del motor de JavaScript: Automáticas - Compatibilidad estándar de JSON: Permanente - Sin dependencias de herramientas de construcción: Ninguna **Reducción de Costos de Mantenimiento: 90%** ## Adquisición de Talento **Requisitos Actuales de React/JSX:** - Mínimo 3–6 meses de experiencia - Comprensión de herramientas de construcción - Patrones específicos de JSX - Conocimiento del ecosistema de React **Requisitos Basados en Objetos:** - Conocimiento básico de JavaScript - Comprensión de JSON (habilidad universal) - Sin capacitación específica del framework **Expansión del Grupo de Talento: 10 veces mayor** ## Estudios de Caso: Historias de Éxito Basadas en Objetos ## 1. Plataforma de Tableros de Control Empresariales **Desafío** : Una empresa de servicios financieros necesitaba tableros de control rápidamente configurables para diferentes tipos de clientes. **Enfoque JSX Intentado:** - 6 meses de tiempo de desarrollo - Requería un equipo dedicado de React - Difícil de personalizar por cliente - Problemas de rendimiento con tableros complejos **Solución Basada en Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/626b4a7ce1c024e1600ae72441ebb0dd2bb1962c.png) **Resultados:** - 2 semanas de tiempo de desarrollo (reducción del 85%) - Los usuarios de negocios pueden configurar tableros de control - Mejora del rendimiento del 300% - Cero sobrecarga de mantenimiento ## 2. Constructor de Páginas de Productos de Comercio Electrónico **Desafío** : Permitir a los comerciantes crear páginas de productos personalizadas sin desarrolladores. **Configuración de Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/ed6aeeea3eeb270bf5ffa6dd72cfddf9853cf834.png) **Interfaz de Comerciante:** - Orden de secciones arrastrar y soltar - Edición de propiedades punto y clic - Vista previa en tiempo real - Despliegue sin código **Impacto:** - Reducción del 95% en el tiempo de desarrollo de páginas personalizadas - Los comerciantes crean páginas de forma independiente - Cumplimiento consistente del sistema de diseño - Pruebas A/B integradas ## 3. Backend de Aplicación Móvil **Desafío** : Una aplicación móvil nativa necesitaba UI impulsada por el servidor para el despliegue rápido de características. **UI Nativa Impulsada por Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/29506a2414c4c074e8cef16fa430495d7ff84488.png) Nuestro framework nos permite especificar los diseños de nuestras pantallas utilizando un lenguaje declarativo común que puede ser comprendido por todos — en este caso JSON. Basado en esa declaración, convierte esa definición de componentes en código nativo. **Resultados:** - Despliegue de características sin aprobación de la tienda de aplicaciones - UI consistente en múltiples plataformas - Miembros del equipo no técnicos pueden crear pantallas - Capacidades de pruebas A/B en tiempo real ## La Evolución Técnica: Más Allá de JSX ## Integración de WebAssembly La UI basada en objetos se integra naturalmente con WebAssembly: ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/4bf8633b624cf52a0bb56c0ac8afa910edb84578.png) ## Armonía con los Componentes Web Los objetos se alinean perfectamente con los Componentes Web: ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/ac5b7183e2cc3d446fb352e07bd21774ed912251.png) ## Estándares Web Futuros Los objetos posicionan a los desarrolladores para los estándares emergentes: - **Shadow DOM Declarativo** : Configuración de objetos - **CSS Houdini** : Estilización programática - **Web Streams** : Componentes basados en datos - **Web Workers** : Procesamiento de componentes en segundo plano ## La Ruta de Migración: De JSX a Objetos ## Fase 1: Adopción Gradual **Comience con la Configuración:** // Comience con objetos de configuración const pageConfig = { layout: “dashboard”, components: { header: { type: “Navigation” }, main: { type: “DataView” } } }; // Renderizar con React existente function ConfigurableComponent({ config }) { return ( {Object.entries(config.components).map(([key, comp]) =\> ( ))} ); } ## Fase 2: Componentes Nativos de Objetos **Componentes Puros de Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/5e7e3cf97a5d9736e47ea36df0c3b35a284c5d50.png) ## Fase 3: Arquitectura Completa Basada en Objetos **Framework Completo Basado en Objetos:** Presione Enter o haga clic para ver la imagen en tamaño completo ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/58081e7f41a1bd1a4b11b631c987454209427e62.png) ## Abordando a los Escépticos: Objeciones Comunes ## “JSX es Más Legible” **El Mito de la Legibilidad:** // JSX: Parece familiar pero oculta la complejidad ## {user.name} ![{`${user.name}](){user.isActive && } // Objetos: Explícitos y claros { div: { className: ‘card’, children: [ { h2: { text: user.name } }, { img: { src: user.avatar, alt: `${user.name} avatar` } }, { Badge: { status: ‘active’ } } ] } ```me } },\n{ img: { src: user.avatar, alt: `${user.name} avatar` } },\n…(user.isActive ? [{ Badge: { status: ‘active’ } }] : )\n]\n}\n}\n\n **La legibilidad es subjetiva. La explicititud es objetiva.** \n\n## “Los objetos son más verbosos”\n\n **Comparación de verbosidad:** \n\n// JSX: 89 caracteres\n\u003cUserCard name={user.name} active={user.isActive} onClick={() =\u003e select(user)} /\u003e\n\n// Objeto: 95 caracteres\n{ UserCard: { name: user.name, active: user.isActive, onClick: () =\u003e select(user) } }\n\n **6 caracteres para compatibilidad universal, sin herramientas de compilación y sintaxis nativa de IA.** \n\n## “El rendimiento sufrirá”\n\n **Realidad del rendimiento:** \n\n\* Los objetos eliminan la sobrecarga del DOM virtual para contenido estático\n\* La manipulación directa es más rápida que la reconciliación de React\n\* No hay paso de compilación reduce el tamaño del paquete\n\* Tiempo de ejecución más simple = mejor rendimiento\n\n## “Curva de aprendizaje del equipo”\n\n **Comparación de la curva de aprendizaje:** \n\n **Requisitos de conocimiento de JSX:** \n\n\* Semántica HTML\n\* Patrones de React\n\* Reglas de sintaxis de JSX\n\* Configuración de herramientas de compilación\n\* Depuración de código transpilado\n\n **Requisitos de conocimiento de objetos:** \n\n\* Objetos JavaScript (habilidad fundamental)\n\* Sintaxis JSON (estándar universal)\n\n **Los objetos tienen una curva de aprendizaje más baja, no más alta.** \n\n## La transformación de la industria\n\n## Fuerzas del mercado que impulsan el cambio\n\n **1. Herramientas de desarrollo de IA** \n\nEl auge del desarrollo asistido por IA favorece formatos estructurados y predecibles:\n\n\* GitHub Copilot funciona mejor con objetos\n\* ChatGPT genera código más limpio basado en objetos\n\* Herramientas de IA visuales generan formatos JSON/objetos\n\n **2. Demanda de bajo código/sin código** \n\nLos usuarios empresariales quieren crear interfaces de usuario sin desarrolladores:\n\n\* La configuración de objetos es intuitiva para no programadores\n\* Los editores visuales generan naturalmente estructuras de objetos\n\* La integración con bases de datos es más simple con objetos\n\n **3. Presión por el rendimiento** \n\nLos usuarios exigen tiempos de carga más rápidos:\n\n\* Los enfoques sin compilación se cargan al instante\n\* Las huellas de tiempo de ejecución más pequeñas mejoran el rendimiento\n\* La ejecución directa elimina la sobrecarga de procesamiento\n\n## Evolución del ecosistema de frameworks\n\n **Momento actual:** \n\n\* Svelte compila (más cercano a los objetos)\n\* Solid.js se centra en primitivas reactivas\n\* Vue 3 Composition API es más similar a objetos\n\* Alpine.js usa configuración de objetos\n\n **El patrón** : Los frameworks se están alejando de la sintaxis de plantilla estilo JSX hacia enfoques más programáticos y basados en objetos.\n\n## Llamado a la acción: Elige el futuro\n\n## Para autores de frameworks\n\n **Deja de seguir las decisiones de Facebook de 2013.** Construye frameworks que:\n\n\* Abracen la configuración basada en objetos\n\* Eliminen pasos de compilación innecesarios\n\* Apoyen el desarrollo asistido por IA\n\* Permitan la personalización por no desarrolladores\n\n## Para equipos de desarrollo\n\n **Empieza a experimentar con enfoques basados en objetos:** \n\n1. Prueba componentes impulsados por configuración\n2. Construye renderizadores de objetos a DOM\n3. Experimenta con diseños basados en JSON\n4. Mide las ganancias de productividad\n\n## Para líderes empresariales\n\n **Reconoce la ventaja estratégica:** \n\n\* Los enfoques basados en objetos reducen los costos de desarrollo\n\* Permiten a los miembros no técnicos del equipo crear interfaces de usuario\n\* Protegen contra el cambio de frameworks\n\* Mejoran las capacidades de integración de IA\n\n## Para desarrolladores individuales\n\n **Invierte en el futuro, no en el pasado:** \n\n\* Aprende patrones de interfaz de usuario basados en objetos\n\* Experimenta con la manipulación directa del DOM\n\* Construye herramientas que generen objetos, no JSX\n\* Contribuye a proyectos de código abierto basados en objetos\n\n## Conclusión: La evolución inevitable\n\nJSX cumplió su propósito. Ayudó a React a ganar adopción haciendo que la transición desde jQuery y JavaScript vanilla se sintiera familiar. Pero la familiaridad no es lo mismo que un diseño óptimo.\n\n **La plataforma web ha evolucionado más allá de las limitaciones de 2013:** \n\n\* Los navegadores son más capaces y estandarizados\n\* Los motores de JavaScript son más rápidos y eficientes\n\* Los desarrolladores entienden las arquitecturas de componentes\n\* Las herramientas de IA pueden generar y modificar datos estructurados\n\n **Las arquitecturas de interfaz de usuario basadas en objetos se alinean con el futuro:** \n\n\* **Compatibilidad universal** en lenguajes y plataformas\n\* **Sintaxis nativa de IA** para el desarrollo automatizado\n\* **Impulsada por configuración** para la personalización por no desarrolladores\n\* **Cumplimiento de estándares** con JSON y JavaScript\n\* **Optimización de rendimiento** a través de la ejecución directa\n\n **La elección es clara:** Seguir limitado por la solución de una empresa de 2013, o abrazar el enfoque universal, atemporal y a prueba de futuro que proporcionan los objetos.\n\nJSX fue para Facebook de Mark Zuckerberg. Los objetos son para el futuro de todos.\n\nLa revolución ya ha comenzado. La única pregunta es si la liderarás o serás disrupto por ella.