Crea tus aplicaciones Flutter de forma modular; ¿es el fin de los monolitos?📱⚛️

Con el continuo crecimiento de nuestras aplicaciones digitales nos cuestionamos si sería posible modularizar las funcionalidades de la mismas. En este artículo te contaremos cómo nos fue construyendo Bancolombia A La Mano, una aplicación con millones de usuarios y construida por un equipo de desarrollo en tiempo record. ¿Cómo logramos crecer de forma paralela la solución?¿Se pueden crear módulos en Flutter reutilizables en nuestras demás aplicaciones? ¿Es el fin de los monolitos en Flutter?

Antes de comenzar a construir nuestra aplicación implementamos una librería de sistema de diseño en Flutter (pronto publicaremos un artículo de este tema, mientras tanto puedes acceder a este enlace donde se explica cómo implementar un sistema de diseño basado en atomic design en Flutter). Al tener un conjunto de más de 230 artefactos digitales reutilizables, aceleramos en un 120% la construcción de experiencias.

Pero aun teníamos una inquietud: dada la creciente estrategia de micro frontends y, teniendo presente que tenemos varias funcionalidades que se repiten en nuestras aplicaciones, ¿será posible construir micro apps que embeban experiencias completas?

Bueno, en este caso, te contaré varias estrategias que analizamos para implementar, ya no elementos reutilizables, sino experiencias completas reutilizables.

Widgets

No son nuestros amados elementos gráficos de Flutter, en el mundo bancario se conoce a los widgets como el conjunto de pantallas y funcionalidades asociadas a una única experiencia; por ejemplo envío de dinero, pago de cuentas, consulta de productos , etc. (Te dejo algunos enlaces: 1 , 2).

Entonces, llevado al mundo Flutter, podríamos crear un conjunto de widgets por cada funcionalidad definida por el negocio. Sin embargo, estos elementos deben ser parametrizables y adaptables a las necesidades de cada uno de nuestros canales.

¿Cómo construir un widget en Flutter?

En Flutter existe la posibilidad de crear paquetes que puedan ser reutilizados en nuevos proyectos, utilizando el siguiente comando :

flutter create --template=package name

Por lo tanto, decidimos crear un paquete por cada una de las funcionalidades. Al ser soluciones centralizadas en el negocio, resulta muy conveniente construirlos utilizando arquitectura limpia (te dejo un enlace que explica cómo implementar esta arquitectura).

Esta estrategia permitió tener un equipo trabajando en el Widget de Envío de dinero, otro en el Widget de Pago de Facturas y ninguno afectando la construcción del otro. Cada elemento cuenta con sus propias pruebas unitarias y pruebas de integración contra ambientes pre-productivos.

Cuando un equipo desea utilizar un widget ya construido, puede optar por apuntar directamente al repositorio donde esta publicado y a una versión específica de la siguiente forma:

Widget Envio de dinero

Todos los textos (títulos, subtítulos, párrafos, etc.) pueden ser parametrizados por cada equipo que emplee los widgets. Estos elementos contienen todos los escenarios para la experiencia, cada usuario del widget habilita únicamente las pantallas que necesita. Para apuntar a su propio backend empleando arquitectura limpia, solo tiene que construir la capa de infraestructura, pues el widget tiene definida la capa de dominio y la UI. En los escenarios donde todas las bancas apunten a un mismo backend, el widget vendrá completamente listo para su uso, incluyendo su capa de infraestructura.

Para el momento de escrito este artículo, contamos con más de 26 Widgets completamente parametrizables construidos en Flutter. Un desarrollador promedio demora en construir un Widget transversal, incluyendo su documentación, pruebas unitarias y de integración, dos semanas; sin embargo, las aplicaciones que utilizan widgets ya terminados se benefician fuertemente en los tiempos de entrega de valor.

Para la aplicación Bancolombia A La Mano implementamos 21 Widgets. En promedio se integraron uno por día, haciendo que la experiencia completa tardara menos de un mes su construcción.

WebViews

Pueden existir escenarios donde se requiera integrar en tus soluciones mobile elementos web, allí puedes hacer uso del plugin creado por el propio equipo de Google, el cual es el siguiente: webview flutter. Existe un artículo que explica muy bien las bondades de esta herramienta, te lo recomiendo leer (enlace).

Imagen de un webview

Como se puede notar, los WebViews se ven como si formaran parte de la aplicación y no generan una ventana emergente, esto hace que se vea como si el sitio hiciera parte de la aplicación. Entonces, ¿deberíamos crear aplicaciones únicamente de WebViews?

La verdad no resultaría en algo correcto, pues el emplear WebView tiene implicaciones en el performance. Se deben ver como componentes dentro de nuestra App y que no requieran de una salida a PDN para ver cambios en los mismos (es decir son elementos altamente cambiantes en el tiempo y no cobra sentido hacer Widgets de los mismos). También deben ser aquellos componentes que no requieran de capacidades nativas.

Elementos frontend administrados por un backend

Existen muchas metodologías para implementar esto en Flutter, pero al igual que los WebView, no deben verse como una estrategia para construir todas las pantallas y componentes de tu solución digital, sino aquellas que consideres que pueden ir variando en el tiempo y hasta por cliente (me refiero a que con esto podrías personalizar por cada usuario de la app que se muestra al cliente individual en una determinada experiencia).

Por dar un ejemplo el plugin json_dynamic_wydget permite, ante la llegada de un json, dibujar elementos diferentes en la aplicación, de forma que el backend después de un proceso lógico puede decidir que renderiza el frontend.

Ejemplo de Json Recibido

Desde el punto de vista del código, lo único que se haría es ingresar el json crudo al DynamicWidgetBuilder y este retornaría las pantallas configuradas en el json.

DynamicWidgetBuilder.build(snapshot.data ,
    context, new DefaultClickListener()) as Widget)

Este sería el resultado, como vemos es un listview horizontal con tres imágenes y un texto. Tal cual llegó la respuesta del backend.

Una estrategia similar a esta la otorga el plugin Flutter Widget from HTML, donde, dado un HTML, lo transpila a Widget.

Hay que tener cuidado, pues, al delegar al backend este tipo de firmas, aumenta la complejidad de la solución. Debemos tener presente que al implementar esta estrategia se toma un tiempo adicional, ya que debe esperar la respuesta y la interpretación de json a Widget.

Conclusión

Podemos utilizar estas estrategias para modularizar nuestras aplicaciones en Flutter, sin embargo debes ser muy cuidadoso en que escenario lo vas a utilizar. Los Widgets pueden ser para aquellos elementos que desees que tengan un excelente performance y hagan parte de tu solución principal. Los WebViews y elementos administrados por el backend pueden ser utilizados como una estrategia para implementar componentes digitales aislados de la solución del contenedor.

Ante la pregunta: ¿es el fin de los monolitos?, podemos decir que el contenedor sigue siendo un monolito, pero su construcción se ha segmentado en módulos y equipos especialistas en cada uno de los frentes.

Si el artículo te gustó, presiona muchas veces el ícono de aplauso👏, pues esto contribuirá a que podamos hacer más artículos como este. Si deseas saber más detalle de cómo implementar alguna de las estrategias aquí expuestas, déjanos un comentario donde nos cuentes el elemento en interés y haremos un artículo entrando en más detalle.