MeteorJS: Getting Started

meteorjs-inlab

Inici » Actualitat »

MeteorJS: Getting Started

Des de Telefònica I+D se’ns va demanar al grup de l’uLab UPC que féssim una prova de concepte del framework MeteorJS, un cop realitzada hem cregut oportú compartir amb vosaltres que és i com funciona, ja que es tracta d’una tecnologia innovadora que pot resultar molt útil en aplicacions web que actuen en temps real.

Des de Telefònica I+D se’ns va demanar al grup de l’uLab UPC que féssim una prova de concepte del framework MeteorJS, un cop realitzada hem cregut oportú compartir amb vosaltres que és i com funciona, ja que es tracta d’una tecnologia innovadora que pot resultar molt útil en aplicacions web que actuen en temps real.

Que és MeteorJS?

MeteorJS és un framework Javascript basat en NodeJS que neix amb l’objectiu d’automatitzar i simplificar la programació d’aplicacions web que actuen en temps real. Realitza la comunicació amb temps real mitjançant DDP (Distributed Data Protocol), MeteorJS està dissenyat per treballar amb col·leccions de documents JSON facilitant la modificació, creació, eliminació i visualització de documents JSON.

El framework proporciona també dues bases de dades, una base de dades caché del costat del client i una base de dades MongoDB en el servidor.

El sistema de plantilles de Meteor, està dissenyat per guardar a quines dades s’accedeixen des de cada plantilla (HTML) i configurar que el fitxer HTML s’actualitzi quan aquestes dades es modifiquin, D'aquesta forma s'aconsegueix una actualització més ràpida i simple de les plantilles en temps real.

MeteorJS disposa d’un repositori oficial amb diferents paquets i llibreries que permeten afegir funcionalitats extra, per exemple hi ha llibreries de JQuery, Twitter Bootstrap, Github i d’altres.

Com crear un projecte amb MeteorJS?

Per tal de crear un projecte amb MeteorJS és necessari instal·lar prèviament NodeJS, un cop instal·lat haurem d’instal·lar MeteorJS. Pot semblar molt complicat però amb poques línies ho tindrem llest i podrem començar a desenvolupar un projecte amb MeteorJS.

> git clone git://github.com/ry/node.git
> cd node
> ./configure
> make
> sudo make install
> curl https://install.meteor.com | /bin/sh

Per crear un projecte hem de fer servir la següent comanda.

> meteor create namemyapp

Aquesta comanda ens crearà la carpeta “namemyapp” amb l’estructura bàsica d’un projecte buit amb els fitxers: (namemyapp.js, namemyapp.css i namemyapp.html). Ara ja podem començar a programar!

Principials punts de la programació amb MeteorJS?

Es recomanable estructurar el projecte en diferents arxius HTML (on cada html carregara un template o mes) i diferents arxius JS (cada template sol tenir un JS tot-hi que pot haver templates compartits, ja que meteor agrega tots els JS en un unic).

Un exemple senzill és el d'un template que mostra els missatges d’un xat per això necessitarem definir una col·lecció de MongoDB per guardar aquests missatges.

Per fer que qualsevol template tingui disponibles diferents variables o col•leccions hem de seguir la següent estructura:

Template.nomtemplate.nomvariable = function() {
    return variable
}

El nostre objectiu és que el nostre template tingui accés a tots els missatges guardats a la col·lecció Messages. Això ho farem així:

Ara ja podem passar a desenvolupar el Template que mostrarà els missatges. Dins del HTML del template totes les variables a les quals té accés un template les podem pintar seguint el següent format:

{{nomvariable}}

En el cas que la variable sigui un conjunt d’elements, tal i com és el nostre cas, hem de realitzar un foreach, que amb amb MeteorJs es realitza de la següent forma:

{{#each nomconjunt}}
            {{nomvariable}}
            {{nomvariable2}}
            {{nomvariable3}}
            …
{{/each}}
 

El darrer pas és de afegir la capacitat de poder inserir els missatges, per això hem d’utilitzar esdevenimetns, MeteorJS utilitza la següent estructura per indicar-li a un template quins esdevenimetns té associats.

Template.nomtemplate.events({
         ‘tipusevent tag.class/id’ : function () {
               ….
         }
});

On el tipus d'esdeveniment pot ser qualsevol dels esdeveniments disponibles en JavaScript per exemple: "click", "blur" o "keypress".

Com iniciar el servidor Meteor i provar la nostra aplicació?

Per poder veure el resultat de la nostra aplicació hem d'inicialitzar el servidor de Meteor i els servidors de MongoDB. Per fer això accedim a la carpeta del nostre projecte a través de la consola utilitzant la següent comanda:

> meteor

Aquesta comanda s'inicialitzarà el servidor de Meteor i MongoDB en el port 3000 del localhsot. Si hi accedim ens trobarem la nostra aplicació:

Conclusions

Tot hi que MeteorJS és una tecnologia molt vàlida per aplicacions en temps real no tot són coses positives, en concret volem destacar el principal inconvenient amb que ens hem trobat: la poca seguretat que ofereix. En el cas que estiguem desenvolupant una aplicació segura, convindria de posar les col·leccions que contenen dades sensibles a la part servidora, fet que implicaria perdre per aquestes dades sensibles la principal funcionalitat de MeteorJS que és l’actualització instantània de les dades a la part client. No obstant això encara que podem fer que la part servidora actualitzi el client quan hi ha una modificació. En aquest cas apareix un problema de latència de solució no trivial.

Tot i això, si tenim en compte que la l'última versió disponible de Meteor és la 0.7 i que encara està en fase de desenvolupament, pensem que MeteorJS té molt potencial sempre i quan s'aconsegueixen solucionar aquests problemes.

Workshop realitzat a l'inLab