Publicado el 7 Jul, 2020 6 minutos de lectura
En los seis años que llevo en Modyo una de las cosas que más me ha gustado es hacer Discoveries. Porque es un ejercicio en el cual vamos donde nuestros clientes a entender su vida diaria, su identidad, sus necesidades, sus aspiraciones y sus sueños para encontrar en conjunto las mejores soluciones digitales para apuntar a sus objetivos.
Hacer este ejercicio, es muy intenso, ya que en poco tiempo hay que levantar y encontrar soluciones. Pero al mismo tiempo, esto nos permite estar muy al tanto de los desafíos a los que se enfrentan las diferentes industrias y también, nos permite encontrar correlaciones, y ver similitudes entre un discovery y otro.
Descubriendo Micro Frontends para acelerar los resultados
Después de varios discoveries en industrias como lo son la banca retail, las inversiones o las distintas áreas de los seguros nos encontramos con un patrón común. Sabemos que en la informática siempre necesitamos todo para ayer, por lo que tenemos que encontrar soluciones que aporten valor de manera muy rápida.
Además y cómo les decía, según el sector, siempre volvemos a encontrarnos con problemas similares. Por ejemplo en el área de los seguros podría ser la cotizaciones con venta online o en la banca un onboarding 100% digital. Y si bien cada cliente quiere una solución específica para su negocio, a grandes rasgos encontramos un denominador común:
La necesidad de widgets pre hechos y parametrizables para acelerar su transformación digital.
A partir de este denominador común, en Modyo reconocemos una necesidad primaria, y esta es la fuente de nuestra principal motivación para ofrecer Micro Frontends a través del Catálogo de Widgets de Modyo.
Así que, lo primero es lo primero: ¿qué es un widget o un Micro Frontend? La palabra "widget" puede significar muchas cosas, pero en Modyo, los widgets y los Micro Frontends son algo muy especial. Veamos lo que son.
¿Qué son los Micro Frontends en Modyo?
Los Widgets o Micro Frontends son elementos o aplicaciones autocontenidas que se despliegan en la plataforma y donde cada uno cubre un único subdominio de negocio o evento específico a la vez.
Aunque cada Micro Frontend funciona de manera independiente, se implementan manteniendo una cohesión en el diseño, la gestión del flujo y los componentes comunes en una biblioteca. Esta biblioteca hace que cada uno de ellos esté disponible en versiones. Este versionado ayuda a mantener un alto nivel de control, y sigue las mejores prácticas cuando se despliegan experiencias digitales a través de una arquitectura de Micro Frontend altamente ágil.
Como cada widget es específico para una sola tarea, fue necesario hacer un conjunto de estos para abarcar de manera más completa las distintas necesidades de nuestros clientes. Así es como queremos llegar a tener widgets para sitios privados, y para sitios públicos, para personas naturales y para colaboradores de las empresas.
Dentro de los diferentes canales digitales, cada Micro Frontend tiene un propósito. Por ejemplo, uno proporciona un servicio para el personal de ventas, y otro satisface una necesidad de postventa, etc. Lo que tenemos ahora ante nosotros es un universo literal de posibilidades, y nos centramos en identificar las prioridades correctas para responder y proporcionar al mercado lo que más necesita.
El catálogo de widgets está pensado como un acelerador de creación de productos digitales para los clientes de Modyo.
Afrontando la complejidad para nuestros clientes
Dependiendo del tipo de negocio ofrecemos diferentes soluciones. En los discoveries usamos una metodología llamada DDD (Domain Driven Design), que no es más que un enfoque de diseño para el desarrollo de software de sistemas complejos mediante la profunda conexión entre los dominios de negocio, y los contextos que lo delimitan.
Este modelo nos permite identificar los elementos comunes a los enfoques de los diferentes sectores de negocios de nuestros clientes. Es con base a estos modelos que hemos creado los 20 primeros widgets que proponemos para responder a las distintas necesidades de los dominios y los que estamos desarrollando para próximas iteraciones del catálogo.
Acelerando el Time-to-Market
Los clientes pueden personalizar los Micro Frontends para construir sobre los componentes ya existentes o una arquitectura definida, ayudando a acelerar enormemente la implementación temprana en tres simples pasos.
Primero, los clientes pueden acceder de forma segura al catálogo y descargarlo. El segundo paso es entonces la personalización, mediante el uso de un kit de desarrollo y/o un sistema de diseño de marca, así como la creación de pasos/componentes adicionales si es necesario, o para recrear ciertos flujos. El tercer y último paso entonces es desplegar el Micro Frontend en el entorno de Modyo.
... a grandes rasgos encontramos un denominador común: La necesidad de widgets pre hechos y parametrizables para acelerar su transformación digital.
La arquitectura del widget en sí es importante, y un desafío relevante cuando se trata de entregar software de clase mundial. Hemos invertido mucho tiempo y recursos para encontrar la solución que mejor se adapte a nuestros clientes y partners.
Prácticas saludables para las normas de seguridad de Micro Frontends
Al final, estandarizamos nuestros propios modelos de desarrollo basados en las mejores prácticas sugeridas por la comunidad Vue.js en la construcción de Micro Frontends Vue.js. Esto significa incorporar las mejores prácticas en la estructura del código, la separación de componentes, y seguir el modelo de referencia elegido por Modyo de una arquitectura de Micro Frontends.
Con esto en mente, creamos plantillas base para usar en el desarrollo local, que es lo más difícil de controlar. Elegimos Vue.js porque como un marco de trabajo javascript top 3 (junto con Angular.js y React.js), tiene la curva de aprendizaje más plana, de modo que una persona con conocimientos en javascript es capaz de adaptarse rápidamente y ser operacional en un corto tiempo.
Cada Micro Frontend en nuestro catálogo se adhiere a altos estándares de seguridad para ofrecer la mejor base posible. En nuestro continuo despliegue, herramientas como ESLint fuerzan el uso de estilos de código javascript, incluyendo características como las mejores prácticas de seguridad usando el preajuste Airbnb. También usamos styelint, que obliga a usar estilos css basados en la prueba estándar de la unidad de componentes de Bootstrap y Jest-engine. Todo esto se suma a los altos estándares de programación de nuestros propios desarrolladores de Modyo, que tienen años de experiencia trabajando con nosotros construyendo soluciones en múltiples industrias y un enfoque especial en los servicios financieros.
Un portafolio de Micro Frontends
Por tanto, cada widget del catálogo está compuesto por:
-
El código base del Micro Frontend.
-
El API o Micro Servicios al cual está conectado dicho artefacto de Micro Frontend.
-
La documentación del widget.
-
El sistema de diseño en modo vanilla.
La gran cantidad de diseños diferentes que tenemos que tener en cuenta para la creación de sitios y widgets para nuestros clientes, nos motivó para que nuestro Laboratorio de UX/UI implemente sistemas de diseño con el objetivo de acelerar los procesos, la velocidad de entrega y la gestión de cambios. Sobre todo porque con una herramienta de diseño y prototipado, cambiar el diseño se hace en unos pocos clicks y la diferencia es abrumadora.
Es por esto que para el catálogo contamos con un sistema de diseño que nos permite tener unidad tanto gráfica como en la interacciones de los widgets propuestos. Este sistema de diseño que solemos llamar vanilla es bastante sencillo y permite una fácil personalización de los widgets por nuestros clientes.
... Que Haces Tuyo
El proceso de personalización se hace de manera sencilla trabajando con el CLI de Modyo unido al de Vue. La iniciación de los widgets desde el repositorio para su parametrización y su futuro despliegue, el cual genera un draft de la versión del widget a publicar dentro de la plataforma, conectándose con el flujo de aprobación (Team Review) de la plataforma Modyo para pasar a producción o simplemente activar el flujo automático de despliegue cuando se mezcle la rama o se libere una nueva versión.
Si bien los widgets del catálogo van evolucionando en el tiempo este tipo de despliegue permite que sea decisión de cada cliente pasar los cambios nuevos a su widget sin ningún tipo de compromiso, o afectación en los productos digitales desplegados. Generando además independencia en el modelo de uso.
Es decir, desde Modyo mantenemos el compromiso de evolucionar estos artefactos de software, sin impactar a aquellos clientes que ocupan estas experiencias digitales.
Al día de hoy, en el lanzamiento del catálogo, contamos con 10 widgets de banca retail y 9 de inversiones. Y ya estamos trabajando con ahínco en la siguiente versión que incluirá widgets del sector de los seguros, pasando tanto por la venta B2C como por la experiencia de los corredores, entre otros.
Aunque esta introducción cubrió mucho, siempre puedes aprender más revisando el catálogo por ti mismo. Echa un vistazo, evalúa y dinos lo que piensas.
Foto de portada por Braden Collum on Unsplash
