Skip to Content

¿Qué es un micro frontend?

¿Qué es un micro frontend?

La mayoría de los desarrolladores ya han oído hablar de la arquitectura de microservicios, pero la micro frontend es un término mucho menos conocido. Como su nombre lo sugiere, la microfrontend es similar en concepto a los microservicios. Intenta resolver muchos de los mismos problemas que presentan las aplicaciones monolíticas. Son demasiado grandes, difíciles de trabajar y difíciles de hacer cambios. Incorporar a nuevas personas para que trabajen en ellas puede ser un problema. Además, si varios equipos de personas están trabajando en diferentes partes de la aplicación, deberán coordinar todos sus cambios entre sí.

Los microservicios lo ayudan a dividir el backend en servicios más independientes. El mismo enfoque se puede utilizar para dividir aplicaciones de una sola página (SPA) en aplicaciones más pequeñas, con la necesidad adicional de un “orquestador” que pueda volver a unir diferentes partes para que el usuario siga experimentando comportamiento de SPA.

¿Cuáles son las alternativas a una arquitectura micro frontend?

Por supuesto, existen otras formas de lidiar con algunos de los aspectos no deseados de las aplicaciones enormes, como separar parte del código en su propio paquete de npm. Eso puede resolver parte del problema, como que la recuperación es demasiado grande. Por ejemplo, en Angular, también puede separar el código en un módulo que se puede cargar de forma perezosa. Esto puede permitir la división vertical de la aplicación en cierta medida. Pero también tiene sus desventajas, como tener que construir el proyecto de primer nivel cuando se actualiza una de las dependencias. Además, la experiencia del desarrollador no es tan excelente. Al usar cualquier tipo de marco, es una buena idea actualizar todo a la misma versión, pero es un gran compromiso que nadie está entusiasmado por hacer. También tiene la opción de unir varias aplicaciones a través de iframe. Los hace independientes, pero diría que tal vez son demasiado independientes, ya que la comunicación entre aplicaciones es un problema y también lo es compartir código, estilos, etc. 

¿Microfrontends al rescate?

Las microfrontends son una combinación de estos dos enfoques. Cada micro frontend es una aplicación separada que se compara con el SPA. No se compila a un index.html con archivos de estilo y script vinculados, sino a un módulo de JavaScript. En lugar de un iframe en la aplicación “principal”, el código define que cuando la URL coincide con algún patrón, el módulo se carga y se coloca en un lugar específico. Gracias a esto, podemos tener varias aplicaciones en la misma página que se pueden interconectar entre sí.

Como resultado, las microfrontends no necesitan manejar el diseño de la aplicación y las reglas básicas de CSS que solo se pueden manejar en la aplicación principal. Igualmente beneficioso es el hecho de que si tengo varias microfrontends usando la misma versión de React, puedo pedirles que compartan el módulo React. No es necesario descargarlo por separado para cada micro frontend. Tener diferentes versiones de un módulo JS tampoco es un problema.

La principal preocupación con las microfrontends es asegurarse de que sus estilos no se desborden a otras partes de la aplicación. Afortunadamente, los marcos de UI más comúnmente utilizados tienen herramientas para manejarlo con facilidad.

Herramientas para arquitecturas micro frontend

Escribir su propio código para cargar aplicaciones de microfrontend sería una tarea muy importante. Afortunadamente, existen varios marcos que manejan la organización y ofrecen herramientas para convertir las aplicaciones escritas en los marcos más populares al formato de microfrontend.

En Pure, elegimos un solo spa. Los principales beneficios que hemos encontrado son que es fácil de entender, ofrece una amplia asistencia para los marcos de trabajo de JS y tiene documentación detallada. Además, un solo spa ofrece varios tipos de micro frontends, cada uno adecuado para trabajos ligeramente diferentes.

En este momento, solo usamos el tipo “Aplicación” porque es el más fácil de usar para pasar de SPA a micro frontends. Otros tipos también requieren una arquitectura de microfrontend más detallada. Además, los autores de un solo spa recomiendan la “aplicación” como predeterminada.

Aplicación

Paquete

Utilidad

Enrutamiento

Una o más rutas

No

No

Interfaz de programación de aplicaciones (API, Application Program Interface)

API declarativa

API imperativa

Interfaz de exportación

IU

Reproduce la interfaz de usuario

Reproduce la interfaz de usuario

Puede renderizar la interfaz de usuario

Ciclo de vida

un solo spa

Poseer

Módulo externo sin ciclo de vida

Cuándo usar

Bloque básico

Componente que se utilizará en diferentes marcos

Compartir la lógica

Slide

Desarrollo de microfrontends utilizando el marco de trabajo de una sola SPA

En este momento, estamos usando un solo spa con una de nuestras aplicaciones más grandes que actualmente contiene alrededor de cinco micro frontends. A veces, diferentes equipos están trabajando en estas microfrontends que los principales equipos de desarrollo de aplicaciones. Afortunadamente, en los últimos seis meses desde que cambiamos a micro frontends, no hemos informado problemas. También estamos muy contentos de que la aplicación principal no esté tan hinchada como en el pasado y pueda actualizarse más fácilmente. Además, no nos preocupan los efectos secundarios al agregar una nueva funcionalidad, ya que generalmente se hace con un micro frontend. En un futuro cercano, nos gustaría dividir los frontends de otras aplicaciones grandes que estamos desarrollando en Pure, ya que es probable que los beneficios también sean bastante significativos para ellos. Le recomendamos probar micro frontends si se enfrenta a los mismos problemas que teníamos.

09/2024
Innovating the Educational Experience with Perdoceo Education & Pure Storage
When IT leaders at Perdoceo Education made the decision to adopt a cloud-first strategy, they didn’t hesitate to involve Pure Storage.
Casos de estudio de clientes
3 páginas
CONTÁCTENOS
¿Preguntas, comentarios?

¿Tiene alguna pregunta o comentario sobre los productos o las certificaciones de Pure?  Estamos aquí para ayudar.

Programe una demostración

Programe una demostración en vivo y compruebe usted mismo cómo Pure puede ayudarlo a transformar sus datos en potentes resultados. 

Llámenos: 800-976-6494

Medios de comunicación: pr@purestorage.com

 

Pure Storage, Inc.

2555 Augustine Dr.

Santa Clara, CA 95054

800-379-7873 (información general)

info@purestorage.com

CERRAR
¡Su navegador ya no es compatible!

Los navegadores más antiguos a menudo representan riesgos de seguridad. Para brindar la mejor experiencia posible al utilizar nuestro sitio, actualice a cualquiera de estos navegadores más recientes.