aplicaciones en tiempo real con

meteor



Meteor es un entorno ultra-simple para el desarrollo de sitios web modernos. Lo que antes tardaba semanas, incluso con las mejores herramientas, ahora te cuesta horas 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


Meteor simplifica enormemente este tipo de aplicaciones reduciendo considerablemente el tiempo y esfuerzo en el desarrollo de este tipo de aplicaciones.

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


(El comando meteor add jquery agrega la librería JQuery a nuestro proyecto y la podemos usar en cualquier punto sin tener que añadirla a la plantilla)

paquetes disponibles en meteor


En el  directorio creado por el comando meteor create:


$ meteor list


(El comando meteor list nos permite ver que paquetes están disponibles para el uso del proyecto actual)

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


(El comando meteor deploy nos permite publicar nuestro aplicativo en un subdominio de meteor.com de forma gratuita)




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


https://atmosphere.meteor.com/


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


http://www.meteor.com/examples/leaderboard


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
Made with Slides.com