{"id":1469,"date":"2014-01-27T16:03:39","date_gmt":"2014-01-27T14:03:39","guid":{"rendered":"https:\/\/inlab.fib.upc.edu\/?p=1469"},"modified":"2014-01-27T16:03:39","modified_gmt":"2014-01-27T14:03:39","slug":"meteorjs-getting-started-2","status":"publish","type":"post","link":"https:\/\/inlab.fib.upc.edu\/es\/uncategorized-ca\/meteorjs-getting-started-2","title":{"rendered":"MeteorJS: Getting Started"},"content":{"rendered":"

Desde Telefónica I+D se nos pidió al grupo de uLab UPC<\/a> que hiciésemos una prueba de concepto del framework MeteorJS, un vez realizada hemos creído oportuno compartir con vosotros que es y como funciona, ya que se trata de una tecnología innovadora que puede resultar muy útil en aplicaciones web que actúen en tiempo real.<\/p>\n

<\/p>\n

Desde Telefónica I+D se nos pidió al grupo de uLab UPC<\/a> que hiciésemos una prueba de concepto del framework MeteorJS, un vez realizada hemos creído oportuno compartir con vosotros que es y como funciona, ya que se trata de una tecnología innovadora que puede resultar muy útil en aplicaciones web que actúen en tiempo real.<\/p>\n

¿Qué es MeteorJS?<\/h2>\n

MeteorJS es un framework JavaScript basado en NodeJS que nace con el objetivo de automatizar y simplificar la programación de aplicaciones web que actúan en tiempo real. La comunicación se realiza en tiempo real mediante DDP (Distributed Data Protocol), un protocolo diseñado para trabajar con colecciones de documentos JSON facilitando la creación, modificación, eliminación y visualización de este tipo de documentos.<\/p>\n

Meteor también proporciona dos bases de datos, en el lado del cliente incorpora una caché DB y una MongoDB en el lado servidor.<\/p>\n

El sistema de plantillas de Meteor está diseñado para guardar en qué datos se accede desde cada plantilla (HTML) con el fin de actualizar el HTML en cuando los datos son modificados, consiguiendo así que las plantillas en tiempo real sean más rápidas y simples .<\/p>\n

\nEs posible extender las funcionalidades de MeteorJS a través de un repositorio oficial con distintos paquetes y librerías que permiten agregar funcionalidades no existentes en la versión estándar. Dentro del repositorio oficial podemos encontrar por ejemplo librerías de JQuery, Twitter Bootstrap, Github entre otros.<\/p>\n

Cómo crear un proyecto con MeteorJS?<\/h2>\n

Para crear un proyecto con MeteorJS es necesario instalar previamente NodeJS, una vez éste esta instalado podemos instalar MeteorJS. Aunque puede parecer complicado, con pocas líneas tendremos tanto NodeJS como MeteorJS instalados y por lo tanto podremos empezar a desarrollar un proyecto con MeteorJS.<\/p>\n

\r\n> git clone git:\/\/github.com\/ry\/node.git\r\n> cd node\r\n> .\/configure\r\n> make\r\n> sudo make install\r\n> curl https:\/\/install.meteor.com | \/bin\/sh\r\n\r\n<\/pre>\n
Para crear un proyecto basta con ejecutar la siguiente línea:<\/p>\n
\r\n> meteor create namemyapp<\/span><\/pre>\n
Este comando nos creará la carpeta "namemyapp" con la estructura básica de un proyecto vacío, es decir,  con los archivos: (namemyapp.js, namemyapp.css y namemyapp.html).<\/p>\n
¡Una vez se han creado los archivos ya podemos empezar a programar!<\/p>\n
 <\/div>\n
¿Cuáles son los principales puntos de la programación con MeteorJS?<\/h2>\n
Es recomendable estructurar el proyecto en diferentes archivos HTML (donde cada archivo HTML cargará uno o más templates) y diferentes archivos JS (cada template suele tener un único JS aunque es posible compartirlos entre templates, dado que al final  Meteor agrega todos los JS en un único).<\/p>\n
\nUn ejemplo sencillo es el de un template que quiere mostrar los mensajes de un chat para ello necesitaremos definir una colección de MongoDB para guardar estos mensajes.<\/p>\n
\"\" <\/span><\/p>\n
Para hacer que cualquier template tenga disponibles distintas variables o colecciones debemos seguir la siguiente estructura:<\/p>\n
\r\nTemplate.nombretemplate.nombrevariable = function() {<\/span><\/pre>\n
\r\n    return variable\r\n}\r\n<\/pre>\n
Nuestro objetivo es que nuestro template tenga acceso a todos los mensajes guardados en la colección Messages. Una posibilidad sería la siguiente:<\/p>\n
\"\"<\/p>\n
Ahora ya podemos pasar a desarrollar el Template que mostrará los mensajes.<\/p>\n
Dentro del HTML del template todas las variables a las que tiene acceso un template podemos pintar siguiendo el siguiente formato:<\/p>\n
 <\/div>\n
\r\n{{nombrevariable}}<\/span><\/pre>\n
 <\/p>\n
Aunque si la variable en cuestión es un conjunto de elementos, como es nuestro caso, debemos realizar un foreach que con Meteor se realiza así:<\/p>\n
 <\/div>\n
\r\n{{#each nombreconjunto}}<\/span>\r\n\r\n            {{nomnrevariable}}\r\n            {{nombrevariable2}}\r\n            {{nombrevariable3}}\r\n            …\r\n{{\/each}}\r\n<\/pre>\n
\r\n <\/pre>\n
\"\"<\/p>\n
El último paso es el de poder insertar mensajes, para conseguirlo tenemos que utilizar eventos, Meteor.<\/p>\n
La siguiente estructura permite indicarle a un template qué eventos tiene asociados.<\/p>\n
 <\/div>\n
\r\nTemplate.nombretemplate.events({<\/span>\r\n\r\n         ‘tipusevent tag.class\/id’ : function () {\r\n               ….\r\n         }\r\n});\r\n<\/pre>\n
Donde tipo evento puede ser cualquiera de los eventos disponibles en JavaScript como por ejemplo click, blur o keypress.<\/p>\n
\"\"<\/p>\n
¿Cómo iniciar el servidor Meteor y ver nuestra aplicación?<\/h2>\n
Para poder ver el resultado de nuestra aplicación debemos inicializar el servidor de Meteor y los servidores de MongoDB. Para ello accedemos a la carpeta de nuestro proyecto desde la consola y ejecutamos la siguiente línea:<\/p>\n
\r\n> meteor\r\n<\/pre>\n
Con esta instrucción se inicializa el Meteor y MongoDB en el puerto 3000 del localhost.<\/p>\n
Si accedemos desde un navegador podremos ver nue<\/span><\/span>stra aplicación:<\/span>\"\"<\/p>\n
Conclusiones<\/h2>\n
Aunque MeteorJS es una tecnología válida para aplicaciones que funcionan en tiempo real, no todo son ventajas. En concreto queremos destacar el principal inconveniente con el que nos  hemos encontrado: la baja seguridad que ofrece. En el caso que estemos desarrollando una aplicación segura es conveniente poner la colecciones que contienen datos sensibles en el lado del servidor, hecho que implica perder para estos datos la principal funcionalidad de MeteorJS que es la actualización instantánea de los datos a la parte del cliente. No obstante eso, todavía podemos hacer que la parte servidora actualizar el cliente cuando hay una modificación. En este caso aparece un problema de latencia que no tiene una solución trivial.<\/p>\n
A pesar de este inconveniente, debemos tener en cuenta que la última versión disponible de MeteorJS es la 0.7 y todavía está en fase de desarrollo. Por lo tanto creemos que MeteorJS tiene mucho potencial siempre y cuando consigan solucionar estos problemas.<\/p>\n
Workshop realizado en l'inLab<\/h2>\n