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.
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
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.
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
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
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
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.