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)

    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, ...

     $ meteor add accounts-facebook 
     $ meteor remove accounts-facebook

    more than 900 packages on atmosphere.meteor.com

    plus any package from NPM!!

    Links



    Discover Meteor


    Mallorca.IO


    Workshops/Talleres de Meteor.js para todos los niveles

    Principiantes (mejor intro al webdev)

    Disenadores (poder hacer una app entera)

    Programadores ( gozar del reactivity programing)

    Emprendedores (hacer sus ideas realidades)


    Crear una comunidad unida 
    (organisacion en Github, proyectos open source)


    DondE?


    Parc Bit y PalmaActiva


    Cuando?


    a definir

    Intro de Meteor.js

    By kevohagan

    Made with Slides.com

    Intro de Meteor.js

    Intro de Meteor.js el full-stack Javascript Web Framework. Did you say awesome?

    • 4,322

    More from kevohagan