Hacia un desarrollo multiplataforma web y móvil sostenible

Cada vez más en nuestro sector nos encontramos con clientes que desean afrontar un nuevo proyecto web y móvil con un recorrido y una evolución de ambas plataformas muy similar, que atienden a los mismos requisitos de negocio y cuya única diferencia es el canal de distribución. Si además, tienes la suerte de que tu marco tecnológico está basado en React y React Native y cuentas con un equipo sénior capaz de desarrollar con ambas herramientas, ya tienes los ingredientes suficientes para afrontar un desarrollo multiplataforma web y móvil más barato y sostenible.

Inicialmente, a la hora de afrontar un desarrollo multiplataforma web y móvil tenemos dos opciones: 

- Pastilla azul: desarrollamos una versión web y una aplicación móvil, siendo cada una de ellas un proyecto independiente duplicando funcionalidades y solucionando los problemas dos veces en cada proyecto.

- Pastilla roja: afrontamos un único desarrollo multiplataforma en un único proyecto. Resolvemos los problemas funcionales una única vez a costa de tener que resolver problemas concretos de cada plataforma.

Nosotros lo tenemos claro, la “pastilla roja” es el camino. Y este camino, lo recorremos de la mano de React para desarrollar la versión web y de React Native para la versión móvil.

¿Por qué? Evitamos duplicidad de código entre plataformas (DRY) lo que nos permite tener un código más mantenible y unificado, el ritmo de desarrollo es más rápido, resolvemos bugs de negocio una sola vez, reducimos silos de conocimiento (“yo sólo sé de Android”) y tenemos el mismo entorno tecnológico para web y móvil pudiendo compartir perfiles, onboardings y conocimiento.

Como todo en esta vida, tiene sus pequeños trade-offs. El desarrollo multiplataforma nos añadirá cierta complejidad de configuración inicial hasta desarrollar las primeras funcionalidades y no evitaremos tener que resolver algunos problemas concretos de cada plataforma.

¿Cómo lo hemos hecho?

1.- Aplicando diferentes estrategias para compartir código entre React y React Native dependiendo del contexto:

• Si comparte lógica pero la visualización es específica, entonces, compartiremos el "core" entre ambas plataformas. Un ejemplo de esta casuística es si por ejemplo quieres lanzar una aplicación web y una móvil con un diseño y un roadmap diferentes pero donde existe una lógica de negocio común (modelado, cálculos, conexión con servicios externos, etc.).
• Si comparte lógica de negocio y la visualización, entonces utilizaremos tecnología que nos permita compartir código entre plataformas (p.e. con un framework como React Native Web o compilando aplicaciones distintas en función de la extensión de los ficheros teniendo un design system único). El ejemplo característico es una aplicación web y una móvil con un diseño y un roadmap prácticamente idénticos y donde únicamente cambia el canal de distribución (web vs aplicación móvil nativa).

2.- Utilizando una estrategia hexagonal de puertos y adaptadores para no depender de los detalles concretos de implementación de cada plataforma.

3.- Aplicando buenas prácticas para el desarrollo de aplicaciones front para hacerlas sólidas y escalables.

Hemos preparado varios ejemplos de código para ilustrar los dos escenarios. Podéis verlos aquí. 

Os dejamos también el enlace al video de una charla que impartimos hace un tiempo donde hablamos de todo esto de manera más extendida: