Micro Frontends: Ampliando la idea de microservicios

En los últimos años, la idea de los microservicios ha experimentado un aumento meteórico en popularidad debido al hecho de que proporciona una estrategia superior para el desarrollo de software del lado del servidor en comparación con los backends monolíticos.

Los microservicios permiten a las empresas dividir sistemas grandes y complicados en múltiples componentes independientes más pequeños que se pueden crear, implementar y escalar de forma independiente. Sin embargo, no se ha implementado la misma estrategia para las bases de código frontend, lo que sigue siendo una lucha para muchas empresas diferentes.

Las microfrontends son una parte importante del desarrollo web moderno, ya que proporcionan las estructuras organizativas y la arquitectura necesarias para facilitar la creación de sitios web modernos. Los microfrontends son un enfoque arquitectónico que divide los monolitos del frontend en partes más pequeñas y simples. Esto hace que sea más fácil desarrollarlos, probarlos e implementarlos por separado, al mismo tiempo que da a los clientes la impresión de que están comprando un producto único y unificado.

Cuando se trata de desarrollar aplicaciones web, los programadores se enfrentan a una variedad de obstáculos que pueden superar con la ayuda de esta tecnología. Una de las ventajas más importantes del uso de microfrontends es que permiten a las empresas crear una aplicación web progresiva o responsiva de una manera que requiere menos tiempo y es más rentable.

Cuando los desarrolladores intentan integrar nuevas funciones en un código base existente, a menudo se encuentran con problemas.

Debido a que los microfrontends permiten una integración perfecta, se pueden agregar nuevas funciones sin preocuparse por cómo se verá afectada la arquitectura general de la aplicación. Del mismo modo, cuando se utilizan funciones del lenguaje JavaScript recientemente introducidas, puede resultar complicado incorporar las herramientas de compilación adecuadas en un procedimiento de compilación ya establecido.

Los desarrolladores pueden emplear nuevas funciones del lenguaje gracias a la disponibilidad de microfrontends, lo que los libera de la responsabilidad de incorporar estas funciones al código base existente. Además, las microfrontends facilitan la ampliación del proceso de desarrollo, permitiendo que numerosos equipos trabajen simultáneamente en un solo proyecto.

Esto se debe a que las partes más pequeñas e independientes facilitan que cada equipo trabaje en ciertos componentes del programa sin tener que preocuparse por la arquitectura de la aplicación en su conjunto. La arquitectura modular de las microfrontends minimiza el acoplamiento y la complejidad que a menudo afectan a las bases de código grandes y monolíticas, lo que permite una mayor eficiencia en los procesos de desarrollo e implementación.

La estrategia de micro frontends fue incluida en la edición 2016 de Thoughtworks Technology Radar como un método que las empresas deberían evaluar. Posteriormente, el método avanzó a la fase experimental. Finalmente se adoptó, lo que sugiere que es una estrategia probada que las empresas deberían implementar siempre que tenga sentido hacerlo.

Con la ayuda de microfrontends, las empresas pueden aprovechar una estrategia de desarrollo web que es más efectiva y escalable, lo que hace que sea mucho más sencillo brindar experiencias de alta calidad a los clientes.

Entonces, ¿qué son exactamente estas microfrontends?

¿Cuáles son algunos de los beneficios y desafíos más importantes asociados con esto?

¿Cómo ponemos esto en práctica?

¿Cómo podemos saber si realmente están contribuyendo al desarrollo de un mejor producto para que podamos venderlo?

Hoy me gustaría hablar sobre el tema y aconsejarle sobre cómo empezar con las microfrontends.

1. ¿Qué son las microfronteras?

Las microfrontends son una forma de crear software que divide la interfaz de una aplicación en varias partes separadas e independientes. Cada una de estas piezas está construida y es propiedad de un equipo diferente. Este método es especialmente útil para aplicaciones más grandes con muchas secciones o características, ya que permite que diferentes equipos asuman la responsabilidad de diferentes funcionalidades y las creen por separado.

Si bien cada equipo puede ser responsable de diferentes partes del proceso de desarrollo general, todos quieren asegurarse de que el producto final brinde a los usuarios una experiencia consistente. Esto se puede hacer con un “caparazón” integral que tenga el lenguaje de diseño acordado para cada equipo y facilite la comunicación entre todas las partes.

Los desarrolladores también pueden utilizar sus lenguajes de programación favoritos con esta arquitectura de microservicios sin afectar a otros equipos que puedan estar utilizando una pila de tecnología diferente. También ayuda a reducir las dependencias al garantizar que un cambio en una parte no signifique que sea necesario reelaborar cualquier otra parte del sistema.

Una arquitectura de microservicios también ayuda a dividir proyectos grandes en partes más pequeñas y manejables . Esto brinda a los equipos más libertad para dividir el trabajo y facilita la escala y la implementación de recursos.

Una tienda online es un buen ejemplo de arquitectura de microservicios. Un equipo crea el carrito de compras, mientras que otro monitorea los perfiles de los usuarios, maneja el cumplimiento de los pedidos, administra el inventario, etc.

Luego, todas estas partes separadas se combinan para crear una experiencia de usuario unificada. Esto se hace con un caparazón integral que une todo y garantiza que todas las partes utilicen el mismo lenguaje de diseño, protocolos de comunicación, etc.

La idea de los microservicios se puede llevar aún más lejos con las “microfrontends”. Cada componente de una micro interfaz se compone de múltiples aplicaciones de interfaz que se han creado por separado, cada una con su propio proceso de compilación automatizado, flujo de trabajo de integración/entrega continua, sistemas de compilación de lenguaje, etc.

En tiempo de ejecución, todas estas aplicaciones se combinan en una URL o nombre de dominio. Esto permite a los grupos trabajar juntos de manera más efectiva en proyectos grandes utilizando las mejores prácticas de DevOps, como sistemas de control de versiones (Git), compilaciones automatizadas (Jenkins/Travis CI), etc., sin tener que preocuparse por problemas de seguridad entre componentes de terceros. o integraciones durante el desarrollo y la implementación.

2. Los beneficios de implementar microfrontends

Las microfrontends se han convertido en una forma popular de crear aplicaciones empresariales porque ofrecen muchos beneficios sobre los métodos tradicionales. Los principales beneficios de las microfrontends son un tiempo de comercialización más rápido, una mejor escalabilidad y mantenibilidad, una mayor velocidad del equipo y una mayor extensibilidad. En este artículo, veremos cómo se pueden utilizar las microfrontends para lograr estas ventajas.

Primero, pensemos en la rapidez con la que los productos pueden llegar al mercado. Al separar el front-end de una aplicación en microservicios separados, los equipos de desarrollo pueden crear partes aisladas que se pueden implementar más rápido que las aplicaciones monolíticas tradicionales. Además, los equipos no necesitan trabajar tanto juntos porque pueden hacer su trabajo solos hasta que llegue el momento de fusionar el código. Esto reduce en gran medida el tiempo que lleva agregar nuevas funciones y actualizaciones.

En segundo lugar, el uso de microfrontends facilita mucho el escalado y el mantenimiento en muchos sentidos. Al dividir la aplicación en partes más pequeñas, cada parte puede escalarse y administrarse por sí sola, lo que facilita la búsqueda y solución rápida de problemas. Además, cada servicio es más fácil de depurar y refactorizar, lo que facilita su adición al sistema.

En tercer lugar, el uso de microfrontends hace que el equipo avance más rápido. Los miembros de un equipo de desarrollo tienen más libertad para trabajar por su cuenta sin depender de otros equipos. Esto asigna más responsabilidad al individuo, quien luego puede crear módulos que funcionen con todo el sistema pero que sean independientes.

Además, es más fácil para los miembros del equipo hablar entre sí porque no necesitan coordinarse a menos que sea el momento de fusionar el código. Esto elimina muchos de los problemas que surgen cuando los equipos no están sincronizados y están confundidos.

Cuarto, es fácil agregar algo a la arquitectura. Con microfrontends, es más fácil corregir errores y cambiar partes de una aplicación. Esto significa que estos servicios pueden obtener nuevas características y funciones sin afectar otras partes del sistema. Además, se pueden realizar cambios que no es necesario realizar en todo el sistema y se pueden realizar rápidamente.

En quinto lugar, las microfrontends son excelentes para equipos que trabajan en diferentes ubicaciones. Con esta arquitectura, los equipos que trabajan en diferentes ubicaciones pueden trabajar de forma independiente y con poca coordinación, lo que los hace más efectivos. Además, este sistema permite a cada equipo realizar un seguimiento de su propia parte de la aplicación sin tener que trabajar con otros equipos o dependencias.

En general, los equipos de desarrollo y las empresas en su conjunto pueden beneficiarse enormemente del uso de microfrontends. Hay muchos beneficios, incluido un trabajo en equipo más rápido, escalabilidad y una mejor extensibilidad. Cualquiera que quiera aprovechar el potencial de este método debe conocer estos beneficios, pero también tener en cuenta algunos de los mayores desafíos.

3. Desafíos al utilizar un modelo de micro frontend

Aunque el uso de microfrontends aporta una serie de ventajas, también existen algunas dificultades asociadas con el empleo de este estilo.

La complejidad de la arquitectura presenta el obstáculo más importante. Cuando hay varios servicios front-end diferentes, cada uno conectado entre sí, puede resultar complicado monitorear todo lo que sucede al mismo tiempo. Esto puede dificultar el descubrimiento y la solución de los problemas que se producen, y también puede dificultar que los desarrolladores comprendan cómo está conectado todo.

Un obstáculo adicional es la necesidad de una técnica de prueba que sea más resistente . Cuando hay muchos servicios diferentes hablando entre sí, es esencial tener un plan de pruebas que garantice que todo funciona como se espera. Esto requiere un enfoque más complejo de las pruebas, que a veces implica una importante inversión de tiempo y recursos.

Un obstáculo más es el requisito de comunicación abierta y esfuerzo cooperativo entre diferentes equipos. Debido a que cada equipo es responsable de un componente distinto de la aplicación, es esencial tener canales de comunicación abiertos y herramientas para el trabajo colaborativo para garantizar que todas las partes estén en sintonía. Esto puede resultar difícil, especialmente para empresas más grandes que tienen varios equipos trabajando en varios componentes del programa.

Por último, pero no menos importante, está la dificultad de seleccionar la tecnología adecuada. Debido a que las microfronteras permiten a cada equipo elegir su propia pila de tecnología, puede resultar más difícil garantizar la interoperabilidad entre los distintos componentes del programa. Es fundamental no sólo tener un conocimiento exhaustivo de las distintas tecnologías que se están implementando, sino también tener una estrategia definida para garantizar que todo se pueda integrar sin problemas.

4. Estrategias para desarrollar e implementar microfrontends

En comparación con las aplicaciones monolíticas tradicionales, el desarrollo y la implementación de microfrontends presenta un nuevo conjunto de problemas. Para permitir el desarrollo y la implementación efectivos de estas aplicaciones, se deben considerar cuidadosamente las mejores prácticas y estrategias.

Desarrollo de arquitectura microfrontend.

La primera etapa en el diseño de una aplicación micro frontend es diseñar una arquitectura que permita el desarrollo y la implementación de múltiples componentes por separado pero simultáneamente. Pueden contener bibliotecas del lado del cliente, marcos de aplicaciones web, bases de datos, servicios en la nube, etc. Es fundamental construir una arquitectura escalable para que la aplicación se adapte a las nuevas necesidades de sus usuarios.

API

Las API se pueden utilizar para especificar patrones de comunicación entre componentes de micro frontend para que puedan comunicarse entre sí. Estas API pueden facilitar el intercambio de datos y funcionalidades y proporcionar una capa de abstracción entre componentes para que no dependan directamente entre sí. Tener API bien definidas facilita la reutilización del código en múltiples componentes, lo que garantiza la coherencia.

Construyendo usando módulos

Al desarrollar microfrontends, es esencial considerar cómo cada componente funcionará de forma independiente mientras colabora con otros componentes. Esto se puede hacer creando módulos que contengan todo el código necesario para una característica o funcionalidad particular dentro de un componente. Esto simplifica a los desarrolladores dividir el recurso en tareas más pequeñas que pueden administrarse e implementarse de forma independiente mientras forman parte del mismo sistema.

Aplicar control de versiones

El control de versiones es fundamental para el diseño de microfrontends porque permite a los desarrolladores realizar un seguimiento de los cambios realizados a lo largo del tiempo y gestionar más fácilmente los conflictos al fusionar varias versiones. Además, emplear el control de versiones permite a los desarrolladores de múltiples equipos/ubicaciones colaborar en un proyecto sin tener que fusionar código manualmente cada vez que un miembro del equipo realiza un cambio.

Estrategias de prueba

Como ocurre con cualquier proyecto de desarrollo de software, la incorporación de pruebas durante todo el proceso de desarrollo garantiza que la funcionalidad funcione como se espera en todas las fases del desarrollo. Al utilizar pruebas automatizadas, como pruebas unitarias, pruebas de integración y pruebas de regresión, los equipos pueden identificar problemas tempranamente, ahorrando tiempo y dinero a largo plazo. Además, los canales de integración continua pueden ayudar con las pruebas durante las fases de implementación y proporcionar una descripción general de cómo los cambios afectan el rendimiento de una aplicación a lo largo del tiempo.

Estrategias de implementación

Siempre que una aplicación está lista para su implementación, hay una serie de factores a considerar, como en qué entornos se implementará la aplicación (es decir, producción versus prueba) y si habrá reversiones o implementaciones asociadas con cambios específicos en el código base. . Además, es fundamental considerar cómo encajarán las implementaciones en sus canalizaciones de CI/CD si desea que se realicen implementaciones automáticas a intervalos regulares o en respuesta a ciertos desencadenantes (por ejemplo, nuevas confirmaciones que se envían al control de fuente).

En general, el empleo de estas tácticas puede garantizar el desarrollo y la implementación exitosos de aplicaciones microfrontend, así como reducir la probabilidad de problemas posteriores debido a una comunicación inadecuada entre los componentes de la aplicación o la falta de procedimientos de control de código/versión.

5. Medir el éxito con una arquitectura microfrontend

Cuando una empresa u organización decide utilizar una arquitectura micro frontend, es crucial evaluar el éxito de su nueva arquitectura.

Se pueden utilizar muchas métricas para determinar el efecto de las microfrontends en el rendimiento general de su aplicación y la experiencia del usuario.

Un método para evaluar el éxito de una micro interfaz es comparar el rendimiento de la aplicación antes y después de adoptar el diseño. Esta comparación puede aclarar si la transición de una arquitectura monolítica estándar a una arquitectura micro frontend mejoró o degradó el rendimiento de la aplicación.

Además, monitorear el tiempo de carga de cada componente puede revelar si están optimizados adecuadamente o no y sugerir lugares donde se necesita optimización adicional.

Al medir el éxito con arquitecturas micro frontend, también se debe evaluar la experiencia del usuario . La velocidad de carga de la página, la facilidad de navegación del sitio, los tiempos de carga de datos, los tiempos de reacción a las actividades del usuario (por ejemplo, envío de formularios) y la estabilidad de la aplicación son algunas consideraciones importantes sobre la experiencia del usuario.

Además, evaluar las encuestas de satisfacción del cliente y los formularios de comentarios puede revelar cómo los usuarios perciben que funciona su aplicación, así como identificar áreas potenciales de mejora y problemas que requieren atención.

También es importante considerar cómo las microfrontends han afectado la productividad y la satisfacción de los desarrolladores . Velocidad de desarrollo (¿qué tan rápido puede un desarrollador realizar cambios o crear nuevas funciones?), escalabilidad del equipo de desarrollo (¿pueden incorporar nuevos miembros rápidamente?), mantenibilidad del código (¿a los desarrolladores les resulta más fácil administrar un sistema completo compuesto por componentes pequeños?). , etc., pueden indicar si los desarrolladores se beneficiaron o no del uso de esta metodología.

Al evaluar el éxito de una implementación, los ahorros de costos deben considerarse en último lugar. Esto implica considerar tanto los gastos operativos (el costo de operar una aplicación) como los costos de desarrollo (el costo asociado con el desarrollo de nuevas funciones).

La comparación de los gastos previos y posteriores a la implementación puede proporcionar información importante sobre si la inversión en microfrontends ha sido rentable a lo largo del tiempo y ayudar a identificar áreas donde los recursos podrían usarse de manera más efectiva para maximizar el ahorro de costos.

En última instancia, cuantificar la efectividad de una arquitectura micro frontend requiere evaluar varios aspectos, incluidas las métricas de rendimiento, las métricas de experiencia del usuario, los niveles de satisfacción de los desarrolladores y el ahorro de costos a lo largo del tiempo, para determinar qué tan ventajosa es esta estrategia para su empresa.

El uso eficaz de estas métricas le permitirá tomar decisiones bien informadas con respecto a su implementación y, al mismo tiempo, le permitirá mejorar continuamente su arquitectura a lo largo del tiempo para maximizar su rendimiento futuro.

Como toda tecnología, los microfrontends no son el principio y el fin del desarrollo web, pero son un nuevo enfoque muy interesante que se ha probado durante años en el backend. Tanto para proyectos nuevos como heredados, los micro front-end pueden ofrecer la flexibilidad y escalabilidad para competir en el mercado moderno.