Meteor.js un paso más allá

Por José Manuel Cristóbal Vera
Consultor Opensource en OpenSistemas

Con la llegada de los nuevos navegadores HTML5, estos nos han demostrado ser capaces de visualizar páginas web cada vez más potentes y espectaculares. A la par han ido surgiendo nuevos frameworks javascript, para el desarrollo de aplicaciones web del lado del cliente más rápidas y complejas, con una apariencia y capacidades cada vez más similares a las aplicaciones de escritorio.

La tendencia actual en el desarrollo de aplicaciones web, es la de transportar la carga de trabajo del servidor hacia el navegador del cliente, y así ejecutar totalmente la aplicación web en el navegador del cliente, con muy poca comunicación con el servidor, para dar una mejor experiencia de uso al usuario.

A estas aplicaciones se las conoce como single-page-application (SPA). Una SPA muy extendida y bastante conocida es Gmail. Cuando una SPA inicia la ejecución, se descargarán todos los archivos html, javascript y css que forman el esqueleto de la aplicación web, y el resto de recursos necesarios, se irán descargando a posteriori de forma dinámica cuando la SPA lo requiera, todo esto sucede, según el usuario vaya interactuando con la aplicación web.

Los frameworks implementados para este tipo de aplicaciones web, están basados en el paradigma de modelo-vista-controlador (MVC) del lado del cliente. Los más utilizados suelen ser AngularJS, Backbone.js y Ember.js. Estos frameworks nos permiten trasladar gran parte de la lógica de la vista, modelo y controlador de la aplicación web, hacia el al lado del cliente, ganando con ello en velocidad, por lo que proporcionamos una mejor experiencia de uso al usuario de nuestra aplicación web, como ya explicamos anteriormente.

La relación de la aplicación web, en vez de realizarse con el servidor, se hace con la API encargada de gestionar la lógica de la misma. El servidor queda relegado para descargar, el esqueleto de la página inicial de la aplicación y los archivos adicionales, una vez inicializada la aplicación web en el lado del cliente.

El problema es que estos frameworks trabajan sólo en el lado del cliente, por lo que partes de la lógica en javascript que ya existe en el lado del cliente, tenemos que volverlas a programar otra vez en el lado del servidor, y en otro lenguaje distinto, traduciendo estas partes ya sea al lenguaje PHP, Java, Phyton, Ruby, etc.

Pero en este frenético mundo cambiante, contamos con un nuevo actor en la escena, Meteor.js, que desde Abril de 2015 estrena su versión 1.1

Meteor.js tiene una particularidad con respecto a AngularJS, Backbone.js y Ember.js . Y esta particularidad es que es un framework denominado como “isomorfo”, básicamente significa que utiliza el mismo lenguaje de programación, tanto para el lado del cliente como para el lado del servidor.

El lenguaje elegido sería javascript. En el lado del cliente no hay problemas, porque los navegadores web llevan mucho tiempo con la facultad de ejecutar javascript. Y en el lado del servidor, tampoco hay problemas, porque ejecutaríamos NodeJS como servidor web, interpretando el lenguaje javascript de Meteror.js.

NodeJS es el socio ideal de Meteor.js para el desarrollo de aplicaciones web, donde se implementa fácilmente la comunicación bidireccional, que posibilita el desarrollo de aplicaciones web, que se comunican entre todos los clientes del sitio en tiempo real.

Con este nuevo paradigma, partes del código de la lógica que residen en el navegador en el lado del cliente, se pueden compartir con parte de la lógica que residen en el lado del servidor. Esto significa abrir un gran número de puertas y optimizar el rendimiento. Crear aplicaciones web va a ser mucho más sencillo y el mantenimiento de estas va a ser mucho mejor.

Existen otros proyectos isomorfos similares a Meteor.js, como por ejemplo Mojito, liberado por Yahoo, pero Meteor.js tal vez está recibiendo más apoyo por parte de la comunidad, y va a ser de los primeros en crear una tendencia en los próximos años, a la hora de desarrollar aplicaciones web con lenguaje javascript en el lado del servidor.

Meteor.js también nos aporta otras ventajas adicionales, aparte de la de ser un framework javascript isomorfo.

Programación reactiva (Live html), lo que significa que la aplicación web está siempre de forma automática a la escucha. Meteor.js va comprobando si ha habido algún cambio en el modelo de datos, y si este cambio le afecta a algún contexto reactivo, si es así, entonces el motor de Meteor.js regenerará el DOM y actualizará la parte de la vista afectada, sin la necesidad de recargar la página entera.

Base de datos en el lado del cliente, Meteor.js incluye de serie minimongo, que es una reimplementación de MongoDB (base de datos no SQL), de esta manera Meteor.js nos brinda la posibilidad de decidir, que parte de la información del modelo de nuestra base de datos pretendemos mostrar al usuario, y automáticamente se encargará, de mantener esta información sincronizada entre el cliente y el servidor y viceversa. De esta manera podemos manejar un conjunto de datos, con la posibilidad de, filtrar, reordenar, buscar, etc sin la necesidad de hacer peticiones constantes al servidor.

Aplicaciones web más rápidas, la comunicación con el servidor se reduce a sincronizar el modelo de datos, y a descargar los posteriores recursos que fueran necesarios. Además Meteor.js ha desarrollado un mecanismo llamado “Latency compensation”, que lo que hace es que cuando se realiza un cambio en el cliente, (por ejemplo, la modificación de un registro), en el cliente se ve automáticamente el resultado de dicha modificación. Acto seguido Meteor.js sincroniza este cambio con el servidor, y si el servidor al procesar este cambio comprueba algún problema, o el resultado cambia por alguna otra razón, el cliente es actualizado automáticamente con los datos del servidor. De este modo, nuestra aplicación web es capaz de trabajar en modo offline, almacenando varios cambios seguidos, hasta que Meteor.js encuentre la posibilidad de sincronizar nuestra base de datos del lado del cliente, con la base de datos de el lado del servidor.

Facilidad de desarrollo, por citar algunas. Uso de plantillas html, conocidas como “view data bindings” o vista enlazada a datos, el servidor monitoriza y sincroniza los cambios en estas plantillas. En un mismo fichero javascript se puede compartir variables tanto para el servidor como para el cliente. También en un mismo fichero javascript, se puede combinar la programación del lado del cliente como del lado del servidor y ejecutar en cada caso con instrucciones del tipo:

variableCompartida = “Hola Mundo”;

if (Meteor.isClient) { programación del lado del cliente… variableCompartida }

if (Meteor.isServer) { programación del lado del servidor… variableCompartida }

Con Meteor.js conseguiremos desarrollar aplicaciones web más eficientes, versátiles y modernas.