Construyendo un Mejor Marco de Micro-Frontend que Permite la Libertad de Plataforma

Rate this content
Bookmark
Slides

Una experiencia moderna de herramientas generalmente implica un viaje de usuario en varios medios, incluyendo Web, VS Code, GitHub, etc. Escribir código y componentes personalizados para cada plataforma no es el enfoque más eficiente, lo que lleva a la duplicación de código y, lo más importante, el riesgo de una falta de una experiencia cohesiva.
La Arquitectura Multiplicadora es un conjunto de patrones, técnicas y bibliotecas que, utilizando micro frontends y algunos servicios de backend innovadores, permiten la reutilización del componente de herramientas en diferentes medios de distribución
Ven a esta charla para aprender cómo somos capaces de permitir a varios equipos de herramientas en Red Hat entregar la mejor experiencia nativa de componentes de UI (s y Vistas) en VS Code, Web, y Desktop, e integrarlos directamente en GitHub (Extensión de Chrome) con cambios mínimos en su base de código.

Saravana Srinivasan
Saravana Srinivasan
28 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los desafíos de escalar y mantener aplicaciones y cómo las decisiones de arquitectura pueden impactarlas. Introduce el concepto de Microfrontend y sus ventajas de escalado más fácil, identificación de problemas y diversificación de pilas de tecnología. Se explica la implementación de Microfrontend en Red Hat, incluyendo el uso de un nuevo marco, estrategias de comunicación y la necesidad de escalabilidad y mantenimiento en aplicaciones grandes. La charla también cubre el marco de arquitectura multiplicadora de micro frontend y sus componentes centrales. Se muestra la implementación de Microfrontend en VS Code y ejemplos de combinación de diferentes marcos en una sola aplicación. Se aborda el problema de la duplicación de la carga de la biblioteca utilizando módulos federados en webpack.

Available in English

1. Introducción al Micro Front-end

Short description:

Hola a todos, bienvenidos a mi charla sobre cómo construir una mejor aplicación de micro front-end. Soy Sarvana Balaji Srinivasan, un ingeniero de software senior en Red Hat con experiencia en marcos de JavaScript como React, Angular y Node.js. Hoy quiero discutir los desafíos de escalar y mantener aplicaciones, y cómo las decisiones de arquitectura pueden impactarlas. Sumérgete en la historia de Red Hat, donde mejoramos el producto Jbpm con las últimas tecnologías y tecnologías en la nube.

Hola a todos, espero que estén pasando un buen rato escuchando algunas de las charlas realmente interesantes en el evento remoto de React Day Berlin. Definitivamente, mi charla mantendrá este impulso y entregará algunas cosas interesantes sobre micro front-end. Con esa nota, les doy la bienvenida a mi charla, Construir una mejor aplicación de micro front-end que ofrece libertad de plataforma.

Soy Sarvana Balaji Srinivasan. Trabajo como ingeniero de software senior en Red Hat, con el rol de desarrollador full stack. Principalmente hago tecnologías de JavaScript. He estado contribuyendo a la plataforma AI de Red Hat OpenShift. Trabajo en cosas de UI así como en algunas cosas de computación de borde. Tengo experiencia trabajando en varios marcos de JavaScript como React, Angular, Node.js, etc. Entonces sí, eso es sobre mí.

Estás viendo la conferencia de React, ¿verdad? Entonces hablemos de JavaScript y React. Han pasado 28 años desde que se introdujo JavaScript. Ya ha pasado su marca de años de jubileo de plata de 25 años. Y el crecimiento de JavaScript ha sido tremendo a lo largo de los años después de la introducción de marcos emocionantes. Incluso los principales marcos construidos en JavaScript han estado aquí durante bastante tiempo. React ha estado aquí durante 10 años. Angular y Node.js han estado aquí durante casi 14 años. Vue.js ha estado aquí durante casi 9 años y la lista continúa. Eso significa que tenemos aplicaciones que son un poco antiguas ahora. Ahora, quiero decir que las aplicaciones han sido desarrolladas y mantenidas durante mucho tiempo. Eventualmente, las aplicaciones siguen creciendo, creciendo y creciendo exponencialmente. Cuando las aplicaciones están creciendo mucho, son realmente difíciles de escalar y mantener. Empezarás a recibir quejas de tus clientes sobre varias cosas y problemas asociados con ello. Por supuesto, no es solo por JavaScript o el marco de JavaScript, podría haber varias razones asociadas con ello que es un tema aparte a discutir. Pero una razón podría ser la decisión de la organización sobre cómo quieren construir su aplicación, la arquitectura. En Red Hat tuvimos una situación similar.

Ahora esto me lleva a la siguiente diapositiva, la historia de Red Hat. Teníamos un producto llamado Jbpm que es un producto de automatización de negocios que se considera como uno de los pilares principales de Red Hat. Era un producto heredado. En algún momento, decidimos mejorar el producto y acomodar algunas de las últimas tecnologías, haciéndolo disponible como un servicio con tecnologías en la nube.

2. Introducción al Microfrontend

Short description:

Esta parte discute la experiencia de descomponer un gran bloque de aplicaciones web monolíticas en Red Hat. Introduce el concepto de Microfrontend, enfatizando su objetivo de desacoplar y descomponer una aplicación monolítica en piezas más pequeñas. Las ventajas de Microfrontend incluyen una escalabilidad más fácil, identificación de problemas y diversificación de pilas de tecnología.

Fue entonces cuando nos encontramos en una situación para descomponer un gran bloque de aplicaciones web monolíticas. Ya teníamos Microsoft Visual en ese momento en el back end, pero nuestro front end era un gran bloque de aplicaciones monolíticas que queríamos descomponer. Esta charla es sobre compartir la experiencia que tuvimos en Red Hat al construir la aplicación monolítica y cómo nuestro nuevo marco, la multiplicación de architecture, permitió ejecutar los web components en la plataforma que teníamos como objetivo.

Antes de entrar en Microfrontend, hablemos de los patrones arquitectónicos disponibles. Los paisajes arquitectónicos están cambiando mucho en los últimos años, comenzando con la architecture evolutiva, construyendo software que está diseñado para evolucionar con el tiempo a medida que cambian las prioridades comerciales, cambian las demandas de los clientes y surgen nuevas tecnologías. Luego tenemos los microservices, que estructuran una aplicación como una colección de servicios independientes. Luego tenemos la palabra de moda, que es serverless en este punto, que incorpora backend como una función. Finalmente tenemos Microfrontend aquí. Así que Microfrontend no es algo nuevo. Ya ha estado aquí durante bastante tiempo. Antes de entrar en Microfrontend, me gustaría presentar una cita de un reconocido desarrollador de software llamado Cam Jackson. Según él, un estilo arquitectónico donde las aplicaciones de frontend independientes se componen en un todo mayor. Discutiremos lo que quiso decir en esta cita en detalle en las próximas diapositivas. Pero entraremos en qué es Microfrontend. Se lo pasaré a ustedes. No quiero aburrirlos con la definición de Microfrontend. Estoy seguro de que ya habrán oído suficiente sobre ello en otras charlas y presentaciones. Así que si todavía quieren saber la definición de Microfrontend, les recomendaría encarecidamente que revisen esas charlas para entender la definición. Pero me gustaría saltar directamente al principal objetivo de Microfrontend, que es el desacoplamiento. Así que el principal lema de Microfrontend es romper tu gran bloque monolítico de aplicación en piezas más pequeñas y hacer la vida del desarrollador más fácil. Tiene muchas ventajas. Algunas de ellas son que la escalabilidad y la identificación de problemas serán más fáciles. Y hay un dicho que dice que no tienes que poner todos tus huevos en una sola canasta, ¿verdad? Así que como se muestra en esta imagen, no tienes que poner todo en una sola canasta. Será difícil de manejar. Tiendes a romperlo. Así que esto se aplica a tu tecnología también. No tienes que poner todo en tu única canasta, así que puedes diversificar tu aplicación. Así que la diversificación no es solo para tu riqueza o dinero. Siempre puedes diversificar tus pilas de tecnología también, haciendo que tu aplicación sea fácil de acceder y mantener. Así que mientras discutimos sobre microfinanzas, las microfinanzas no son la única solución que tenemos en este punto para mantener tu aplicación.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
Micro-Frontends With React & Vite Module Federation
React Advanced Conference 2023React Advanced Conference 2023
20 min
Micro-Frontends With React & Vite Module Federation
Top Content
From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes?
I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.
Sharing is Caring: (How) Should Micro Frontends Share State?
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss & compare different solutions in React.
Micro-Frontends Performance and Centralised Data Caching
React Advanced Conference 2021React Advanced Conference 2021
27 min
Micro-Frontends Performance and Centralised Data Caching
Common myths about Micro-Frontends hold that they are bad for performance or that developers implementing this architectural style don’t care about the performance implications because they are focusing on fixing the developer experience and organizational issues rather than focusing on the user experience, however, the reality is altogether different. Micro-Frontends are not inheritably bad for performance and, as is often the case in software development, making best use of the technology depends on correct implementation. This talk will demonstrate how Micro-Frontends can make your applications faster and more resilient while keeping the benefits of independent deployments.

Workshops on related topic

Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Alex Lobera
Alex Lobera
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.