{"id":30392,"date":"2024-10-14T17:30:54","date_gmt":"2024-10-14T17:30:54","guid":{"rendered":"https:\/\/building.nubank.com\/?p=30392"},"modified":"2024-10-14T17:32:34","modified_gmt":"2024-10-14T17:32:34","slug":"de-micro-a-macro-escalando-front-ends","status":"publish","type":"post","link":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/","title":{"rendered":"De Micro a Macro: Escalando Front-Ends"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00bfEst\u00e1s enfrentando desaf\u00edos al escalar tu front-end para atender a un n\u00famero creciente de usuarios? Con el aumento de la complejidad de las aplicaciones web modernas, estrategias como micro front-ends, monorepositorios, gesti\u00f3n de estados globales y optimizaci\u00f3n de cach\u00e9 son esenciales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este art\u00edculo, exploramos las mejores pr\u00e1cticas para escalar aplicaciones front-end, discutiendo c\u00f3mo implementar micro front-ends, gestionar versiones en monorepositorios, aplicar estrategias efectivas de cach\u00e9 y mantener estados globales de forma eficiente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descubre c\u00f3mo Nubank est\u00e1 superando los desaf\u00edos de escalabilidad en el front-end y c\u00f3mo puedes aplicar estos enfoques para construir interfaces de usuario \u00e1giles, responsivas y f\u00e1ciles de mantener.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El Desaf\u00edo de la Escala<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Empresas como Nubank enfrentan desaf\u00edos \u00fanicos. Con m\u00e1s de 100 millones de clientes en Brasil, M\u00e9xico y Colombia, manejar sistemas distribuidos a gran escala no es solo una necesidad, sino una obligaci\u00f3n. La complejidad de gestionar transacciones como PIX, garantizar la estabilidad de los servicios y proporcionar una experiencia consistente al usuario requiere soluciones innovadoras.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s, trabajar con tecnolog\u00edas avanzadas como Clojure y Datomic\u2014cuyo desarrollo es influenciado por ingenieros dentro del propio Nubank\u2014a\u00f1ade capas adicionales de complejidad y oportunidad. Estas tecnolog\u00edas no son solo herramientas; son parte integral de nuestra estrategia de escalabilidad e innovaci\u00f3n continua.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Micro Front-Ends: Dividir para Conquistar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La arquitectura de micro front-ends ha emergido como una soluci\u00f3n para muchos de los desaf\u00edos que enfrentan los grandes equipos de desarrollo. Pero, \u00bfqu\u00e9 son exactamente los micro front-ends?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u00e9 Son (y Qu\u00e9 No Son) los Micro Front-Ends<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los micro front-ends son una extensi\u00f3n del concepto de microservicios al front-end. Permiten que diferentes equipos desarrollen, implementen y mantengan partes distintas de la interfaz de usuario de forma independiente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto significa que cada equipo puede trabajar a su propio ritmo, elegir sus propias tecnolog\u00edas (hasta cierto punto) e implementar actualizaciones sin impactar el sistema en su conjunto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es importante destacar que los micro front-ends no son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Paquetes NPM o m\u00f3dulos monol\u00edticos<\/strong>: Simplemente dividir un monolito en paquetes no ofrece los beneficios de implementaci\u00f3n independiente o aislamiento de equipos.<\/li>\n\n\n\n<li><strong>Aplicaciones separadas para el usuario final<\/strong>: La experiencia del usuario debe ser unificada. No estamos hablando de m\u00faltiples aplicaciones distintas, sino de una sola aplicaci\u00f3n compuesta por varias partes aut\u00f3nomas.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Beneficios de los Micro Front-Ends<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Implementaciones independientes<\/strong>: Los equipos pueden implementar actualizaciones sin coordinarse con toda la organizaci\u00f3n.<\/li>\n\n\n\n<li><strong>Escalabilidad de equipos<\/strong>: Los nuevos desarrolladores pueden integrarse m\u00e1s r\u00e1pidamente, enfoc\u00e1ndose en una parte espec\u00edfica del sistema.<\/li>\n\n\n\n<li><strong>Aislamiento de fallos<\/strong>: Los problemas en un micro front-end no necesariamente afectan a toda la aplicaci\u00f3n.<\/li>\n\n\n\n<li><strong>Flexibilidad tecnol\u00f3gica<\/strong>: Posibilidad de utilizar diferentes frameworks o librer\u00edas, aunque esto debe hacerse con cautela para evitar sobrecarga en el cliente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Costos y Consideraciones<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Configuraci\u00f3n inicial compleja<\/strong>: Implementar micro front-ends requiere una planificaci\u00f3n cuidadosa y una configuraci\u00f3n inicial robusta.<\/li>\n\n\n\n<li><strong>Cohesi\u00f3n de la experiencia del usuario<\/strong>: Garantizar que la interfaz sea consistente y cohesiva es un desaf\u00edo cuando est\u00e1n involucrados m\u00faltiples equipos.<\/li>\n\n\n\n<li><strong>Sobrecarga de rendimiento<\/strong>: El uso de diferentes frameworks puede aumentar el tama\u00f1o del bundle y afectar el rendimiento.<\/li>\n\n\n\n<li><strong>Observabilidad y depuraci\u00f3n<\/strong>: Monitorear y depurar una aplicaci\u00f3n compuesta por m\u00faltiples micro front-ends requiere herramientas y pr\u00e1cticas avanzadas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estrategias de Implementaci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Existen varias aproximaciones para implementar micro front-ends:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Composici\u00f3n en el Lado del Cliente<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es el enfoque m\u00e1s com\u00fan, donde la integraci\u00f3n de los micro front-ends ocurre en el navegador del usuario. Tecnolog\u00edas como Web Components, Module Federation (Webpack 5) y frameworks como Single SPA facilitan esta composici\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Composici\u00f3n en el Servidor o CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El ensamblaje de los micro front-ends ocurre antes de llegar al cliente, ya sea en el servidor o en la CDN. Herramientas y t\u00e9cnicas como Edge Side Includes (ESI) pueden ser utilizadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comunicaci\u00f3n entre Micro Front-Ends<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La comunicaci\u00f3n eficiente es esencial. Se recomienda el uso de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eventos personalizados<\/strong>: Permiten que los micro front-ends se comuniquen sin depender directamente unos de otros.<\/li>\n\n\n\n<li><strong>Estados compartidos v\u00eda APIs del navegador<\/strong>: Como Local Storage o IndexedDB.<\/li>\n\n\n\n<li><strong>Evitar dependencias globales excesivas<\/strong>: Minimiza el acoplamiento entre los componentes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Control de Versi\u00f3n en Monorepositorios<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gestionar versiones en un monorepositorio puede ser un desaf\u00edo, especialmente cuando m\u00faltiples equipos est\u00e1n trabajando en diferentes partes del sistema. Aqu\u00ed hay algunas pr\u00e1cticas para manejar esto:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Versionado Individual de Paquetes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Herramientas como Lerna o Nx permiten gestionar versiones individuales de paquetes dentro de un monorepositorio. Esto posibilita que cada equipo controle las versiones de sus propios componentes o m\u00f3dulos, manteniendo la independencia y facilitando la coordinaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Evitando Subm\u00f3dulos Git<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aunque los subm\u00f3dulos Git pueden parecer una soluci\u00f3n, generalmente introducen complejidad adicional. En su lugar, utilizar workspaces de NPM o Yarn puede simplificar la gesti\u00f3n de dependencias internas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Beneficios del Monorepositorio<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consistencia de c\u00f3digo<\/strong>: Facilita la estandarizaci\u00f3n y reutilizaci\u00f3n de c\u00f3digo.<\/li>\n\n\n\n<li><strong>Visibilidad<\/strong>: Todos los equipos tienen acceso al c\u00f3digo fuente completo, promoviendo la colaboraci\u00f3n.<\/li>\n\n\n\n<li><strong>Automatizaci\u00f3n<\/strong>: Facilita la configuraci\u00f3n de pipelines de CI\/CD que abarcan todo el sistema.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estrategias de Cach\u00e9 para la Carga de Bundles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La eficiencia en la carga de recursos es crucial para el rendimiento de la aplicaci\u00f3n. Estrategias de cach\u00e9 bien implementadas pueden mejorar significativamente la experiencia del usuario.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cach\u00e9 de Recursos Compartidos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Al usar tecnolog\u00edas como Module Federation, es posible compartir dependencias comunes entre diferentes micro front-ends, evitando descargas redundantes. Para lograr esto:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Definir m\u00f3dulos compartidos<\/strong>: Configurar qu\u00e9 librer\u00edas o frameworks deben ser compartidos para evitar m\u00faltiples versiones en el cliente.<\/li>\n\n\n\n<li><strong>Versiones compatibles<\/strong>: Asegurarse de que las dependencias compartidas sean compatibles entre s\u00ed para evitar conflictos.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cach\u00e9 a Nivel de CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizar una Red de Distribuci\u00f3n de Contenido (CDN) permite que recursos est\u00e1ticos sean entregados m\u00e1s r\u00e1pidamente a los usuarios, aprovechando el cach\u00e9 distribuido.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Configuraciones de Cache-Control<\/strong>: Ajustar los encabezados HTTP para controlar c\u00f3mo y por cu\u00e1nto tiempo los recursos deben ser almacenados en cach\u00e9.<\/li>\n\n\n\n<li><strong>Invalidaci\u00f3n de cach\u00e9<\/strong>: Tener estrategias para invalidar o actualizar el cach\u00e9 cuando se implementen nuevas versiones de los recursos.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cach\u00e9 en el Navegador<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Service Workers<\/strong>: Implementar cach\u00e9 v\u00eda Service Workers para un control m\u00e1s granular sobre qu\u00e9 recursos se almacenan y cu\u00e1ndo se actualizan.<\/li>\n\n\n\n<li><strong>Preloading y Prefetching<\/strong>: Anticipar qu\u00e9 recursos ser\u00e1n necesarios y cargarlos de antemano.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Gestionando Estados Globales en Aplicaciones Host<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mantener un estado global consistente en una aplicaci\u00f3n compuesta por m\u00faltiples micro front-ends es un desaf\u00edo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estrategias Recomendadas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eventos personalizados<\/strong>: Utilizar el sistema de eventos del navegador para la comunicaci\u00f3n entre micro front-ends sin crear dependencias r\u00edgidas.<\/li>\n\n\n\n<li><strong>Almacenamiento local compartido<\/strong>: APIs como Local Storage o IndexedDB pueden servir como medio para compartir el estado global.<\/li>\n\n\n\n<li><strong>Contextos globales<\/strong>: En frameworks como React, se puede usar Context API, pero se debe tener cuidado de no introducir acoplamiento indeseado.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Buenas Pr\u00e1cticas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Aislamiento de dominios<\/strong>: Cada micro front-end debe ser responsable de su propio estado local e interactuar con el estado global solo cuando sea necesario.<\/li>\n\n\n\n<li><strong>Contratos bien definidos<\/strong>: Establecer interfaces claras para la comunicaci\u00f3n entre componentes, facilitando el mantenimiento y evoluci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estandarizaci\u00f3n y Equipos de Plataforma<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mientras que los micro front-ends abordan la escalabilidad t\u00e9cnica, la estandarizaci\u00f3n de c\u00f3digo y la existencia de equipos de plataforma son cruciales para la escalabilidad humana de los equipos de desarrollo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">El Papel de los Equipos de Plataforma<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Definici\u00f3n de buenos est\u00e1ndares<\/strong>: Crear y mantener est\u00e1ndares de c\u00f3digo que faciliten el trabajo de los equipos.<\/li>\n\n\n\n<li><strong>Herramientas e infraestructura<\/strong>: Desarrollar herramientas que automaticen tareas repetitivas y garanticen la calidad del c\u00f3digo.<\/li>\n\n\n\n<li><strong>Facilitar la colaboraci\u00f3n<\/strong>: Asegurar que diferentes equipos puedan trabajar juntos de forma eficiente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Importancia de la Estandarizaci\u00f3n<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Onboarding m\u00e1s r\u00e1pido<\/strong>: Los nuevos desarrolladores se adaptan m\u00e1s r\u00e1pidamente a un c\u00f3digo estandarizado.<\/li>\n\n\n\n<li><strong>Calidad consistente<\/strong>: Reduce la incidencia de bugs y problemas de mantenimiento.<\/li>\n\n\n\n<li><strong>Facilita la revisi\u00f3n de c\u00f3digo<\/strong>: Las revisiones son m\u00e1s efectivas cuando hay un estilo consistente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Evitando Complejidad Innecesaria<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplicidad como est\u00e1ndar<\/strong>: Optar por soluciones simples que resuelvan los problemas sin a\u00f1adir complejidad excesiva.<\/li>\n\n\n\n<li><strong>Decisiones basadas en valor<\/strong>: Implementar tecnolog\u00edas y est\u00e1ndares que aporten beneficios claros al negocio y al equipo.<\/li>\n\n\n\n<li><strong>Cuidado con el <span class=\"quotes\">\u2033<\/span>hype<span class=\"quotes\">\u2033<\/span> tecnol\u00f3gico<\/strong>: No toda nueva librer\u00eda o framework es adecuada para el contexto de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Leyes Organizacionales Aplicadas al C\u00f3digo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La Ley de Conway afirma que la estructura de un sistema refleja la estructura de la organizaci\u00f3n que lo desarrolla. Por lo tanto, alinear la arquitectura t\u00e9cnica con la organizaci\u00f3n de los equipos no es solo beneficioso, sino esencial.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Estructuras alineadas<\/strong>: Equipos aut\u00f3nomos responsables de micro front-ends espec\u00edficos reflejan una arquitectura modular.<\/li>\n\n\n\n<li><strong>Comunicaci\u00f3n eficiente<\/strong>: Menos dependencias entre equipos reducen la necesidad de comunicaci\u00f3n constante y alineamientos complejos.<\/li>\n\n\n\n<li><strong>Evoluci\u00f3n continua<\/strong>: Una organizaci\u00f3n flexible permite que la arquitectura evolucione con las necesidades del negocio.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo Comenzar<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Proyecto piloto<\/strong>: Implementar un micro front-end en una parte no cr\u00edtica del sistema para entender los desaf\u00edos y beneficios.<\/li>\n\n\n\n<li><strong>Definir est\u00e1ndares<\/strong>: Establecer convenciones claras desde el principio para rutas, comunicaci\u00f3n y estilos.<\/li>\n\n\n\n<li><strong>Invertir en observabilidad<\/strong>: Las herramientas de monitoreo son esenciales para identificar problemas r\u00e1pidamente.<\/li>\n\n\n\n<li><strong>Documentaci\u00f3n y comunicaci\u00f3n<\/strong>: Mantener una documentaci\u00f3n actualizada y promover la comunicaci\u00f3n entre los equipos para compartir aprendizajes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Escalar front-ends de forma efectiva requiere una combinaci\u00f3n de soluciones t\u00e9cnicas y organizacionales. Las arquitecturas de micro front-ends ofrecen un camino para manejar la complejidad t\u00e9cnica, mientras que la estandarizaci\u00f3n y los equipos de plataforma abordan los desaf\u00edos humanos de la colaboraci\u00f3n a gran escala.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En Nubank, entendemos que la innovaci\u00f3n continua y la adaptabilidad son esenciales para ofrecer la mejor experiencia a nuestros clientes. Ya sea adoptando tecnolog\u00edas avanzadas o reestructurando nuestros equipos, estamos comprometidos a evolucionar y enfrentar los desaf\u00edos de escalabilidad del mundo moderno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfQuieres ser parte de este desaf\u00edo? \u00a1Siempre estamos buscando talentos apasionados por la tecnolog\u00eda y la innovaci\u00f3n para construir juntos el futuro morado! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para m\u00e1s informaci\u00f3n como esta, mira la grabaci\u00f3n del meetup de Ingenier\u00eda.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/GsnC0fkv4Ts?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=es-ES&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes<\/p>\n","protected":false},"author":178110103,"featured_media":30386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[2499,2631,2589],"tags":[2991,2500],"ppma_author":[2321],"class_list":["post-30392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering-es","category-foundation-infrastructure-es","category-software-engineering-es","tag-microservices-es","tag-software-engineering-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>De Micro a Macro: Escalando Front-Ends - Building Nubank<\/title>\n<meta name=\"description\" content=\"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"De Micro a Macro: Escalando Front-Ends - Building Nubank\" \/>\n<meta property=\"og:description\" content=\"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/\" \/>\n<meta property=\"og:site_name\" content=\"Building Nubank\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T17:30:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T17:32:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1-1024x683.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nubank Editorial\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nubank Editorial\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/\"},\"author\":{\"name\":\"Nubank Editorial\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\"},\"headline\":\"De Micro a Macro: Escalando Front-Ends\",\"datePublished\":\"2024-10-14T17:30:54+00:00\",\"dateModified\":\"2024-10-14T17:32:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/\"},\"wordCount\":1761,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"keywords\":[\"Microservices\",\"Software engineering\"],\"articleSection\":[\"Engineering\",\"Foundation &amp; Infrastructure\",\"Software Engineering\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/\",\"url\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/\",\"name\":\"De Micro a Macro: Escalando Front-Ends - Building Nubank\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"datePublished\":\"2024-10-14T17:30:54+00:00\",\"dateModified\":\"2024-10-14T17:32:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\"},\"description\":\"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"width\":5616,\"height\":3744,\"caption\":\"Nubankers working at Nu Office\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/de-micro-a-macro-escalando-front-ends\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"De Micro a Macro: Escalando Front-Ends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/\",\"name\":\"Building Nubank\",\"description\":\"We make the extraordinary happen\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\",\"name\":\"Nubank Editorial\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g0a78bc815f2126d9ba65b2af185671f1\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g\",\"caption\":\"Nubank Editorial\"},\"url\":\"https:\\\/\\\/building.nubank.com\\\/es\\\/author\\\/editorial\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"De Micro a Macro: Escalando Front-Ends - Building Nubank","description":"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/","og_locale":"es_ES","og_type":"article","og_title":"De Micro a Macro: Escalando Front-Ends - Building Nubank","og_description":"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes","og_url":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/","og_site_name":"Building Nubank","article_published_time":"2024-10-14T17:30:54+00:00","article_modified_time":"2024-10-14T17:32:34+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1-1024x683.jpg","type":"image\/jpeg"}],"author":"Nubank Editorial","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Nubank Editorial","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#article","isPartOf":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/"},"author":{"name":"Nubank Editorial","@id":"https:\/\/building.nubank.com\/es\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4"},"headline":"De Micro a Macro: Escalando Front-Ends","datePublished":"2024-10-14T17:30:54+00:00","dateModified":"2024-10-14T17:32:34+00:00","mainEntityOfPage":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/"},"wordCount":1761,"commentCount":0,"image":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","keywords":["Microservices","Software engineering"],"articleSection":["Engineering","Foundation &amp; Infrastructure","Software Engineering"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/","url":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/","name":"De Micro a Macro: Escalando Front-Ends - Building Nubank","isPartOf":{"@id":"https:\/\/building.nubank.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#primaryimage"},"image":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","datePublished":"2024-10-14T17:30:54+00:00","dateModified":"2024-10-14T17:32:34+00:00","author":{"@id":"https:\/\/building.nubank.com\/es\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4"},"description":"Desde la gesti\u00f3n de versiones hasta las estrategias de cach\u00e9: enfoques efectivos para arquitecturas, pr\u00e1cticas y estrategias para equipos y aplicaciones eficientes","breadcrumb":{"@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#primaryimage","url":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","contentUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","width":5616,"height":3744,"caption":"Nubankers working at Nu Office"},{"@type":"BreadcrumbList","@id":"https:\/\/building.nubank.com\/es\/de-micro-a-macro-escalando-front-ends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/building.nubank.com\/es\/"},{"@type":"ListItem","position":2,"name":"De Micro a Macro: Escalando Front-Ends"}]},{"@type":"WebSite","@id":"https:\/\/building.nubank.com\/es\/#website","url":"https:\/\/building.nubank.com\/es\/","name":"Building Nubank","description":"We make the extraordinary happen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/building.nubank.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/building.nubank.com\/es\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4","name":"Nubank Editorial","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g0a78bc815f2126d9ba65b2af185671f1","url":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","caption":"Nubank Editorial"},"url":"https:\/\/building.nubank.com\/es\/author\/editorial\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbKBB5-7Uc","jetpack_sharing_enabled":true,"authors":[{"term_id":2321,"user_id":178110103,"is_guest":0,"slug":"editorial","display_name":"Nubank Editorial","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/posts\/30392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/users\/178110103"}],"replies":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/comments?post=30392"}],"version-history":[{"count":3,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/posts\/30392\/revisions"}],"predecessor-version":[{"id":30398,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/posts\/30392\/revisions\/30398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/media\/30386"}],"wp:attachment":[{"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/media?parent=30392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/categories?post=30392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/tags?post=30392"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/building.nubank.com\/es\/wp-json\/wp\/v2\/ppma_author?post=30392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}