Veritran

Introducción

Veritran es una fintech de banca digital, wallets y pagos. Con su plataforma se hicieron las apps de muchos de los bancos más importantes de la región, que llegan a más de 50 millones de clientes activos en Argentina, Chile, México, Colombia, Perú, Ecuador, Guatemala, Estados Unidos y el Caribe. Algunas de ellas:

• Argentina: BNA+, del Banco Nación, y Cuenta DNI, la billetera del Banco Provincia.
• México: Banorte Móvil y Afirme Móvil.
• Chile: la app de BancoEstado.

La plataforma es low-code. Una app se define en un XML de configuración, y en cada dispositivo un runtime lo interpreta y arma la interfaz, la lógica y la navegación. El XML se actualiza cada vez que arranca la app, así que los cambios se publican como configuración, sin generar binarios nuevos ni pasar por las tiendas. Con la misma definición se hacen apps para celulares Android y iPhone, tablets, web y smartwatches.

Fuimos partner tecnológico de Veritran durante unos 11 años. Cuando empezamos eran pocos, y los acompañamos en un crecimiento muy fuerte. En ese tiempo hicimos los runtimes, el sistema de componentes, las apps de smartwatch, el IDE web para crear las apps, los editores de procesos y transacciones, el soporte de accesibilidad y consultoría técnica.

Los runtimes

Hice la primera versión del runtime que interpreta el XML en iPhone y en Android. Era un sistema de UI completo: hubo que modelar todos los componentes, el layout, los eventos y la lógica. Al tratarse de una plataforma bancaria, la seguridad tenía que estar contemplada en todo el diseño.

Renderizado y layout

Creé un sistema de renderizado y layout de bajo nivel, con su runtime en cada plataforma:

• Implementa el box model de la web: márgenes, paddings y posicionamiento.
• Implementa un layout flex desde cero, siguiendo la especificación de flexbox del W3C.
• El layout se resuelve en dos pasadas. En la primera, cada contenedor les indica a sus hijos el espacio disponible y cada hijo responde cuánto quiere ocupar. En la segunda, el contenedor los ubica.
• Las medidas se pueden expresar en distintas unidades: píxeles, puntos del dispositivo o relativas al ancho o al alto.

Smartwatches

También hice los runtimes para smartwatches, en tres plataformas: Apple Watch, Android Wear y Samsung Gear (Tizen). Implementaban un subconjunto del XML.

Veritran Designer

Diseñé y programé Veritran Designer, que después pasó a llamarse Veritran Studio: un IDE web para crear las apps de forma visual. Lo hice con mi equipo, y la parte central la programé yo.

La pantalla tiene paneles a la izquierda y a la derecha y un canvas en el centro:

• Panel izquierdo: configuración de la app, galería de componentes, librería, árbol de componentes de la pantalla, traducciones y errores.
• Canvas: muestra la pantalla que se está diseñando y permite navegarla con zoom, mover y redimensionar componentes, arrastrarlos y editarlos ahí mismo. Lo hice con SVG.
• Panel derecho: los atributos del componente seleccionado, como posicionamiento, márgenes, layout y estilos.
• Dispositivos: se puede elegir entre distintos emuladores y tamaños, y la pantalla se ajusta en tiempo real.

Funcionalidades

• Componentes: nativos y de terceros. Van desde componentes básicos, como un text input, hasta componentes de muy alto nivel: mapas, gráficos, HTML embebido, datagrids, input de PIN, carruseles y popups.
• Librería de componentes reutilizables de más alto nivel.
• Acciones contextuales: al seleccionar un componente en el canvas aparecen sus acciones más comunes. Por ejemplo, una tabla permite agregar filas y columnas.
• Atributos con valores estáticos, variables o textos localizados, con distintos tipos de datos y editores ricos, como un selector de color.
• Estilos: clases tipo CSS con herencia y cascada, un editor de estilos generales y themes que afectan a varias pantallas.
• Eventos y links: un componente puede navegar a otra pantalla, abrir un popup, ejecutar un proceso, disparar un evento, abrir una URL o mandar un email.
• Edición: copiar y pegar componentes y también sus estilos, y bloquear componentes.
• Modo usuario: muestra la pantalla con datos simulados, en lugar de las cajas vacías del diseño.
• Capas como en Photoshop: se pueden ocultar y se gestiona su z-index.
• Animaciones, con un editor de pasos que tienen efectos, curvas de ease, delay y repeticiones.
• Multi-idioma: gestión de las localizaciones y las traducciones, con un editor para ver los textos que falta traducir.
• Tabs como en un IDE, para editar varias pantallas a la vez.
• Panel de errores, que revisa la pantalla y muestra tanto las propiedades con valores incorrectos como los errores de lógica.
• Undo/redo.
• Comentarios: los colaboradores dejan comentarios dentro de las pantallas, asociados a los elementos.
• Guías y reglas, como en cualquier editor visual.
• Publicación: la app se publica y se prueba en un celular o en la web. También se puede publicar solo la pantalla que se está editando.

Arquitectura

Hicimos todo con TDD. La aplicación estaba hecha sobre Backbone y Marionette, y encima diseñé un framework con arquitectura Flux:

• Modelos observables: las vistas reaccionaban solas a los cambios del modelo.
• Acciones: todo cambio de estado era una acción que un dispatcher enviaba al store que la resolvía.
• Middlewares: corrían antes y después de cada acción y resolvían lo transversal, como la navegación, los modales, las preferencias guardadas y las notificaciones.
• Consola para developers: se invocaba desde la consola de Chrome y permitía ejecutar acciones, ver el historial de acciones y el estado completo de la aplicación.

El canvas estaba dividido en subsistemas independientes: selección simple y múltiple, drag, zoom, paneo y dispositivos.

Editores de procesos y transacciones

La lógica de las apps se define con dos editores visuales, también sobre un canvas, donde cada cajita es una acción.

Procesos

Los procesos son la lógica que corre en el dispositivo. Cada paso del proceso es una cajita del diagrama:

• Condiciones, loops, asignaciones, asignaciones en bulk y cuentas matemáticas.
• Funciones de transformación, por ejemplo de textos y arrays.
• Caches.
• Procesos reutilizables: un proceso se puede incluir dentro de otro.

El editor tiene una vista de árbol, un mapa de navegación, un editor para cada paso, un panel de errores y comentarios.

Transacciones

Las transacciones corren en el servidor, en el Middleware de Veritran, y se integran con los servicios del banco. Cada flujo se arma con cajitas conectadas: unas conexiones marcan el orden de ejecución y otras, el flujo de datos.

• Condiciones, iteradores, constantes y variables.
• Composición y descomposición de objetos.
• Funciones de fechas, números, textos y booleanos, y conversiones entre tipos.
• Scripts en JavaScript: una cajita de tipo script ejecuta código que usa el contexto de la transacción y los inputs y outputs de la cajita. Se escribe en un editor con resaltado de sintaxis y marcado de errores.
• Llamadas a servicios externos, por SOAP (muy común en los bancos) o por REST.
• Procedimientos reutilizables dentro de la transacción.

Además hay acciones propias de una fintech, como leer una tarjeta, acceder a una contraseña guardada o enviar un SMS o un email.

Otros proyectos con Veritran

• VTChat: un widget de chat de soporte para bancos, hecho con Comet, que se podía incluir desde el Designer.
• Accesibilidad: analizamos la plataforma y agregamos soporte de accesibilidad a todos los componentes, layouts y pantallas, para que las apps se puedan usar con lectores de pantalla como VoiceOver y TalkBack. Cada componente tiene atributos de accesibilidad, como su rol, el texto que se lee y el orden de lectura.

Consultoría

Además del desarrollo, le di consultoría a Veritran. Trabajaba junto a su CTO y sus equipos técnicos.

Equipos cross-funcionales

Los equipos estaban divididos por capas de la aplicación: Android, iOS, web, API, Designer. Sacar un nuevo tipo de componente llevaba muchísimo tiempo, porque había que coordinar los backlogs de todos los equipos.

Con mi liderazgo armaron el primer equipo cross-funcional, con miembros de cada equipo. Trabajando en mob, todos aprendieron a hacer componentes en todas las tecnologías y logramos sacar componentes en todas las plataformas rápidamente. Además se rompieron silos de conocimiento: cada equipo implementaba el mismo componente a su manera, y al trabajar juntos pudieron contrastar esas diferencias.

Hacíamos mob programming todo el tiempo: una pantalla grande, varios teclados y mouse, y rotación cada 7 a 15 minutos.

Excelencia técnica

• Les di mis charlas de prácticas técnicas, agile, programación orientada a objetos, TDD y TDD avanzado.
• Capacité a sus equipos en prácticas de excelencia técnica: XP, TDD y sus distintas escuelas, y refactoring.
• Les enseñé arquitectura y principios de diseño: clean code, SOLID, acoplamiento y cohesión, Law of Demeter, Tell Don't Ask, YAGNI y Balanced Abstraction Principle.
• Hicimos mucho refactoring juntos, sobre todo de código legacy: desacoplamos un monolito, lo hicimos testeable y pasamos algunas partes de Java a Kotlin.
• Hacíamos katas para practicar técnicas y principios de diseño.
• Hacíamos talleres de lectura de libros fundacionales.

Agilidad y estrategia

• Les enseñé metodologías agile y Lean, a controlar el WIP y a hacer trunk based development con integración continua.
• Los ayudé con análisis estratégicos, como el impacto de migrar a React Native o un marketplace de widgets.