Introducción a

View Github Repository Open presentation in a new window

manufosela

See all presentation from manufosela

Introducción a

0 0

introduccion-meteor

Presentación en reveal.js de la Introducción a MeteorJS del 27 de Enero de 2015 para el Meetup Mad-NodeJS

On Github manufosela / introduccion-meteor

Introducción a

 

 

 

 

 

 

 

@manufosela

Analista/Dev-Back-Front/Dev-Op/Maquetador en Orange

Llevo desde 1999 haciendo web

En los últimos años dedicando el 70% del tiempo a desarrollo FrontEnd

Indice

¿Qué es Metor?

 

Meteor es una plataforma de código abierto de próxima generación para la creación de aplicaciones web en tiempo real en un tiempo mínimo

 

fuente: https://blog.openshift.com/day-15-meteor-building-a-web-app-from-scratch-in-meteor/

ya, pero... ¿Qué es Meteor?

Meteor es:

  • Es una plataforma FullStack: servidor, base de datos, framework…
  • Basada completamente en javascript
  • Permite usar cualquier libreria/framework javascript
  • Compatible con los paquetes npm de node
  • Integrada con Apache-Cordova para generar facilmente mobile apps

¿Es el único o el primero?

 

No, hay otras plataformas con similitudes a Meteor

mojito ( https://github.com/yahoo/mojito/ )

rendr ( https://github.com/rendrjs/rendr )

¿Qué lo diferencia del resto?

 

MeteorJS es una evolución hacia la sencillez.

Principios de Meteor

1.- Datos en Línea.

No envía HTML a través de la red. Envía datos que se renderizan en cliente.

Usa websockets

2.- Un solo Lenguaje

Tanto la interfaz del cliente como la del servidor usa JavaScript.

Javascript Isomorfico

3.- Base de Datos en Todas Partes

Usa la misma API para acceder de forma transparente a su base de datos desde el cliente o el servidor.

gracias miniMongo se puede hacer queries en cliente

4.- Compensación de Latencia.

En el cliente, se usa pre-extracción (prefectching) y simulación del modelo para conseguir el efecto de una conexión de latencia cero con la base de datos.

Después se encarga de sincronizar los datos con la base de datos y esta con el resto de clientes

5.- Reactividad Full Stack

El tiempo real es el valor por defecto en todas las capas, desde la base de datos hasta las plantillas

Es decir, cualquier cambio en un dato es informado de inmediato

6.- Se adhiere al Ecosistema

Meteor es de código abierto e integra, mas que sustituye, las herramientas y frameworks existentes

Atmosphere, es el repositorio de paquetes de Meteor. Hay unos 3,300 paquetes

Meteor tambien puede usar cualquiera de los mas de 115,000 paquetes de Node.js

7.- Simplicidad Equivale a Productividad.

La mejor manera de hacer que algo parezca simple es que realmente lo sea.

 

  • Evita repeticiones.
  • Muchos paquetes disponibles.
  • Cambio de contexto leve.
  • Desarrollo más rápido.

¿DESVENTAJAS?

...

temas de seguridad por el autopublish y la latencia?. Propensa a ataques DDoS?

Más detalles

Usa Suscripciones (websockets) en vez de Peticiones

Aunque si pierde la conexión con el servidor usa polling

Por defecto crea “Single Page Apps”, pero puede no hacerlo

Usando el paquete de routes: iron:routes

El Core de Meteor

  • Blaze, es el motor de templating. Viene de Handlebars.
  • Isobuild API, usa la misma sintaxis en cliente que en servidor.
  • Tracker, para la reactividad y detectar cuando cambia algo y necesario propagarlo.
  • DDP, Distributed Data Protocol, el protocolo de comunicacion que usa meteor. DDP hace principalmente 2 cosas:
    • Maneja las RPC (llamadas a procedicimientos remotos)
    • administra los datos (added, changed, removed)
    Se puede usar el paquete ddp-analyzer para ver todo el flujo
  • Livequery, conjunto de conectores de base de datos en vivo. Que utiliza FSDD, Full Stack Database Driver (controladores de bases de datos "Full Stack").
  • Ahora mismo está empaquetado con Mongo y con Redis experimentalmente. Pero ya hay paquetes MySQL.

No nos quedemos frios.

Entremos en materia!

Instalar meteor

              $:~> curl https://install.meteor.com/ | sh

(fuente: https://www.meteor.com/install )

Crear una App en meteor

              $:~> meteor create mad-nodejs

Esto nos crea el directorio mad-nodejs

con todos los ficheros que la aplicación Meteor necesita

Estos son:

  • mad-nodejs.js
  • mad-nodejs.html
  • mad-nodejs.css
  • .meteor

Estructura de directorios

  • client/
  • public/
  • server/
  • lib/
  • private/
  • collections/
  • ...
Esto no es obligatorio, pero es la manera que recomiendan. Cualquier html, js y css será utilizado cuando se lance la app. El orden de carga es primero lo que haya en lib/ (si existe), después archivos que empiecen por "main", despues el resto por orden alfabetico. Lo que haya en el directorio client/ se ejecuta en cliente y lo que haya en la carpeta server/ en el servidor. El resto de javascript se ejecutará en ambos, salvo que se indique en el propio codigo ( Meteor.isClient y Meteor.isServer )

Para arrancar la aplicación:

              $:~> cd mad-nodejs
              $:~> meteor
              [[[[[ ~/mad-nodejs ]]]]]

              => Started proxy.                             
              => Started MongoDB.                             
              => Started your app.                          

              => App running at: http://localhost:3000/

En un navegador ponemos:

http://localhost:3000

 

 

 

 

Rompamos algo...

  • Ejercicio 1:
    • Instalar meteor
    • Crear proyecto: meteor create mad-nodejs
    • Arrancar proyecto: cd mad-nodejs; meteor
    • Comprobar en 2 navegadores.
  • Ejercicio 2:

    Añadir paquete mizzao:bootstrap-3 Y observar que cuando se termina de instalar ambos navegadores cambian el aspecto de lo que aparece.

  • Ejercicio 3:
    • Agregamos un template nuevo llamado 'people' con una iteración de people y mostramos una lista de nombres y apellidos.
    • Creamos un helper con people y devolvemos un array de nombres.
    • Vemos que se muestran.
  • Ejercicio 4:

    Añadimos evento mousehover a cada LI y que devuelva el apellido... Q se muestre el apellido y con el mouseout desaparezca.

  • Ejercicio 5:
    • Añadimos collection. Q se rellene la primera vez con valores por defecto. Cambiamos en el helper el array por una query al <collection.
    • Probamos desde shell mongo a insertar, desde consola del navegador tb. Vemos q se actualiza en todos lados.
  • Ejercicio 6:
    • Quitamos autopublish y vemos q desaparecen los datos.
    • Agregamos publish y subscribe y vemos q vuelve a funcionar.

Recursos y fuentes

¿Preguntas?

Gracias

Introducción a