INtro DE Meteor.js

A better way to build apps

@kevohagan

twitter : @kevohagan

github: @kevohagan

Hoy en Dia

Front End :

Jquery, Dojo, Angular, Backbone, Ember, Derby

etc etc..

Back End :

PHP, Django, Ruby on Rails, .NET, Java, Node.js

etc etc...

??? Perdido??

Meteor.js

100% Javacript

Un solo idioma

Misma manera de programar en cliente y servidor

MUY MUY simple para empezar

Muchisimo mas simple

simplicity === productivity

QUE SIGNIFICA ESTO?

Equipo unido

Velocidad de desarollo

Menos costes

MVP (Minimun Viable Product)

Para Empezar

Instalar

 $ curl https://install.meteor.com | /bin/sh

(Windows) http://win.meteor.com/

Crear

$ meteor create bbpmi

Lanzar

$ cd bbpmi
$ meteor
=> Meteor server running on: http://localhost:3000/

Estructura Carpeta

./meteor/client/packages/server/public

Reglas de la APP

carpeta /server funciona lado servidor

carpeta /client vive en el cliente

Todo lo demas esta presente en ambos lados

archivos estaticos en /public

ClientE

/client/compatibility jquery.timeago.js/helpers router.js config.js users.js /css bootstrap-theme.css /views/home home.html home.js home.css /etc etc

ServiDoR

 /server
   sensitive.js   publications.js   admin.js   startup.js   email.js

Crear App

$ meteor create bbpmi                                                                                                          
bbpmi: created.

To run your new app:
   cd bbpmi
   meteor

desplegar APP

Minificacion y compresion automatica en prod

En los servidores de meteor.com :

 $ meteor deploy bbpmi
open http://bbpmi.meteor.com

 #OR
$meteor deploy www.bbpmi.com

CNAME pointing to origin.meteor.com

Tu infrastructura ( cualquier servidor con node.js instalado )

 $ meteor bundle myapp.tgz

PRINCIPIOS de Meteor.Js

Puro JavaScript

Tu app es 100% JavaScript.

No hay diferencia de estilo de codigo entre cliente y servidor

(no como otros frameworks)

Mucho mas sencillo para todos

desarolladores como disenadores

workflow facil

UPdates Automaticos

Solo tienes que escribir tus templates.

Se actualizan automaticamente cuando la base de datos cambia

Magico?

<template name="usuario"> <h1>{{nombre}}</h1> <p>{{trabajo}}<p></template>

SincroniZacion de Data

JSON enviado al navegador utilizando el protocolo DDP

(data distributed protocol) creado por Meteor

Write your client code as if it were running on the server and had direct access to the database.

Data API lado cliente igual que Mongo

Unificacion de la manera de llamar al Data

MOngo Por Todo

 Usuarios = new Meteor.Collection("usuarios");

Usuarios.find();
Usuarios.findOne();
Usuarios.insert();
Usuarios.update();
Usuarios.remove();

compensación de latencia

Si el usuario hace un cambio, el navegador lo cambia en seguida

Mucho mas rapido (casi demasiado!)

asynchronous callback del servidor

Si el servidor no acepta el cambio :

actualiza el navegador en el callback

oauth, allow/deny

Hot Code PUSH

codigo CALIENTE ;)

Si actualizas tu app, los usuarios conectados no estan afectados

Buena solucion para app moviles por ejemplo, no tener que mantener versiones antiguas ( todos los usuariso estaran actualizados al abrir la app de nuevo)

Articulo del creador de Ralph App

Fully self-contained application bundles.

 meteor deploy

Hosting gratuito meteor.com (para siempre!!)

Meteor.com, empresa con $11Millones de inversion

Van a lanzar su servicio de hosting extra scalable GALAXY

Smart Packages

 $ meteor list

accounts-base          A user account system
accounts-facebook      Login service for Facebook accounts
accounts-github        Login service for Github accounts
accounts-google        Login service for Google accounts
accounts-meetup        Login service for Meetup accounts
accounts-password      Password support for accounts.
accounts-twitter       Login service for Twitter accounts
accounts-ui            Simple templates to add login widgets to an app.
accounts-ui-unstyled   Unstyled version of login widgets
accounts-weibo         Login service for Sina Weibo accounts
amplify                API for Persistant Storage, PubSub and Request
appcache               enable the application cache in the browser
audit-argument-checks  Try to detect inadequate input sanitization
autopublish            Automatically publish the entire database to all clients
backbone               A minimalist client-side MVC framework
bootstrap              Front-end framework from Twitter
code-prettify          Syntax highlighting of code, from Google
coffeescript           Javascript dialect with fewer braces and semicolons
d3                     Library for manipulating documents based on data.
ejson                  Extended and Extensable JSON library
email                  Send email messages
force-ssl              Require this application to use secure transport (HTTPS)
handlebars             Simple semantic templating language
htmljs                 Easy macros for generating DOM elements in Javascript
http                   Make HTTP calls to remote servers
insecure               Allow all database writes by default
jquery                 Manipulate the DOM using CSS selectors
jquery-history         pushState module from the jQuery project
jquery-layout          Easily create arbitrary multicolumn layouts
jquery-waypoints       Execute a function when the user scrolls past an element
less                   The dynamic stylesheet language.
madewith               Made With Meteor badge
page-js-ie-support     Tiny ~1200 byte Express-inspired client-side router
preserve-inputs        Automatically preserve all form fields with a unique id
router                 A reactive router built on page.js
showdown               Markdown-to-HTML processor
spiderable             Makes the application crawlable to web spiders.
spin                   Simple spinner package for Meteor
stylus                 Expressive, dynamic, robust CSS.
underscore             Collection of small helper functions: _.map, _.each, ...