Micro Frontends

Sofka Blog

Diego Henao Severiche.

Comparte

La tendencia actual es crear aplicaciones de navegador potentes y ricas en características, también conocidas como SPA “single page app”, que cuenta con una arquitectura de microservicios como backend. Con el tiempo la capa de frontend crece y se vuelve más difícil de mantener y evolucionar. A lo que comúnmente llamamos una Interfaz Monolítica.

Micro frontends

Esencialmente busca dejar de pensar en la interfaz monolítica, para pensar en interfaces distribuidas que permitan mantener y evolucionar de mejor manera nuestros frontends. Al igual que los microservicios los micro frontend buscan dar independencia a cada parte de nuestro sitio web o aplicación web, pensando en que pueden ser mantenidas por equipos independientes de acuerdo a sus áreas de negocio y especialidades técnicas.

Ideas Centrales en los Micro frontends

Agnóstico a la Tecnología

Cada equipo debe poder elegir y actualizar su stack sin tener que coordinar con otros equipos. Los Custom Elements son una excelente manera de ocultar los detalles de la implementación mientras se proporciona una interfaz neutral a otros.

Aislar el código del equipo

Crea aplicaciones independientes que sean autónomas. No compartir tiempo de ejecución, incluso si todos los equipos usan el mismo framework.

Acuerdos de prefijos de equipo

Acordar los espacios de nombres no aislados. Espacio de nombres CSS, eventos, almacenamiento local y cookies para evitar colisiones y dejar clara la propiedad.

Favorecer las funciones nativas del navegador

Utilizar Eventos de navegador para la comunicación en lugar de crear un sistema global PubSub. Si realmente tiene que crear una API de varios equipos, intente que sea lo más simple posible.

Compensaciones

Tomar alguna solución tecnológica siempre debe ser respaldado por un análisis profundo de las necesidades puntuales del sistema, a continuación me permito explicar algunas consideraciones a tener en cuenta al decidir si los micro frontends son la mejor idea para su interfaz.

Debemos pensar en el tamaño de la solución y tener claridad si estamos hablando de un web site ( Centrado en contenido ) o de una web app ( Centrado en comportamiento ) lo cual nos da una idea clara del panorama que tenemos enfrente. Normalmente las web apps son más propensas a ser consideradas para el enfoque de micro frontends.

Además de la integración cliente-servidor del código escrito con diferentes frameworks, hay muchos temas secundarios que deben ser discutidos:

Compartir recursos comunes entre equipos

Por ejemplo, galerías de diseño y javascript usados en todo la aplicación.

Mecanismos para aislar javascript y evitar conflictos css

Debemos tener en cuenta que por más independencia que tengamos siempre vamos a estar renderizando sobre el mismo DOM y si no tenemos reglas definidas podemos incurrir en conflictos de css y javascript.

Cargar recursos según sea necesario

Pensar en el usuario final nos lleva a ser cuidadosos con la carga de los recursos, utilizar una estrategia como Lazy Loading es una opción a considerar.

Comunicar información entre micro frontends

Se debe establecer la forma en que los diferentes equipos van a poder comunicar información entre los micro frontends al iniciar el proyecto.

Si bien no vamos a profundizar en cada uno de estos puntos los invito a pensar que de la mano de una serie de beneficios llegan retos importantes que antes no tenían en el panorama.

Conclusión

Los micro frontend como enfoque nos permiten salir de lo tradicional y solucionar muchos de los dolores de cabeza cuando pensamos en grandes frontends. Pensar en equipos multidisciplinarios en nuestra capa de frontend genera muchas posibilidades para nuestros equipos de trabajo y soluciones.

Referencias