Tutorial Meteor JS: Instalación y primeros pasos
Hace unos días hablábamos de 5 aspectos de Meteor por los que deberíamos empezar a usarlo, tanto para el aprendizaje como para el desarrollo de proyectos.
Hoy comenzamos una serie de publicaciones gracias a las cuales crearemos una app muy similar a Twitter . La intención es ir viendo cada componente de Meteor a medida que necesitamos implementarlo, modificarlo, etc… con idea de asentar esos conocimientos de cara al curso de Meteor de OpenWebinars.
Repasemos un poco. ¿Qué es Meteor? Es un framework que nos permite usando únicamente JavaScript, desarrollar tanto el código de una web-app, como el front-end y el back-end; obteniendo además resultados de nuestras modificaciones en tiempo real ahorrando enormes cantidades de tiempo en el desarrollo del proyecto.
Su núcleo se acompaña de MongoDB como base de datos , Blaze como framework para el apartado de front-end, estando todo una capa por encima de Node.js.
Instalación
Meteor dispone de clientes de instalación para equipos Linux, Mac y Windows. Para las dos primeras opciones deberemos ejecutar el siguiente comando en nuestra terminal:
curl https://install.meteor.com/ | sh
Mientras que para instalarlo en Windows deberemos echar mano del instalador que nos ofrecen sus desarrolladores:
Iniciando
Qué mejor forma de ver qué es lo que hemos instalado que probándolo. Por defecto los chicos de Meteor nos ofrecen un par de aplicaciones de ejemplo con las que trabajar, pero en caso de no usarlas, tenemos definida una función con la que ver si nuestra instalación de Meteor inicia una app correctamente. Ejecutemos este comando:
meteor create pruebaOpenwebinars
Ahora entramos a la carpeta que se acaba de crear con el proyecto:
cd pruebaOpenwebinars
Y echamos a andar Meteor escribiendo:
meteor
Una vez iniciada nuestra app de prueba, se nos mostrará en pantalla la dirección y puerto que debemos introducir en nuestro navegador para ver qué es lo que tenemos. Si accedemos deberíamos ver algo como esto:
Indagando
Vamos a ver qué es lo que está haciendo que se muestre esa web-app. Si abrimos otra terminal y accedemos al directorio de nuestro proyecto, comprobaremos que únicamente tenemos tres archivos, y sí, eso y el framework que aporta Meteor es suficiente para la ejecución de una app.
Estos tres archivos son:
pruebaOpenwebinars.js: Se trata del código de la aplicación que se encuentra al completo en el mismo archivo (uno de los pilares de la velocidad de este framework en la ejecución). Las partes correspondientes al cliente y al servidor, están únicamente separadas por una función ‘if’ que define si estamos en el cliente o si nos encontramos en el servidor.
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
}
El apartado Events podría ser similar a los eventos jQuery. En este caso cada clic que hagamos en el botón incrementará la variable ‘counter’, variable que es almacenada en un objeto 'Session'. Una modificación en esta variable será visible por todos aquellos componentes que la estén referenciando, como por ejemplo, ‘helpers’.
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
Sigamos con este ejemplo donde encontramos un helper definiendo una función que devolverá Session.get('counter') . O lo que es lo mismo, este helper estará escuchando o leyendo la variable 'counter' del objeto Session y cada vez que se detecte un cambio en su valor, solicitará al HTML (front-end) que muestre el nuevo valor de dicho objeto.
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
¿Template? Template o plantilla definirá que aquello que suceda en el bloque que encabeza, deberá aplicarse únicamente al HTML. El hecho de no aislar algunas funciones con templates puede ocasionar ‘side-effects’, lo que viene siendo que los valores de la función se muestren en lugares equivocados al no estar bien definidos.
pruebaOpenwebinars.html : Aquí tenemos el front-end o aspecto que daremos a nuestro proyecto.
<head>
<title>pruebaOpenwebinars</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Como podemos ver, la plantilla 'hello' ({{> hello}}) que compone el cuerpo de la aplicación, se define en el mismo HTML: <template name=”hello”> . Lo único a destacar de este código, es la etiqueta <p> , donde encontramos cómo se llama a '{{counter}}' , el método que definimos en el bloque helper del fichero .js: counter: function() . Al igual que antes, las variables almacenadas en el objeto Session, serán las que definan el valor de este componente en el HTML; si la variable 'counter' cambia, este elemento del HTML refrescará su valor.
pruebaOpenwebinars.css : Almacenará los estilos que queramos aplicar a nuestro proyecto, por el momento, nada más que añadir ;).
Ya conociendo con qué nos vamos a encontrar, en los próximos días nos pondremos manos a la obra. Un saludo!
También te puede interesar...
