Desde ya algo antes del año pasado en Metadrop hemos empezado a experimentar con eso que llaman Headless Drupal y el desarrollo de aplicaciones JavaScript en el lado del cliente. La idea de Drupal Headless o también llamado desacoplado (Decoupled) es sencilla: Drupal es un excelente gestor de contenido, pero ciertos desarrollos exigen un front-end complejo más allá de las posibilidades que ofrece el sistema de tematizado de Drupal, o al menos mediante un esfuerzo razonable. La necesidad de una mayor interactividad o la posibilidad de poder publicar contenidos en múltiples canales (el clásico ejemplo es página web y aplicación móvil) son requisitos que hacen que resulte más conveniente separar en dos capas: una capa que gestiona el contenido, y una segunda capa en el lado del cliente consumen el contenido ofrecido por la primera capa.
Ya Drupal 6 contaba con el módulo Services que permite exponer el contenido de Drupal como servicios consumibles por aplicaciones externas. Drupal 7 vió cómo se añadían otros módulos con la misma finalidad como RESTful Web Services y RESTful, ambos orientados a REST, pero ha sido en Drupal 8 cuando se ha potenciado esta estrategia convirtiendo a Drupal en una excelente elección a la hora de construir APIs de contenido.
Aplicaciones móviles
Nuestra primeras aproximaciones consistieron en desarrollar APIs sobre el contenido de un sitio Drupal que fuesen consumidas por aplicaciones nativas tanto de Android como de iOS. Esto nos permitió empezar a ganar experiencia con esta tipo de estrategia y dejar de ver las aplicaciones móviles como simples usuarios y empezar a pensar en ellas desde el punto de vista de desarrolladores. Metadrop nació con la idea de especializarse en Drupal, dejando de lado otras tecnologías para poder ser verdaderos expertos en el sistema (pensando en la idea de que quien mucho abarca poco aprieta), por lo que aprender casi de cero como desarrollar una aplicación móvil completa tanto en Android como en iOS nos pareció una mala idea. Por ello, contamos con colaboradores cercanos que ya tenían esa experiencia para empezar a desarrollar las primeras aplicaciones que usasen Drupal como su gestor de contenido. De ahí surgieron aplicaciones como la del Honky Tonk Bar en Madrid:
Estas experiencias nos animaron a seguir trabajando en esta dirección. Pero paralelamente también habíamos empezado a jugar con aplicaciones basadas en JavaScript del lado del cliente.
Aplicaciones JS en el lado del cliente
Las tecnologías y las tendencias evolucionan, y hace tiempo que las webs muchas veces requieren componente visuales con una interactividad y posibilidades que no pueden lograrse razonablemente sin usar uno o más frameworks JavaScript. Fieles a nuestra filosofía de centrarnos en Drupal, decidimos no adentrarnos en la poblada jungla del ecosistema de frameworks, librerías y snipets de JavaScript y escoger una tecnología todoterreno ya asentada: Angular JS. Éramos conscientes de que probablemente para cada aplicación existiese una combinación de librerías y técnicas JavaScript que fuesen más óptimas que Angular JS, pero para encontrar esa combinación deberíamos estar al día de los cientos, por no decir miles, de librerías JavaScript disponibles. Conocer sus puntos fuertes y sus puntos débiles para encontrar la receta adecuada para cada caso. Angular JS, sin embargo, es un framework muy completo, no una simple librería, un stack de desarrollo JavaScript que cubre todas las necesidades que pudiésemos tener de una forma muy conveniente. Muy documentado, con mucho código contribuido disponible y la solidez de tener el apoyo de Google detrás.
Mediante Angular podríamos aprovechar todo nuestro conocimiento de desarrollo web dado que no deja de ser aplicaciones basadas fuertemente en las tecnologías principales de una web: HTML, CSS y JavaScript.
La elección fue acertada, a nuestro juicio, y gracias a ella pudimos desarrollar dos proyectos para los pasados Juegos Olímpicos de Río de Janeiro 2016. El primero de ellos, sencillo pero funcional, eran marcadores en vivo de las competiciones de tenis de mesa. En aquel proyecto tuvimos que lidiar también con la recepción de datos mediante el protocolo de datos olímpicos en vivo ODF (Olympic Data Feed), pero esa es otra historia que quizá también mereciera ser contada.
Pero donde realmente pusimos a prueba si la decisión había sido acertada fue con la aplicación de resultados de competiciones de la web de la Federación Internacional de Tiro con Arco. Requería el consumo de una veintena de servicios diferentes, mostrar datos tanto de competiciones en vivo como de competiciones pasadas, pudiendo ver tanto partidos en directo como reproducirlos una vez finalizados (¿quieres ver cómo fue el partido de semifinales el que Ku Bonchan, el ganador de su categoría, derrotó a Brady Ellison, uno de los grandes favoritos? Solo tienes que seguir el enlace y jugar con al componente de visualización de partidos). También permite consultar podiums, vista de árbol de eliminatorias, datos de los participantes y sus equipos, y posibilidad de enlazar directamente cada componente para compartir partidos u otros datos. Y todo ello servido desde Drupal apoyado por servicios de datos ofrecidos por la organización de World Archery.
Finalmente, la aplicación se estrenó para los Juegos de Río, demostrando que Angular era una herramienta muy potente que cubría nuestras necesidades.
Podéis consultar todos los resultados de Río en este enlace.
Aplicaciones móviles basadas en web
Tras haber realizado el backend de varias aplicaciones móviles, y haber desarrollado una compleja aplicación en JavaScript nos quedaba dar el siguiente salto: crear nuestras propias aplicaciones móviles completas. Ya teníamos experiencia suficiente para ello, solo hacía falta juntar las piezas: Drupal para el backend, Angular para la aplicación, y un nuevo jugador, Ionic, para generar la aplicación web propiamente dicha.
Ionic permite desarrollar aplicaciones móviles usando tecnologías web, es decir, los viejos conocidos HTML, CSS y JavaScript. El resultado, apoyándose en Apache Cordova, son aplicaciones instalables de forma nativa con un aspecto y comportamientos muy parecido a las aplicaciones nativas.
Como no todo iba a ser tan fácil y como nos gusta experimentar con las nuevas tecnologías lo hicimos con la nueva versión de Ionic, la versión 2.x, que se basa en Angular 2. Si estáis al tanto del desarrollo de Angular sabréis que de la versión 1.x a la 2 de Angular los cambios son enormes. Orientado mucho más a componentes (una gran decisión), Angular 2 se puede, y de hecho es lo habitual, escribir usando TypeScript, un lenguaje de software libre que es un superconjunto de JavaScript que se transpila a código de JavaScript ejecutable por los navegadores. Sin embargo, he de decir que aunque al principio cuesta un poco, la adaptación tanto a TypeScript y Angular 2 no es compleja y sí deja una sensación muy satisfactoria. Durante el desarrollo Angular saltó hasta la versión 4, la versión actual, pero sin grandes cambios por lo que apenas notamos diferencias
Hace poco completamos y sacamos a producción la primera app completamente basada en Ionic tanto para Android como para iOS: la aplicación móvil oficial de World Archery. Aunque aparentemente sencilla tiene por detrás un motor complejo que será la base de las futuras actualizaciones ya planeadas.
Los mayores desafíos fueron por un lado adoptar la filosofía reactiva de Angular, basada en RxJs, y por otro reflejar todos los requerimientos del cliente (funcionamiento offline gracias a fallback de caché local en caso de servidor inaccesible, refresco automática de datos interrelacionados, compleja lógica de negocio en cuanto al consumo de servicios). La separación del motor en una librería externa nos permitirá incluso incluir funcionalidades de la aplicación (principalmente vistas) en la web de WorldArchery usando el mismo código base.
Si quieres probarla no tienes más que instalarla, ¡es gratis! Y prometemos que la aplicación no hace nada extraño con tus datos ni ninguna otra práctica de dudosa ética tan típicas hoy en día.
Conclusiones
La combinación de Ionic con Angular nos permite construir tanto interfaces web con un alto grado de complejidad e interactividad como desarrollar aplicaciones móviles para Android e iOS usando un único código. Teniendo Drupal como motor de backend nos vemos capaces de dar el salto al desarrollo móvil teniendo una sólida base por detrás. Aunque el aprendizaje no es cosa de poco tiempo, la inversión en investigación y desarrollo se ve ampliamente satisfecha dados los resultados obtenidos: ahora nos sentimos capaces de ofrecer no solo una aplicación web con el mejor gestor de contenidos como motor, sino que también somos capaces de construir aplicaciones en el otro lado de Drupal headless, algo que el futuro creemos que será cada vez más demandado.
