Tecnologías para construir SPAs

Como ya contamos en el post “Construyendo servicios digitales con SPA”, las SPAs están tomando un papel importantísimo en la construcción de la nueva generación de servicios digitales.

Una de las características clave de las SPAs es que el contenido visible (el HTML) es generado directamente en el navegador de manera dinámica en vez de delegar esta tarea al servidor web. Este cambio en la forma de construir las aplicaciones implica una serie de nuevos retos que hay que resolver: enrutado, interfaz de usuario dinámica y persistencia y acceso a los datos necesarios para la aplicación.

Para eso han surgido varias librerías y frameworks que ayudan y simplifican la labor, como React, Vue, Angular, Ember, etc.

Los tres pilares de las SPAs

Como decíamos, tenemos tres retos que resolver a la hora de construir SPAs: enrutado, interfaz de usuario dinámica, persistencia y acceso a los datos necesarios para la aplicación. Estos tres retos forman los pilares básicos de una SPA.

El primero, el enrutado, surge de la necesidad de permitir al usuario navegar por la web a través de URLs, guardarlas en marcadores y poder acceder a posteriori a las mismas de manera directa. Para ello necesitamos que nuestro código sea capaz de enterarse de esos cambios de URL y saber qué contenido tiene que mostrar a partir de esa URL.

Respecto a la interfaz de usuario dinámica, es importante que podamos actualizar la información que se visualiza en la página cuando recibimos nuevos datos a través del API de manera fluida y rápida sin que dé la sensación de que se ha cargado una nueva página.

Finalmente, es necesario que la aplicación pueda acceder tanto a un sistema de almacenamiento de datos en cliente, como a los datos y lógica de negocio que se encuentran en el API. Para este último pilar, el navegador ya nos proporciona una serie de utilidades: HTTP cookies, Local Storage, Session Storage, XMLHttpRequest, Fetch, etc.

¿Qué librerías y frameworks podemos utilizar para construir SPAs?

React

React es una librería en JavaScript de código abierto desarrollada y mantenida principalmente por Facebook, aunque también colaboran Instagram, la comunidad y otras compañías independientes.

La única función de React es encargarse de la interfaz de usuario dinámica de la página. Para ello proporciona un API sencilla y estable orientada a la creación de pequeños componentes con un alto grado de reusabilidad. Dada la simplicidad y versatilidad de su API, nos permite utilizar distintas estrategias y patrones a la hora de estructurar la aplicación basada en componentes.

Un punto importante de React es que puede ser completamente independiente del resto de tecnologías que use tu proyecto, ya que es una librería y no un framework. Esto permite que seamos nosotros los que definimos qué librerías y componentes vamos a utilizar, controlando así perfectamente la complejidad de la solución.

Además, alrededor de React existen toda una serie de librerías que nos permiten completar el resto de pilares necesarios para construir un SPA. Por ejemplo react-router, que permite trabajar con rutas en cliente.

React se está usando en grandes compañías como Facebook, Instagram, Imgur, Airbnb, Netflix, Microsoft, Whatsapp Web, OpenBank, American Express…

Vue

Vue es un framework en JavaScript de código abierto. Lo creó un exempleado de Google que usaba AngularJS y decidió hacer un nueva librería quedándose con las partes que más le gustaban. Así redujo su tamaño y mejoró su rendimiento. Actualmente es un proyecto que mantiene él mismo con ayuda de la comunidad.

Al igual que en React, el core de Vue está centrado únicamente en solucionar el pilar de la interfaz de usuario dinámica, aunque como framework también tiene componentes para resolver problemas como el enrutado, renderizado en servidor, etc. necesarios para construir una SPA.

El objetivo de Vue es permitir el desarrollo de componentes de manera sencilla para aquellos que ya tienen conocimiento de HTML, JavaScript y CSS. Este framework también sigue el patrón MVC y permite un flujo de datos bidireccional. Sus componentes se pueden reutilizar y componer para aumentar la reutilización de código.

El proyecto de Vue tiene una gran aceptación por la comunidad y se usa en empresas como Larabel, GitLab, Adobe, Codeship, etc.

Angular

Angular es un framework de código abierto desarrollado en TypeScript, creado y mantenido por Google. A pesar de compartir nombre con su predecesor AngularJS y de ser una evolución, es un framework distinto y no es retrocompatible.

El objetivo principal de Angular es el desarrollo de SPAs, por lo que tiene un ecosistema completo de librerías para su construcción que incluye el sistema de enrutado, herramientas de terminal para abstraer algunas tareas típicas del desarrollo y un largo etcétera de utilidades.

Como solución plantea una arquitectura MVC y está orientado a componentes. Para construir estos componentes Angular se utiliza HTML, TypeScript y CSS. Respecto al flujo de datos, Angular recomienda que sea unidireccional, aunque también permite el uso de flujos de datos bidireccionales.

Actualmente Angular es usado por Google, WalmartLabs, Weather.com, etc.

Ember

Ember es un framework de código abierto en JavaScript, mantenido por el “Ember Development Team” con la ayuda de la comunidad. Este framework fue concebido para la construcción de SPAs escalables.

Al igual que Angular, Ember tiene un ecosistema completo de librerías y herramientas para la construcción de SPAs. Entre estas librerías se incluye el motor de templates, enrutador, cliente HTTP,… Y en cuanto a herramientas, tenemos generadores de proyectos y de código, herramientas para realizar debug…

Ember apuesta por una arquitectura modelo-vista-modelo de vista (MVVM) cuyo objetivo es desacoplar al máximo la interfaz de usuario de la lógica de la aplicación. Para la creación de los templates utiliza un motor propio que utiliza el lenguaje HTMLBars, que es una variante de Handlebars. Apuesta por un flujo de datos unidireccional, aunque tamién permite el flujo bidireccional.

Empresas como Netflix, Microsoft, Linkedin, Heroku, etc. usan Ember.

¿Y cuál elegimos?

No existe una respuesta única a esta pregunta. El tipo de proyecto, empresa y necesidades harán que te decidas por una opción u otra.

En Biko somos expertos desarrolladores de AngularJS desde hace años y, después de evaluar profundamente las diferentes opciones para la construcción de aplicaciones web para nuevos proyectos, nos decantamos por React.

Su simplicidad y potencia, el ecosistema de librerías y la gran comunidad nos enamoraron rápidamente. Además AngularJS y React pueden convivir en un mismo proyecto, permitiéndonos aplicar estrategias para evolucionar gradualmente proyectos ya existentes a esta nueva tecnología.

Pronto os contaremos más detalladamente por qué nos hemos decantado por React y su ecosistema y veremos sus características y las posibilidades que nos ofrece.