aplicaciones en tiempo real con
meteor
Por qué meteor ?
Actualmente la web ha evolucionado hasta el punto de construir aplicaciones web en JavaScript que corren en el lado del cliente, que tienen interfaces gráficas eficientes, no recargan páginas y son reactivas.
Casi todas estas aplicaciones fueron escritas con pocas herramientas y usando mucho tiempo y personal
Cúal es la base de meteor?
- Node.js
- Fibers
- MongoDB
- Handlebars
![](http://railscasts.com/static/episodes/stills/351-a-look-at-meteor.png)
Qué significa "Early preview" en
la versión de meteor?
Meteor se encuentra bajo constante y ágil desarrollo, y piensa alcanzar la versión 1.0 en más que algunos meses y menos que un año, según sus creadores.
![](http://i.imgur.com/lzrt15r.png)
los siete principios
de meteor
1. Data on the Wire
No se manda porciones de Html sobre la red, se mandan datos al cliente (plantilla) y es él el que decide como los visualiza.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
2. One Language
Todo el código tanto en el lado del cliente como en el servidor se escribe en JavaScript (Aunque se soporta CoffeeScript por medio de un paquete).
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
3. Database Everywhere
Utiliza de igual forma el API de acceso a la base de datos tanto en el cliente como en el servidor.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
4. Latency Compensation
En el cliente se simula la interacción para que se vea como si no hubiera tiempo de latencia en el acceso a la base de datos.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
5. Full Stack Reactivity
Actualiza en tiempo real automaticamente, toda la información desde la base de datos y la sesión del usuario al sistema de plantillas esto es realizado por su sistema de orientación a eventos que escucha y replica cambios en la información.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
6. Embrace the Ecosystem
Meteor no pretende reinventar la rueda, por lo tanto animan al usuario a que integre otras herramientas existentes, por lo tanto es muy común ver un uso de meteor complementado por otros frameworks existentes que facilitan el desarrollo.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
7. Simplicity Equals Productivity
La mejor manera de que algo parezca simple es que en realidad sea simple, esto se logra con una API limpia que simplifica el código y por lo tanto aumenta la productividad.
![](https://dl.dropbox.com/u/212845/charla%20meteor/meteor-stripe.png)
Instalando meteor
Actualmente Meteor está soportado oficialmente para Mac y Linux , mediante el comando:
$ curl https://install.meteor.com | /bin/sh
(Lo siento, no hay soporte oficial para plataformas extrañas de desarrollo, pero pueden probar http://win.meteor.com/ en el caso de tener gusto por la vida peligrosa)
Creando un aplicativo con meteor
La mayoría de operaciones en Meteor se hacen mediante el comando meteor:
$ meteor create MiApp
(Este comando al ser ejecutado crea un directorio. dentro de este se encontrarán tres archivos: html,js y css)
EJEcutando el aplicativo con meteor
Luego de ingresar al directorio creado por el comando meteor create:
$ meteor
(El comando meteor al ser ejecutado sin argumentos en el directorio del aplicativo inicia el servidor local en el puerto 3000: http://localhost:3000)
usando paquetes de meteor
En el directorio creado por el comando meteor create:
$ meteor add jquery
paquetes disponibles en meteor
En el directorio creado por el comando meteor create:
$ meteor list
desplegar una app en meteor.com
Meteor ofrece la facilidad de utilizar sus servidores para desplegar aplicaciones.
En el directorio creado por el comando meteor create:
$ meteor deploy miapp.meteor.com
En el interior de una app de meteor
Estructura básica
![](https://dl.dropbox.com/u/212845/charla%20meteor/basica.png)
Al generar una aplicación en Meteor, son creados 3 archivos:
- miapp.html : contiene el html del aplicativo en templates de handlebars
- miapp.js: contiene el JavaScript tanto para el cliente como para el servidor
-
miapp.css: aquí puedo incluir todos mis estilos y estos son cargados automaticamente
El template en meteor
<head>
<title>MiApp</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Este es el formato de plantillas de Handlebars
JavaScript para el cliente en meteor
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to MiApp.";
};
Template.hello.events({
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
JavaScript para el servidor en meteor
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Como podemos observar tanto el JavaScript del cliente como del servidor puede estar en el mismo archivo diferenciados por las funciones: Meteor.isServer y Meteor.isClient
Estructura alternativa
(recomendada para proyectos más complejos)
![](https://dl.dropbox.com/u/212845/charla%20meteor/avanzada.png)
Meteorite
manejador de paquetes para meteor
Paquetes de la comunidad
Meteorite es un manejador de paquetes para meteor, permite descargar múltiples paquetes publicados por la comunidad desde
Instalando meteorite
$ sudo npm install -g meteorite
Despúes de ejecutar este comando se podrá utilizar el comando mrt suplantando el comando meteor, ya que este hace las mismas funciones de meteor e incluye los paquetes de la comunidad
aprendiendo con Ejemplos de meteor
ejemplos de aplicaciones hechas con
meteor
Meteor pone a disposición de sus usuarios 4 aplicaciones en las cuales se aplican diferentes conceptos del framework, cada una acompañada de un screencast explicando todo el proceso de creación
Descargando y probando un ejemplo
para descargar:
$ meteor create --example leaderboard
$ meteor create --example parties
$ meteor create --example todos
$ meteor create --example wordplay
para probar solo debemos ejecutar el comando meteor dentro del directorio creado
Sitios para visitar
- http://meteor.com/
- http://docs.meteor.com/
- http://blog.elfilo.net/articles/meteor-simplificando-nodejs/
- http://net.tutsplus.com/tutorials/javascript-ajax/whats-this-meteor-thing/
Gracias A todos
![](https://dl.dropbox.com/u/212845/charla%20meteor/avatar2.jpg)
aplicaciones en tiempo real con meteor
By Adrián Estrada
aplicaciones en tiempo real con meteor
- 7,534