inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D

Meteor JS
WORKSHOP
Jaume Bosch
Marc Cobos
Olga Dziêgielewska
Jonatan Fernández

MeteorJS: ¿QUÉ ES?
METEOR es una plataforma open source para crear web apps.
Utiliza DDP(Distributed Data Protocol) para transferir datos
entre Cliente y Servidor.
La parte servidora de Meteor utiliza Node.js y MongoDB.
Meteor API sirve para implementar la parte cliente y la parte
servidora.

VENTAJAS
Data on the Wire: no envia HTML por la red, envia los datos y el Cliente
decide cuando quiere renderizarlo
Database Everywhere: la misma API para acceder a la base de datos de la
parte cliente/servidora
Simplicity Equals Productivity: API muy facil
One Language: JavaScript

VENTAJAS
Full Stack Reactivity: todas las capas, desde la base de datos hasta los
templates, deberían permitir utilizar una interfaz event-driven.

Embrace the Ecosystem: integra otras herramientas y frameworks.

Latency Compensation: prefetching y simulación del modelo (en la parte
cliente)

DESVENTAJAS
Problemas con seguridad
MongoDB/autopublish
*latencia

Problema con indexing/JavaScript
*la solución propensa a ataques DDoS

MONGODB
MONGODB es un sistema de base de datos NoSQL. Se instala
por defecto junto con Meteor.
Rooms = new Meteor.Collection('rooms');

Actualmente la mayoría de las aplicaciones Meteor utilizan
MongoDB como su base de datos, porque es la mejor
soportada, sin embargo soporte para otras bases de datos están
en camino.

MONGODB
● Insert en una Colección MongoDB
var x =

Rooms.insert({
url: newUrl,
name: newName,
room_id: key,
userOwner: keyUser,

});

MONGODB
● Select en una Colección MongoDB
Rooms.find({num: {$in: [1,2,3]}}, {sort:{ num: 1}}).fetch();

● Delete en una Colección MongoDB
Rooms.remove({num: 1});

● Mas informarción en: http://www.mongodb.org/

INSTALACIÓN
# Instalar node.js [http://nodejs.org https://github.com/joyent/node]
>
>
>
>
>

git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install

# Instalar npm [https://npmjs.org/]
> git clone http://github.com/isaacs/npm.git
> cd npm
> sudo make install

# Instalar Meteor [https://www.meteor.com/]
> curl https://install.meteor.com | /bin/sh

# Instalar Meteorite con uno de los dos comandos siguientes [https://github.com/oortcloud/meteorite]
> sudo npm install -g meteorite
> sudo -H npm install -g meteorite

ESTRUCTURA

Iconos: http://dryicons.com

ESTRUCTURA
lib/
environment.js
lmethods.js
external/
collections/
client/
lib/environment.js
lib/helpers
application.js

#
#
#
#
#
#
#
#
#

index.html
index.js
views/
<page>.html
<page>.js
<type>/
stylesheets/
server/
publications.js
lib/environment.js
tests/

# <- toplevel html
# <- and its JS
#
#
#
#

<<<<<<<<<-

<<<<-

any common code for client/server.
general configuration
Meteor.method definitions
common code from someone else
definitions of collections and methods on them (could be models/)
client specific libraries (also loaded first)
configuration of any client side packages
any helpers (handlebars or otherwise) that are used often in view files
subscriptions, basic Meteor.startup code.

the templates specific to a single page
and the JS to hook it up
if you find you have a lot of views of the same object type
css / styl / less files

# <- Meteor.publish definitions
# <- configuration of server side packages
# <- unit test files (won't be loaded on client or server)

Fuente
github.com/oortcloud/unofficial-meteor-faq

EJEMPLO LEADERBOARD

Icono: http://dryicons.com

EJEMPLO LEADERBOARD
● Crear un nuevo proyecto:
> meteor create nombre_proyecto

PAQUETES
Añadir funcionalidades/paquetes no instalados por defecto
en el proyecto.
# Mostrar paquetes disponibles
meteor list
# instalar un nuevo paquete
meteor add nombrePaquete
# Eliminar un paquete instalado previamente
meteor remove nombrePaquete

PAQUETES
Distintos paquetes usados:
● Accounts-Password
● HTTP
● Iron-router

DESPLIEGUE
Meteor es un servidor de aplicaciones completo. Incluimos todo lo que
necesitas para desplegar tus aplicaciones a la internet: tu sólo tienes que
encargarte del JavaScript, HTML, y CSS.
# Despleguar tu aplicacion en el dominio meteor.com
meteor deploy myapp.meteor.com
# Despleguar tu aplicacion en localhost:3000
meteor

DESPLIEGUE
# Despleguar tu aplicacion en otro puerto de localhost
meteor --port=NumPort
# Borrar el despliegue hecho en meteor.com
meteor deploy myapp.meteor.com --delete
# Reiniciar la BBDD Mongo de tu aplicación
meteor reset

SETTINGS FILE
# Puedes asociar al proyecto un fichero con variables de configuración
meteor --settings settingFile.json
fichero: settingFile.json

Acceso a las variables de settingFile.json

{
"public" : {
"Variable1" : "ValorVariable1"
"Variable2" : "ValorVariable2"
}
}

Meteor.settings.public.variable1;

PRIVATE CHATS
● 1 server de autenticación
central (authServer)
● N ChatServer privados
● ChatServer’s conocen al
authServer (validación)
● Los mensajes no pasan
por el authServer (se
redirige al usuario)
Iconos: http://dryicons.com

PRIVATE CHATS

AUTHSERVER

rooms.js

PRIVATE CHATS

AUTHSERVER

private_chats.js

PRIVATE CHATS

CHATSERVER

messajesList.html

PRIVATE CHATS

CHATSERVER

chatserver.meteor.com/room/YqZ3sEhLK7aLxhnmy
?usr=JTv6apBxfXrpEmvjT
&tok=XKayJuRmjQRnM2Eu5

router.js

PRIVATE CHATS

CHATSERVER

router.js

PRIVATE CHATS

DEMO

authserver.meteor.com

inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D

Más contenido relacionado

Destacado

Similar a inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D

Más de inLabFIB

inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D