Megatutorial Meteor en Español (1) - El Framework Más Popular en Github - JSJutsu

19/7/2016
MegatutorialMeteorenEspaol(1)ElframeworkmspopularenGithub|JSJutsu
Blog Archivo Productos Acerca de Contacto

Blog
Archivo
Productos
Acerca de
Contacto
Tutoriales tiles para la jungla Web y JavaScript
26-12-2015
Megatutorial Meteor en Espaol (1) - El

framework ms popular en Github
Meteor
Las partes de este tutorial son:

Parte 1: el hola mundo de Meteor y la estructura de un proyecto.
Parte 2: cmo crear vistas y rutas e introduccin a Atmosphere.
Parte 3: las colecciones de datos.
Parte 4: usuarios y autenticacin.
file:///D:/FRAMEWORK%202/METEOR/Megatutorial%20Meteor%20en%20Espa%C3%B1ol%20(1)%20%20El%20framework%20m%C3%A1s%20popular
1/10
19/7/2016
Parte 5: llamadas a mtodos en el servidor.

Meteor es la plataforma de moda para aplicaciones web en tiempo real. S, ms que un
framework es una plataforma. Y, si atendemos al hype que hay en Github con l, parece que ha
llegado para quedarse.
Yo llevo un poco de tiempo utilizndolo, y los resultados han sido ms que satisfactorios. De
hecho, ahora mismo no conozco nada mejor para prototipar una aplicacin web moderna y
en tiempo rcord.
En este Megatutorial, que dividir en varias secciones, te voy a mostrar el potencial de Meteor.
Otro framework? Qu casos de uso tiene Meteor?

No es otro framework, es una plataforma de desarrollo de aplicaciones Universal JavaScript .
Y Meteor no es nuevo, lleva rondando bastante tiempo por ah y ya tiene una versin
suficientemente estable y madura (1.2.1) como para plantearse hacer proyectos serios con l.
Dnde usaramos Meteor?

Pues Meteor es ms o menos equivalente al stack MEAN, es decir, que afecta tanto al cliente
como al server, incluyendo la base de datos. No en vano utiliza MongoDB como capa de
persistencia, siendo perfectamente compatible con AngularJS o React, y con su propio
framework de capa cliente, Blaze.
Con esto quiero decir que su caso de uso son aplicaciones web que se beneficien de una
interaccin fluida y en tiempo real con el usuario. Por ejemplo: una startup, y adems
espaola, que hace uso de l, es mmmelon, una aplicacin de trabajo colaborativo en tiempo
real.
Qu tiene de especial?
La magia de meteor es la sincronizacin automtica entre el cliente y el servidor. Algo que
con MEAN, por ejemplo, tendras que hacer a base de cosas como Socket.IO. Con mucho ms
control, pero tambin ms trabajoso.
No voy a meterme con mucha teora, as que vamos directos al grano.
Instalacin. Ms fcil imposible

Instalar Meteor es insultantemente sencillo:
2/10
19/7/2016
curlhttps://install.meteor.com/|sh
Y en Windows tambin.
Y ya est! Incluye absolutamente todo, hasta el MongoDB :P
Hola Mundo: cmo funciona Meteor

Vamos a crear una aplicacin. Para ello, una vez tenemos Meteor instalado el comando meteor
estar disponible en la terminal:
>$meteorcreatestarwarsshop
CreatedanewMeteorappin'starwarsshop'.
3
4
Torunyournewapp:
cdstarwarsshop
meteor
7
8
IfyouarenewtoMeteor,trysomeofthelearningresourceshere:
https://www.meteor.com/learn
Eso crear una carpeta para el proyecto con unos cuantos archivos de ejemplo base. Y s, lo has
adivinado, vamos a hacer una tienda de productos de Star Wars como proyecto. En mi defensa
dir que me gustaba Star Wars antes de que se pusiera de moda y aparecieran cosas como
sta
Pero en fin, que divago
Qu nos incluye Meteor en el esqueleto

Para arrancar la aplicacin es tan sencillo como irte a la carpeta del proyecto y ejecutar meteor.
>$meteor
[[[[[/tmp/starwarsshop]]]]]
3
4
=>Startedproxy.
=>StartedMongoDB.
3/10
19/7/2016
=>Startedyourapp.
7
8
=>Apprunningat:http://localhost:3000/
Despus en el navegador vemos esto:
Aplicacin Meteor recin creada
El funcionamiento de este ejemplo es sencillo. Presenta una plantilla con un botn y segn vas a
haciendo click actualiza una variable. Una chorrada vamos.
Vamos a ver qu tienen estos archivos que hagan que la aplicacin funcione as.
Si te vas a la carpeta del proyecto vers que solo hay 3 archivos. Un HTML, un JS y un CSS.
Estructura base
starwars-shop.html
4/10
19/7/2016
<head>
<title>starwarsshop</title>
</head>
4
5
<body>
<h1>WelcometoMeteor!</h1>
7
8
{{>hello}}
</body>
10
11
<templatename="hello">
12
<button>ClickMe</button>
13
<p>You'vepressedthebutton{{counter}}times.</p>
14
</template>
En este starwars-shop.html vemos dos cosicas interesantes, y fundamentales en Meteor:

Hay una template con un name. Esta plantilla se inserta en el body mediante el uso de {{>
nombreplantilla }}
Dentro de la plantilla se referencia la variable counter.
Como ves, es una sintaxis sencilla tipo Handlebars. De hecho el lenguaje de plantillas de
Meteor se llama Spacebars y tienen una sintaxis similar.
starwars-shop.js
1
if(Meteor.isClient){
//counterstartsat0
Session.setDefault('counter',0);
4
5
Template.hello.helpers({
counter:function(){
returnSession.get('counter');
});
10
11
Template.hello.events({
12
'clickbutton':function(){
13
//incrementthecounterwhenbuttonisclicked
5/10
19/7/2016
14
Session.set('counter',Session.get('counter')+1);
15
16
});
17
18
19
if(Meteor.isServer){
20
Meteor.startup(function(){
21
//codetorunonserveratstartup
22
});
23
Este JavaScript que ves tiene dos partes de cdigo, una para el servidor (Meteor.isServer),
que no hace nada, y otra para el cliente (Meteor.isClient).
Dentro del cdigo que se ejecuta en el cliente, es decir, en el navegador:
Se establece el valor de la variable de counter en un objeto global llamado Session.
Se definen helpers para la plantilla hello, que son funciones que estn disponibles
dentro de la plantilla. En este caso se define counter, que es la que se invoca cuando en
la plantilla ponemos {{counter}}
Se definen eventos para la plantilla hello. Al estilo Backbone, con nombre de evento y
selector CSS. En este caso este evento al dispararse incrementa la variable counter.
Y ya sabemos cmo funciona el hola mundo de Meteor!
El css no lo vemos, porque es trivial.
Cmo organizar el cdigo para un proyecto ms grande

Eso de Meteor.isClient y Meteor.isServer apesta no? No pasa nada, un proyecto Meteor en
condiciones no se organiza as.
Una estructura ms razonable es la siguiente:
6/10
19/7/2016
Estructura separada
Meteor trata las carpetas de forma especial, segn sea su nombre, en este caso tenemos:
server: cdigo del servidor, que el cliente no puede ver ni ejecutar.
client: cdigo del cliente. HTML, JS y CSS iran aqu.
lib: cdigo que se compartir entre el servidor y el cliente. Estar disponible
automgicamente en los dos.
public: carpeta para los assets del proyecto (imgenes, favicon etc.).
Ms info sobre la estructura y convenciones de Meteor aqu.
Qu proyecto vamos a hacer?

Como te he dicho, una especie de tienda de psters de Star Wars. Bsicamente aprenders a
usar Meteor y a meterle cosas como:
Bootstrap
Vistas y rutas
Preprocesadores CSS
Autenticacin ultra fcil en cosa de 2 minutos, y con redes sociales y todo :P (s, de
verdad!)
Uso de paquetes npm e integracin con una pasarela de pago.
Esto es lo que iremos desarrollando a lo largo del tutorial Espero que te guste y te anime al
menos a probar Meteor al menos :D
Y a t qu te parece Meteor? ser la base de tu nueva startup? ;)
7/10
19/7/2016
#meteor
Comentarios
Compartir
Te ha resultado til? Suscrbete a JSJutsu!

Recibirs gratuitamente 2 captulos de mi libro de AngularJS: aprende a hacer aplicaciones web
modernas en tiempo rcord!
Nombre...
Email...
Obtenerellibro
NUEVOS
Megatutorial Meteor en Espaol (2) - El framework ms popular en Github
ANTIGUOS
Generadores de sitios estticos: un trmino medio entre un CMS y un desarrollo a medida
NETE AL BLOG
ANGULARJS PRCTICO
Recibe gratis 2 captulos de mi libro AngularJS Prctico
nombre...
8/10
19/7/2016
email...
Envame las lecciones!
NUBE DE TAGS
admob angular
angularjs
herramientas
hexo
aurelia
ionic
bower cms
cordova
javascript jekyll jspm lodash
d3 docpad
es2015
meteor mobile
es6
frontend
nodejs
slimerjs terminal testing
vue
ARCHIVO
Julio 2016 (1)
Junio 2016 (2)
Mayo 2016 (1)
Abril 2016 (3)
Marzo 2016 (3)
Febrero 2016 (5)
Enero 2016 (4)
Diciembre 2015 (2)
Octubre 2015 (2)
Septiembre 2015 (2)
Agosto 2015 (4)
Julio 2015 (4)
Junio 2015 (7)
Mayo 2015 (4)
POSTS RECIENTES
Tutorial express de Vue.js en espaol (3). Interaccin con APIs REST.
Tutorial express de Vue.js en espaol (2). Listas, eventos y directivas.
Tutorial express de Vue.js en espaol (1). Cmo empezar.
Cmo aadir un mapa a una app hbrida en Ionic
Tutorial Chart.js: grficas sencillas en JavaScript
9/10
19/7/2016
2016 Emilio J. Grande

Powered by Hexo
file:///D:/FRAMEWORK%202/METEOR/Megatutorial%20Meteor%20en%20Espa%C3%B1ol%20(1)%20%20El%20framework%20m%C3%A1s%20popula
10/10

Megatutorial Meteor en Español (1) - El Framework Más Popular en Github - JSJutsu

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Megatutorial Meteor en Español (1) - El Framework Más Popular en Github - JSJutsu

Загружено:

Авторское право:

Доступные форматы

19/7/2016

Blog Archivo Productos Acerca de Contacto

Tutoriales tiles para la jungla Web y JavaScript

Megatutorial Meteor en Espaol (1) - El

Las partes de este tutorial son:

Parte 5: llamadas a mtodos en el servidor.

Otro framework? Qu casos de uso tiene Meteor?

Dnde usaramos Meteor?

Instalacin. Ms fcil imposible

Hola Mundo: cmo funciona Meteor

Qu nos incluye Meteor en el esqueleto

Despus en el navegador vemos esto:

Aplicacin Meteor recin creada

En este starwars-shop.html vemos dos cosicas interesantes, y fundamentales en Meteor:

Cmo organizar el cdigo para un proyecto ms grande

Ms info sobre la estructura y convenciones de Meteor aqu.

Qu proyecto vamos a hacer?

Y a t qu te parece Meteor? ser la base de tu nueva startup? ;)

Te ha resultado til? Suscrbete a JSJutsu!

Envame las lecciones!

javascript jekyll jspm lodash

slimerjs terminal testing

2016 Emilio J. Grande

Вам также может понравиться