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

Rate this content
Bookmark
Slides
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.

From Author:

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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Microfrontend es un estilo arquitectónico que descompone una gran aplicación monolítica en piezas más pequeñas e independientes, facilitando así la escalabilidad, el mantenimiento y la identificación de problemas. Su objetivo principal es el desacoplamiento, permitiendo una mayor flexibilidad y eficiencia en el desarrollo.

React ha estado en uso durante 10 años. Su desarrollo ha contribuido significativamente al crecimiento de JavaScript, especialmente con la introducción de marcos emocionantes que han avanzado en la tecnología web.

Sarvana Balaji Srinivasan es un ingeniero de software senior en Red Hat y trabaja como desarrollador full stack. Tiene experiencia en varias tecnologías de JavaScript y ha contribuido a la plataforma AI de Red Hat OpenShift, trabajando en UI y computación de borde.

La arquitectura Microfrontend ofrece ventajas como mejor escalabilidad, fácil identificación y solución de problemas, y desacoplamiento de componentes. Esto permite a los equipos de desarrollo trabajar de manera más autónoma y facilita la gestión de aplicaciones grandes.

En Red Hat, se utilizó la estrategia Microfrontend para descomponer un bloque monolítico de aplicaciones web del producto Jbpm, mejorando así su mantenimiento y escalabilidad al integrar tecnologías modernas y hacerlo disponible como un servicio en la nube.

Las estrategias de integración en los Microfrontends incluyen la integración en tiempo de ejecución y la integración en tiempo de compilación. La integración en tiempo de ejecución permite despliegues independientes de componentes, mientras que la integración en tiempo de compilación es más fácil de configurar y mantener, aunque requiere despliegues frecuentes del contenedor.

La arquitectura de multiplicación es un nuevo marco de trabajo para Microfrontends desarrollado por Red Hat, diseñado para ejecutar componentes web en varias plataformas. Utiliza abstracciones como el canal, el sobre, la vista y el editor para facilitar la implementación de aplicaciones en diferentes entornos.

Las plataformas objetivo mencionadas incluyen VSCode, extensiones de navegador, GitHub y aplicaciones web, elegidas por su amplia accesibilidad y la prevalencia de navegadores, facilitando así el acceso y la operatividad de las aplicaciones web desarrolladas.

Saravana Srinivasan
Saravana Srinivasan
28 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Transcription

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Micro-Frontends con React y Federación de Módulos Vite
React Advanced Conference 2023React Advanced Conference 2023
20 min
Micro-Frontends con React y Federación de Módulos Vite
Top Content
Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
“Microfrontends” para móviles en React Native
React Advanced Conference 2023React Advanced Conference 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
React Summit 2022React Summit 2022
23 min
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
Top Content
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.

Workshops on related topic

Micro Frontends con Module Federation y React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends con Module Federation y React
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez has trabajado en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito frontend en piezas más pequeñas para que cada equipo pueda construir e implementar de forma independiente. En este masterclass aprenderás cómo construir aplicaciones de React grandes que escalen utilizando micro frontends.
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.