Micro Frontends: Rompiendo el monolito en las aplicaciones Web
•Descargar como PPTX, PDF•
1 recomendación•862 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Micro Frontends: Rompiendo el monolito en las aplicaciones Web
Similar a Micro Frontends: Rompiendo el monolito en las aplicaciones Web (20)
Más de Belatrix Software
Más de Belatrix Software (20)
Último
Último (12)
Micro Frontends: Rompiendo el monolito en las aplicaciones Web
- 1. Micro Frontends: rompiendo el monolito en las aplicaciones Web
- 3. Nuestros Panelistas Gian Carlo Vegas Senior Frontend Engineer Tracy Leveau Marketing Analyst
- 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. 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. ¿QUESTIONS? #FrontendsBelatrix ¿Y qué pasó con el frontend? N - Tier MVC Service Oriented- - -
- 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. ¿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. ¿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. Técnicas para implementar Micro Frontends • Multiples SPAs en diferentes URLs. • IFrames y postMessage API. • Single-SPA “meta framework”. • Web components.
- 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. ¿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. ¿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. ¿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. Mi experiencia
- 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. Preguntas
Notas del editor
- At the beging we had monoliths which is an approach in were we put everything together.. presentation, business logic, data access and so on.. everything is happening in that big solution. We use different kind of architectures to support this, like N-Tier or the begging of MVC, then we realice that we can split the monolith in services, and the Service Oriente Architecture came up, , as a natural evolution of service oriented architecture, the mmicroservices were born, and that gave us a lot of adventages but also a lot new challanges. Sincronization, distributed transaction, distrubited data storage, handling asyncrony, handly independant deploys and so on. HEre are some characteristics of micricroservices that we should keep in mind. Micro services is an Architectural style. The services are organized arround business capabilities (not packages or funcionalities). Each service has an independant deploy. The services are loosely capled and they are highly maintainable and testable
- But here is someting missing here, we have been talking about the backend, starting from Sservice Oriente Architecure, all the effort moves to simplify the work arround the "hard logic", to simplify the work on the backend. But What about the front end? The backend evolve in time, which is normal from monolith to services to microservices and along with these a whole ecosystem grows, mean while in the frontend, we live worriend creating new libraries and frameworks, improving javascript with new features, developing pre and pos-compilers for css, new ways to concat and package the code and so on. Everythin for the famous SPAs ecosystem and all that stuff are great if you are not thinking in "enterprice” applications, because handling one big codebase for a huge application could be verry complicated. Some solutions came up for handling larges amount of code, for example, lazy loading, but none of there were standar or universal. We forgot to see the that in the other side, on the backend, there are prooved strategies for the problems that we are facing. At the end what happend is that we move the pain from the backend to the front end.
- In some point we realyce that we should do something about the frontend monolith. The frontend people started to worriend about architecture. We realice that if we continue growing up our code base at some point it will become unamaintanable, so many people in diferent place star working in solutions. Arround the end of 2016, the people from thoughtworks, have been colected enogugh data to include a new approach that is been used on the frontend side. They call it microfrontends. Almos at the same time the term started to be relevant in google searches. Today, Micro Frontend is clasified as a Trial trend in the thoughtworks radas, which means is moment to try it, gain some experience and decide if its a good idea to apply it in a big scale.
- Ok, so what are microfrontends, The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface, we can merge the microfrontends approach with micricroservices to have teams capable to unnswere be therir selfs a business capability or a business need. In this slice we can see a simple example of how microfrontends site could look like. There are to shared areas, the navation an the footer, also we have a banner at the top which is handled by the gold team, a Product information section that could be the main objetive of this page which is handled by the orange team and a Suggested products which is handled but the purple team. Each team wories about one funcionality, about one business capability an the everything is put together in one pages, there are some techniques to stick everything and i will about them.