¿Estás enfrentando desafíos al escalar tu front-end para atender a un número creciente de usuarios? Con el aumento de la complejidad de las aplicaciones web modernas, estrategias como micro front-ends, monorepositorios, gestión de estados globales y optimización de caché son esenciales.

En este artículo, exploramos las mejores prácticas para escalar aplicaciones front-end, discutiendo cómo implementar micro front-ends, gestionar versiones en monorepositorios, aplicar estrategias efectivas de caché y mantener estados globales de forma eficiente.

Descubre cómo Nubank está superando los desafíos de escalabilidad en el front-end y cómo puedes aplicar estos enfoques para construir interfaces de usuario ágiles, responsivas y fáciles de mantener.

El Desafío de la Escala

Empresas como Nubank enfrentan desafíos únicos. Con más de 100 millones de clientes en Brasil, México y Colombia, manejar sistemas distribuidos a gran escala no es solo una necesidad, sino una obligación. La complejidad de gestionar transacciones como PIX, garantizar la estabilidad de los servicios y proporcionar una experiencia consistente al usuario requiere soluciones innovadoras.

Además, trabajar con tecnologías avanzadas como Clojure y Datomic—cuyo desarrollo es influenciado por ingenieros dentro del propio Nubank—añade capas adicionales de complejidad y oportunidad. Estas tecnologías no son solo herramientas; son parte integral de nuestra estrategia de escalabilidad e innovación continua.

Descubre las oportunidades

Micro Front-Ends: Dividir para Conquistar

La arquitectura de micro front-ends ha emergido como una solución para muchos de los desafíos que enfrentan los grandes equipos de desarrollo. Pero, ¿qué son exactamente los micro front-ends?

Qué Son (y Qué No Son) los Micro Front-Ends

Los micro front-ends son una extensión 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.

Esto significa que cada equipo puede trabajar a su propio ritmo, elegir sus propias tecnologías (hasta cierto punto) e implementar actualizaciones sin impactar el sistema en su conjunto.

Es importante destacar que los micro front-ends no son:

  • Paquetes NPM o módulos monolíticos: Simplemente dividir un monolito en paquetes no ofrece los beneficios de implementación independiente o aislamiento de equipos.
  • Aplicaciones separadas para el usuario final: La experiencia del usuario debe ser unificada. No estamos hablando de múltiples aplicaciones distintas, sino de una sola aplicación compuesta por varias partes autónomas.

Beneficios de los Micro Front-Ends

  • Implementaciones independientes: Los equipos pueden implementar actualizaciones sin coordinarse con toda la organización.
  • Escalabilidad de equipos: Los nuevos desarrolladores pueden integrarse más rápidamente, enfocándose en una parte específica del sistema.
  • Aislamiento de fallos: Los problemas en un micro front-end no necesariamente afectan a toda la aplicación.
  • Flexibilidad tecnológica: Posibilidad de utilizar diferentes frameworks o librerías, aunque esto debe hacerse con cautela para evitar sobrecarga en el cliente.

Costos y Consideraciones

  • Configuración inicial compleja: Implementar micro front-ends requiere una planificación cuidadosa y una configuración inicial robusta.
  • Cohesión de la experiencia del usuario: Garantizar que la interfaz sea consistente y cohesiva es un desafío cuando están involucrados múltiples equipos.
  • Sobrecarga de rendimiento: El uso de diferentes frameworks puede aumentar el tamaño del bundle y afectar el rendimiento.
  • Observabilidad y depuración: Monitorear y depurar una aplicación compuesta por múltiples micro front-ends requiere herramientas y prácticas avanzadas.

Estrategias de Implementación

Existen varias aproximaciones para implementar micro front-ends:

Composición en el Lado del Cliente

Es el enfoque más común, donde la integración de los micro front-ends ocurre en el navegador del usuario. Tecnologías como Web Components, Module Federation (Webpack 5) y frameworks como Single SPA facilitan esta composición.

Composición en el Servidor o CDN

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écnicas como Edge Side Includes (ESI) pueden ser utilizadas.

Comunicación entre Micro Front-Ends

La comunicación eficiente es esencial. Se recomienda el uso de:

  • Eventos personalizados: Permiten que los micro front-ends se comuniquen sin depender directamente unos de otros.
  • Estados compartidos vía APIs del navegador: Como Local Storage o IndexedDB.
  • Evitar dependencias globales excesivas: Minimiza el acoplamiento entre los componentes.

Control de Versión en Monorepositorios

Gestionar versiones en un monorepositorio puede ser un desafío, especialmente cuando múltiples equipos están trabajando en diferentes partes del sistema. Aquí hay algunas prácticas para manejar esto:

Versionado Individual de Paquetes

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ódulos, manteniendo la independencia y facilitando la coordinación.

Evitando Submódulos Git

Aunque los submódulos Git pueden parecer una solución, generalmente introducen complejidad adicional. En su lugar, utilizar workspaces de NPM o Yarn puede simplificar la gestión de dependencias internas.

Beneficios del Monorepositorio

  • Consistencia de código: Facilita la estandarización y reutilización de código.
  • Visibilidad: Todos los equipos tienen acceso al código fuente completo, promoviendo la colaboración.
  • Automatización: Facilita la configuración de pipelines de CI/CD que abarcan todo el sistema.

Estrategias de Caché para la Carga de Bundles

La eficiencia en la carga de recursos es crucial para el rendimiento de la aplicación. Estrategias de caché bien implementadas pueden mejorar significativamente la experiencia del usuario.

Caché de Recursos Compartidos

Al usar tecnologías como Module Federation, es posible compartir dependencias comunes entre diferentes micro front-ends, evitando descargas redundantes. Para lograr esto:

  • Definir módulos compartidos: Configurar qué librerías o frameworks deben ser compartidos para evitar múltiples versiones en el cliente.
  • Versiones compatibles: Asegurarse de que las dependencias compartidas sean compatibles entre sí para evitar conflictos.

Caché a Nivel de CDN

Utilizar una Red de Distribución de Contenido (CDN) permite que recursos estáticos sean entregados más rápidamente a los usuarios, aprovechando el caché distribuido.

  • Configuraciones de Cache-Control: Ajustar los encabezados HTTP para controlar cómo y por cuánto tiempo los recursos deben ser almacenados en caché.
  • Invalidación de caché: Tener estrategias para invalidar o actualizar el caché cuando se implementen nuevas versiones de los recursos.

Caché en el Navegador

  • Service Workers: Implementar caché vía Service Workers para un control más granular sobre qué recursos se almacenan y cuándo se actualizan.
  • Preloading y Prefetching: Anticipar qué recursos serán necesarios y cargarlos de antemano.

Gestionando Estados Globales en Aplicaciones Host

Mantener un estado global consistente en una aplicación compuesta por múltiples micro front-ends es un desafío.

Estrategias Recomendadas

  • Eventos personalizados: Utilizar el sistema de eventos del navegador para la comunicación entre micro front-ends sin crear dependencias rígidas.
  • Almacenamiento local compartido: APIs como Local Storage o IndexedDB pueden servir como medio para compartir el estado global.
  • Contextos globales: En frameworks como React, se puede usar Context API, pero se debe tener cuidado de no introducir acoplamiento indeseado.

Buenas Prácticas

  • Aislamiento de dominios: Cada micro front-end debe ser responsable de su propio estado local e interactuar con el estado global solo cuando sea necesario.
  • Contratos bien definidos: Establecer interfaces claras para la comunicación entre componentes, facilitando el mantenimiento y evolución.

Estandarización y Equipos de Plataforma

Mientras que los micro front-ends abordan la escalabilidad técnica, la estandarización de código y la existencia de equipos de plataforma son cruciales para la escalabilidad humana de los equipos de desarrollo.

El Papel de los Equipos de Plataforma

  • Definición de buenos estándares: Crear y mantener estándares de código que faciliten el trabajo de los equipos.
  • Herramientas e infraestructura: Desarrollar herramientas que automaticen tareas repetitivas y garanticen la calidad del código.
  • Facilitar la colaboración: Asegurar que diferentes equipos puedan trabajar juntos de forma eficiente.

Importancia de la Estandarización

  • Onboarding más rápido: Los nuevos desarrolladores se adaptan más rápidamente a un código estandarizado.
  • Calidad consistente: Reduce la incidencia de bugs y problemas de mantenimiento.
  • Facilita la revisión de código: Las revisiones son más efectivas cuando hay un estilo consistente.

Evitando Complejidad Innecesaria

  • Simplicidad como estándar: Optar por soluciones simples que resuelvan los problemas sin añadir complejidad excesiva.
  • Decisiones basadas en valor: Implementar tecnologías y estándares que aporten beneficios claros al negocio y al equipo.
  • Cuidado con el ″hype″ tecnológico: No toda nueva librería o framework es adecuada para el contexto de tu aplicación.

Leyes Organizacionales Aplicadas al Código

La Ley de Conway afirma que la estructura de un sistema refleja la estructura de la organización que lo desarrolla. Por lo tanto, alinear la arquitectura técnica con la organización de los equipos no es solo beneficioso, sino esencial.

  • Estructuras alineadas: Equipos autónomos responsables de micro front-ends específicos reflejan una arquitectura modular.
  • Comunicación eficiente: Menos dependencias entre equipos reducen la necesidad de comunicación constante y alineamientos complejos.
  • Evolución continua: Una organización flexible permite que la arquitectura evolucione con las necesidades del negocio.

Cómo Comenzar

  • Proyecto piloto: Implementar un micro front-end en una parte no crítica del sistema para entender los desafíos y beneficios.
  • Definir estándares: Establecer convenciones claras desde el principio para rutas, comunicación y estilos.
  • Invertir en observabilidad: Las herramientas de monitoreo son esenciales para identificar problemas rápidamente.
  • Documentación y comunicación: Mantener una documentación actualizada y promover la comunicación entre los equipos para compartir aprendizajes.

Conclusión

Escalar front-ends de forma efectiva requiere una combinación de soluciones técnicas y organizacionales. Las arquitecturas de micro front-ends ofrecen un camino para manejar la complejidad técnica, mientras que la estandarización y los equipos de plataforma abordan los desafíos humanos de la colaboración a gran escala.

En Nubank, entendemos que la innovación continua y la adaptabilidad son esenciales para ofrecer la mejor experiencia a nuestros clientes. Ya sea adoptando tecnologías avanzadas o reestructurando nuestros equipos, estamos comprometidos a evolucionar y enfrentar los desafíos de escalabilidad del mundo moderno.

¿Quieres ser parte de este desafío? ¡Siempre estamos buscando talentos apasionados por la tecnología y la innovación para construir juntos el futuro morado!

Para más información como esta, mira la grabación del meetup de Ingeniería.

Descubre las oportunidades