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
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.
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.
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).
3. Database Everywhere
Utiliza de igual forma el API de acceso a la base de datos tanto en el cliente como en el servidor.
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.
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.
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.
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.
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
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)
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
Adrián Estrada
edsadr@gmail.com
@edsadr
aplicaciones en tiempo real con meteor
By Adrián Estrada
