Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Micro Frontends: Rompiendo el monolito en las aplicaciones Web

196 views

Published on

Los microservicios son el estilo arquitectural de moda, pues nacieron para facilitar el mantenimiento y crecimiento de grandes aplicaciones monolíticas en el backend. Ahora nos hemos dado cuenta de que es posible aplicar algunos de sus principios a frontend, con resultados muy interesantes.

A continuación, te presentamos algunos de los temas específicos que se exponen:

¿Cómo nacen los microservicios?
¿Por qué nos olvidamos de dividir el frontend? ¿Qué es y cómo nace el concepto de Micro Frontends?
Técnicas para implementar Micro Frontends.
Mi experiencia con Micro Frontends.
Conclusiones y recomendaciones.

Published in: Technology
  • Genial, muchas gracias. Dentro de poco voy a empezar en un proyecto nuevo desde cero, todo esto me sirve para llegar con la propuesta de Micro Frontends y abrir el debate.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Micro Frontends: Rompiendo el monolito en las aplicaciones Web

  1. 1. Micro Frontends: rompiendo el monolito en las aplicaciones Web
  2. 2. Nuestras locaciones
  3. 3. Nuestros Panelistas Gian Carlo Vegas Senior Frontend Engineer Tracy Leveau Marketing Analyst
  4. 4. Agenda • Monolitos y microservicios. • ¿Y qué pasó con el frontend? • Nace un patrón. • ¿Qué es micro frontends? • Beneficios. • Técnicas para implementar micro Frontends. • Mi experiencia con micro Frontends. • Conclusiones y recomendaciones. ¿QUESTIONS? #FrontendsBelatrix
  5. 5. Monolitos y Microservicios • Estilo arquitectónico. • Despliegue simplificado. • Acotado por el negocio. • Adopción de tecnología nueva. • Escalable. • Equipos multidisciplinarios. • Equipos dedicados. ¿QUESTIONS? #FrontendsBelatrix Monolito Microservicios
  6. 6. ¿QUESTIONS? #FrontendsBelatrix ¿Y qué pasó con el frontend? N - Tier MVC Service Oriented- - -
  7. 7. ¿QUESTIONS? #FrontendsBelatrix Nace un patrón November 2016 ThoughtWorks® agrega Micro Frontends en su radar de tecnología por primera vez El término Micro Frontends empieza a gana relevancia en las búsquedas en Google -
  8. 8. ¿QUESTIONS? #FrontendsBelatrix ¿Qué es Micro Frontends? Web app como una composición de funcionalidades Equipos con una misión de negocio Desarrolladas por equipos independientes Equipos realmente multifuncionales, empoderados de punto a punto
  9. 9. ¿QUESTIONS? #FrontendsBelatrix Características • Mayor mantenibilidad. • Fácil de probar. • Mayor tolerancia a fallos. • Menor tiempo de carga. • Mayor apropiación del equipo. • Despliegues independientes. • Promueve la experimentación. • Organizado alrededor de capacidades de negocio. • Tecnologías heterogéneas.
  10. 10. Técnicas para implementar Micro Frontends • Multiples SPAs en diferentes URLs. • IFrames y postMessage API. • Single-SPA “meta framework”. • Web components.
  11. 11. ¿QUESTIONS? #FrontendsBelatrix Multiples SPAs en diferentes URLs Micrositios independientes viviendo en diferentes URLs Simple de implementar incluso en proyectos ya iniciados Requiere de módulos externos para compartir funcionalidad Requiere de coordinación respecto a los estándares a usar
  12. 12. ¿QUESTIONS? #FrontendsBelatrix IFrames y postMessage API Cada componente de la página vive en un iframe El trabajo con iframes puede ser complicado La comunicación se hace a través del API de postMessage
  13. 13. ¿QUESTIONS? #FrontendsBelatrix Single-SPA “meta framework” Múltiples frameworks trabajando en la misma página Usa un constructor global para transpilar, minificar y combinar las web apps Un solo repositorio con proyectos para cada web app Fácil de aplicar con librerías creadas para este fin
  14. 14. ¿QUESTIONS? #FrontendsBelatrix Web Components Cada parte es definida y consumida como un Web Component La comunicación es por medio de eventos o un event bus Requiere trabajo extra para el manejo de rutas Web Components no tienen soporte nativo en todos los navegadores
  15. 15. Mi experiencia
  16. 16. ¿Micro Frontends es para ti? • ¿Tienes muchos equipos o uno muy grande? • ¿Tienes experiencia en DevOps? • ¿Al negocio le interesa colaborar? • ¿Tu aplicación tiene funcionalidades independientes? • ¿Tu aplicación es tan grande que es difícil de mantener? ¿QUESTIONS? #FrontendsBelatrix
  17. 17. Preguntas
  18. 18. ¡Muchas Gracias! www.belatrixsf.com

×