Post on 24-May-2015
description
Meteor JSWORKSHOP
Jaume BoschMarc CobosOlga DziêgielewskaJonatan 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.
VENTAJASData 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
VENTAJASFull 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 seguridadMongoDB/autopublish
*latencia
Problema con indexing/JavaScript
*la solución propensa a ataques DDoS
MONGODBMONGODB 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
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
ESTRUCTURAlib/ # <- any common code for client/server.
environment.js # <- general configuration
lmethods.js # <- Meteor.method definitions
external/ # <- common code from someone else
collections/ # <- definitions of collections and methods on them (could be models/)
client/ # <- client specific libraries (also loaded first)
lib/environment.js # <- configuration of any client side packages
lib/helpers # <- any helpers (handlebars or otherwise) that are used often in view files
application.js # <- subscriptions, basic Meteor.startup code.
index.html # <- toplevel html
index.js # <- and its JS
views/
<page>.html # <- the templates specific to a single page
<page>.js # <- and the JS to hook it up
<type>/ # <- if you find you have a lot of views of the same object type
stylesheets/ # <- css / styl / less files
server/
publications.js # <- Meteor.publish definitions
lib/environment.js # <- configuration of server side packages
tests/ # <- unit test files (won't be loaded on client or server) Fuentegithub.com/oortcloud/unofficial-meteor-faq
EJEMPLO LEADERBOARD● Crear un nuevo proyecto:
> meteor create nombre_proyecto
EJEMPLO LEADERBOARD
Icono: http://dryicons.com
Icono: http://dryicons.com
Icono: http://dryicons.com
EJEMPLO LEADERBOARD
Icono: http://dryicons.com
EJEMPLO LEADERBOARD
Icono: http://dryicons.com
EJEMPLO LEADERBOARD
Icono: http://dryicons.com
PAQUETESAñadir funcionalidades/paquetes no instalados por defecto en el proyecto.# Mostrar paquetes disponiblesmeteor list
# instalar un nuevo paquetemeteor add nombrePaquete
# Eliminar un paquete instalado previamentemeteor remove nombrePaquete
Puedes ver una lista de los paquetes disponibles con meteor list, agregar paquetes a tu proyecto con meteor add, y eliminarlos con meteor remove.
PAQUETESDistintos paquetes usados:
● Accounts-Password● HTTP● Iron-router
DESPLIEGUEMeteor 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.commeteor deploy myapp.meteor.com
# Despleguar tu aplicacion en localhost:3000meteor
DESPLIEGUE# Despleguar tu aplicacion en otro puerto de localhostmeteor --port=NumPort
# Borrar el despliegue hecho en meteor.commeteor deploy myapp.meteor.com --delete
# Reiniciar la BBDD Mongo de tu aplicaciónmeteor reset
SETTINGS FILE# Puedes asociar al proyecto un fichero con variables de configuraciónmeteor --settings settingFile.json
fichero: settingFile.json
{ "public" : { "Variable1" : "ValorVariable1" "Variable2" : "ValorVariable2" }}
Acceso a las variables de settingFile.json
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
Icono: http://dryicons.com
rooms.js
PRIVATE CHATS AUTHSERVER
Icono: http://dryicons.com
private_chats.js
PRIVATE CHATS AUTHSERVER
Icono: http://dryicons.com
rooms.js
PRIVATE CHATS AUTHSERVER
Icono: http://dryicons.com
private_chats.js
PRIVATE CHATS CHATSERVER
Icono: http://dryicons.com
messajesList.html
PRIVATE CHATS CHATSERVER
Icono: http://dryicons.com
router.js
chatserver.meteor.com/room/YqZ3sEhLK7aLxhnmy?usr=JTv6apBxfXrpEmvjT
&tok=XKayJuRmjQRnM2Eu5
PRIVATE CHATS CHATSERVER
Icono: http://dryicons.com
router.js