¿Micro-Frontends aplicado a móviles? ¡Ya veremos!

Cuando escuché sobre este nuevo estilo de arquitectura, sonó tentador llevar su aplicación a los clientes móviles. Sin embargo, Micro-Frontends es un estilo de arquitectura que ha nacido para aplicaciones cliente web y por ahora podrá aplicarse solo para este tipo de soluciones, ya que en móviles con las tecnologías actuales se podría tener una aproximación al concepto pero no un cumplimiento 100% de este tipo de arquitectura. A continuación les explicaré las razones por las que he llegado a dicha conclusión.

Primero, repasemos lo que busca este estilo de arquitectura aplicada a los clientes web.

De forma muy simplificada, este estilo de arquitectura busca que la solución sea diseñada para combinar en una aplicación; diferentes tipos de frontends de manera agnóstica, de tal forma que cada micro frontend pueda ser integrado a la aplicación sin importar la tecnología con la que esté construido. Para ilustrar un poco veamos la imagen siguiente:

En términos simples, propone tener un fronted principal capaz de orquestar múltiples sub-componentes que representan micro-frontends con lógica de negocio y tecnología propia e independiente.

Bajo este entendimiento, ¿Es posible llevar este estilo de arquitectura a clientes móviles?

La respuesta puntual es: No todavía.

Pensar en tener la capa UI compuesta de múltiples UI independientes es oportuna y podría ser considerada para capas cliente tipo web, pero recordemos que no todo lo que se aplica en clientes web es factible para ser aplicado en clientes móviles.

Un error de concepto que podría llevar a la toma de decisiones equivocadas, es creer que la arquitectura de clientes web es similar a la arquitectura de clientes móviles y que una solución construida sobre las bases de una de ellas reemplazará la otra.

Pero ¿Cuál es la diferencia con las soluciones móviles para que no pueda ser aplicado aún este tipo de estilo de arquitectura?

Empecemos por las topologías y las tecnologías que a la fecha existen para una solución móvil.

Actualmente tenemos las siguientes categorías de soluciones:

• Cross-platforms (Cordova, React, Ionic, Xamarin, Flutter y otras)
• Multiplataformas
• PWA
• Nativas

Cross-platforms

En esta categoría se encuentra las soluciones que se apoyan en un framework para compartir y desplegar la solución a partir de un código común tanto en iOS como en Android.

Es importante mencionar que aunque Flutter pertenece a esta categoría, tiene una característica técnica que la distingue de las demás. Flutter no requiere de web views para el renderizado de la vista lo cual, en términos prácticos significa que elimina la dependencia a los motores web view tanto de iOS como de Android. Los equipos que conocen las tecnologías cross-platforms pueden dimensionar las preocupaciones que emergen cada vez que Google o Apple deciden hacer un cambio o descontinuar algún componente en dichos motores.

El caso es, que usando tecnología cross-platform los componentes de las vistas no podrían ser agnósticos, ya que existe la dependencia con el framework usado para interpretar las vistas en una única tecnología, ya sea JavaScript o Dart. Así que no es posible combinar en una vista componente UI diseñados con diferentes tecnologías.

Alguien acá se podría preguntar ¿Qué hay de los iFrames o los deep-linking?

Bueno, para empezar aceptemos que es una práctica el uso de este tipo de componentes para enriquecer el frontend, pero también aceptemos que no es la mejor forma de construir las capacidades de lo que promete una arquitectura micro-frontends. Para empezar lograr orquestar y comunicar múltiples componentes de este tipo es un reto. Ni hablar de la experiencia de usuario que no es la mejor, los retos de integración y seguridad que conlleva sus implementaciones.

Multiplatforms

Actualmente esta tecnología es ofrecida por el ecosistema de Kotlin y se conoce como KMM (Kotlin Multiplatform Mobile).
Este tipo de plataforma ofrece la posibilidad de centralizar y compartir lógica negocio para que sea utilizada por múltiples tipos de clientes, incluyendo por supuesto clientes móviles iOS y Android.

¿No es la misma función que cumple las soluciones cross-platform? No.

La tecnología KMM busca compartir lógica de negocio que pueda ser integrada y reutilizada por las diferentes tipos de clientes con la gran ventaja de mantener su naturaleza nativa en la vista o componentes UI, es decir, que no requiere incluir la dependencia de un framework para compartir lógica y reutilizar componentes en múltiples plataformas.

Esto por supuesto trae muchas ventajas a la solución, sin embargo similar al caso de las cross-platform, no hay posibilidad de incluir en una vista componente de diferentes tecnologías.

Vale la pena mencionar que esta tecnología en la actualidad aunque se encuentra en estado Alpha es prometedora para el diseño de componentes reutilizables en múltiples clientes.

Estoy bastante de acuerdo con la referencia que hace Gergely Orosz con respecto a esta tecnología en su libro Building Mobile Apps at Scale: 39 Engineering Challenges así:

“Among all the cross-platform feature development approaches, I see Kotlin Multiplatform and KMM as the most promising.”

Una buena noticia, es el anuncio de la versión Beta de KMM para Spring 2022.

PWA

Incluyo a la tecnología PWA (Progressive Web Apps) en el listado solo para hacer mención, ya que en términos prácticos, PWA es una aplicación web, no es aplicación móvil.

Es solo un cliente web que brinda una mejor experiencia de usuario que las Response Designs Webs cuando se ingresan desde un dispositivo móvil. Por ser justamente tecnología web podría ser diseñada con micro-frontends, pero insisto es una solución web, por lo tanto no da lugar la comparación en este artículo dedicado a móviles.

Nativas

¿Qué hay acerca de las tecnologías nativas para construir micro-frontends?

Bueno, la tecnología nativa que siempre es la opción más completa de todo el ecosistema para diseñar soluciones móviles de gran demanda y a escala, ofrecen otras alternativas para organizar y compartir componentes UI, funcionalidades y lógica de negocio.

Dichas alternativas son dadas en cada uno de sus ámbitos nativos, es decir, no existe ese concepto de tener una vista basada en Jetpack Compose con componentes UI escritos en SwiftUI por ejemplo o viceversa, es decir, no existe esa posibilidad de combinar micro-vistas con diferentes tecnologías. Pero, lo que sí existe son aproximaciones.

Veamos qué tipo de diseños en móviles podrían acercarse a un estilo micro-frontends.

Con la introducción de las vistas declarativas en iOS y Android (SwiftUI y Jetpack Compose), el diseño de la UI puede ser compuesto, es decir, una vista compuesta de micro-vistas declarativas. No significa que antes fuera imposible hacer este tipo de diseños, de hecho se hace a través de fragments o sub-views(xibs), solo que el nivel de flexibilidad es mayor ahora con UI declarativas.

Las UI declarativas ahora también están disponibles en tecnología cross-platform como Flutter, en cuyo caso se denominan widgets y componen la vista.

¿Pero no son estos entonces ejemplos de aplicación de diseño micro-frontend? No.

Es un diseño de composición de las vistas y no es el mismo concepto de micro-frontends debido a que cada una de ellas se diseña con la misma tecnología, bien sea con Jetpack Compose para Android, SwiftUI para iOS o Widget/Dart para Android-iOS sobre Flutter.

Al agrupar dichas vistas declarativas con sus respectivos ViewModels, con sus respectivos Repositories, podrían conformar un módulo funcional y posteriormente ser extendido a un feature modular. Los feature modulares, podrían a su vez ser estáticos o ser dinámicos. ¡Y pare de contar!

Los features modulares dinámicos por ahora sería el último nivel de abstracción con el que podría contar una solución móvil, permitiendo así en tiempo de ejecución agregar funcionalidades de forma dinámica. Pero, haciendo la claridad que Dynamic Feature Module es una práctica permitida en Android, más no en iOS, ya que Apple considera un riesgo de seguridad agregar código dinámico a la solución sin antes ser revisado y aprobado por el proceso de publicación.

Para concluir

Considero que por el hecho de no poderse aún combinar vistas con componentes agnósticos, no podría hablarse aún de una aplicación total de la arquitectura micro-frontends en móviles, sin embargo un diseño modular apoyado en las vistas declarativas permite una estrategia para dotar a la solución con componentes de vista y funcionalidades reutilizables usando una única tecnología. Bajo esos términos podríamos decir que en móviles sería más factible una arquitectura modular compuesta de micro-vistas o micro-funcionalidades en el ámbito de una única tecnología.