Construyendo servicios digitales con SPA

Han pasado casi 20 años desde que comenzó la explosión del desarrollo de contenidos y servicios web a través de Internet. A medida que esta se ha consolidado como el medio primario de acceso a información y soporte a muchas de nuestras actividades cotidianas, la forma de acceder a la información e interactuar con los servicios ha cambiado radicalmente. Se ha pasado de consumir contenido web unidireccional sin personalización o de utilizar servicios más específicos en forma de aplicaciones informáticas en el contexto de un PC fijo, a un ecosistema profundamente interconectado, interactivo, personalizado e independiente del lugar y dispositivo donde “la web”, accesible universalmente, es el medio donde todo converge.

Toda esta transformación, rápida y constante, supone un gran reto para quienes nos dedicamos a definir y construir servicios digitales. La omnicanalidad, personalización, e independencia de dispositivo no se consideran “extras” en un proyecto digital, sino que han de ir “de serie”. Es en este punto donde las SPA entran en juego para ayudarnos.

Pero… ¿qué es una SPA?

SPA es el acrónimo de “Single Page Application”. Son las aplicaciones que se ejecutan en un navegador web sin que exista recarga de página por actualización de datos o interacción con el usuario. ¿Te resulta extraño o complicado? Aunque nunca antes te hayas topado con el término SPA, es muy probable que todos los días interactúes con servicios basados en aplicaciones SPA, como por ejemplo Gmail, Facebook, Google Maps, Youtube, Netflix… Esto ya te suena más, ¿verdad?

Desarrollar el elevado grado de interactividad y experiencia de usuario al que nos tienen acostumbrados la mayoría de servicios digitales actuales no sería posible mediante aplicaciones web tradicionales (conocidas también como MPA, “Multiple Page Applications”) donde en cada interacción o carga de nuevos datos, se solicita una página completa al servidor, empobreciendo la usabilidad e interactividad de la interfaz de usuario y dilatando los tiempos de respuesta a nuestras acciones.

¿Cómo es una SPA?

Una SPA es en esencia una aplicación informática, desarrollada en lenguaje JavaScript (o alguna de sus variantes como TypeScript), que se ejecuta en un navegador web, su interfaz de usuario está desarrollada en HTML5/CSS3, y los datos gestionados por la aplicación y la lógica de negocio asociada residen en servicios en la nube accesibles a través de APIs (REST o GraphQL).

Para los que llevamos algunos años en esto, una SPA viene a ser algo parecido a lo que en los 90 fueron las aplicaciones informáticas denominadas “Cliente – Servidor”, donde un PC ejecutaba una interfaz de usuario nativa (Desarrollada en Microsoft VisualBasic o Visual C++ por ejemplo) y los datos residían en un servidor de bases de datos conectado en red con los PC’s clientes.

A diferencia de las aplicaciones “cliente-servidor”, que generalmente operaban en el contexto de una red local y solo funcionaban sobre PC’s, las SPA pueden ejecutarse en cualquier dispositivo que incorpore un navegador web y conexión a Internet.

Respecto de las aplicaciones web “tradicionales” o MPA, que también se ejecutan en un navegador web conectado a Internet, la diferencia fundamental está en la capacidad que las SPA ofrecen para desarrollar interfaces de usuario con modelos de usabilidad muy elaborados, dinámicos e interactivos y con muy bajos tiempos de respuesta al usuario, características hasta hace poco tiempo exclusivas de aplicaciones nativas (bien para PC o dispositivos móviles) o aplicaciones web basadas en plugins propietarios como Adobe Flash, Microsoft Silverlight o Java Fx.

¿Con qué tecnologías se desarrolla una SPA?

JavaScript, HTML5 y CSS3 son los ingredientes base de cualquier SPA, además de APIs REST o GraphQL remotas con las que intercambiar datos (en formato JSON mayoritariamente) y lanzar operaciones de negocio. Sin embargo, desarrollar componentes de interfaz y flujos de interacción compleja con el usuario puede ser muy costoso y laborioso desde cero.

Para facilitar y acelerar el desarrollo de aplicaciones SPA sin reinventar la rueda en cada proyecto, se han popularizado en los últimos años diversas librerías y frameworks OpenSource de desarrollo web SPA (algunos ya los hemos introducido en entradas anteriores de nuestro blog). ¿Cuáles son?

¿Las SPA solo se ejecutan en un navegador web?

No, una SPA no ha de ejecutarse exclusivamente en un navegador web. Dada la posibilidad de desarrollar interfaces de usuario avanzadas con características muy cercanas a las de aplicaciones nativas, existen tecnologías que permiten ejecutar aplicaciones SPA en distintos dispositivos como si fueran nativas, de ahí que una de las grandes ventajas de las SPA es que partiendo de una misma base de código, podemos ejecutarlas en distintos dispositivos sin modificar una línea de código. Por ejemplo:

  • Progressive Web Apps (PWA): Son aplicaciones SPA ejecutadas en el contexto de los navegadores Chrome, Firefox o Edge en dispositivos móviles Android, PC’s Windows, MacOSX y Linux, que se lanzan de forma similar a una aplicación nativa (mediante icono en pantalla), y comparten algunas características de aplicaciones nativas e Ionic, como acceso a algunas funcionalidades del dispositivo, notificaciones push y ejecución offline. Ya os hablamos en su día de PWA.
  • Ionic: Permite encapsular aplicaciones SPA dentro de aplicaciones nativas para dispositivos móviles Android e iOS (descargables desde Google Play y Apple Store). En realidad la SPA se ejecutará en un navegador web a pantalla completa, llamado WebView del que disponen todos los dispositivos móviles, y donde Ionic permite a la SPA acceder a algunos recursos del dispositivo como el sistema de ficheros o gestionar notificaciones, no accesibles desde una aplicación web que se ejecute en el navegador estándar del dispositivo.
  • Electron: Muy similar a Ionic, pero orientado a encapsular aplicaciones SPA dentro de aplicaciones nativas para PC’s Windows, MacOS X o Linux. En todos los casos la SPA será ejecutada por NodeJS y el motor Chromium (del navegador Google Chrome) incorporado en Electron, permitiendo a la SPA acceder a recursos locales del PC, tales como ficheros en disco, puertos USB, etc.

De websites a servicios digitales

El website ha sido pieza fundamental de Internet y de todo proyecto digital en los últimos años, generalmente soportados en gestores de contenidos (CMS) como Drupal y otros. Sin embargo, conforme la necesidad de incorporar nuevos servicios más interactivos, dinámicos y con experiencias de usuario adaptadas a cada contexto y dispositivo, la base tecnológica sobre la que desarrollar proyectos ha de cambiar y es ahí donde los desarrollos SPA toman el relevo o complementan al CMS.

En Biko estamos ayudando a nuestros clientes, en sectores tan diversos como el financiero, asegurador, sanitario e industrial a materializar sus estrategias de transformación digital, fuertemente apoyadas en la implantación de servicios digitales de mayor valor, cercanía y experiencia de uso impecable para el cliente. Las SPA son pieza fundamental sobre la que implementar proyectos de diversa tipología, entre los que se incluyen:

  • Banca electrónica
  • Áreas de cliente, web y móvil
  • Procesos de onboarding de clientes y contratación de productos/servicios
  • Seguimiento de tratamientos y comunicación médico – paciente
  • Soporte a procesos en entornos industriales

Para hacer frente a la creciente demanda de construcción de servicios digitales con SPA de base, varios equipos en Biko ya estamos trabajando e incorporando especialistas en tecnologías como React, NodeJS, API’s y arquitecturas distribuidas, además de refinar y aplicar buenas prácticas de desarrollo de software, basadas en prácticas de Extreme Programming, diseño simple, principios SOLID, testing automatizado, integración continua, entrega continua y DevOps entre otros. Esto nos permite construir servicios económica y operativamente sostenibles a largo plazo.