About Me

 Pablo Chiappetti 
 @p4bloch 

Full Stack Web Developer.
Multimedial Designer.
♥  PHP & JS

Lead Developer
 @bikestorming 

PES GAMER


Meteor.js

No, it's not a toy.

Web development today







  • CSS pre-processors
  • Realtime data?
  • AngularJS
  • SocketIO
  • Backbone

      • High expectations from users
      • Multiple technologies
      SERVER SIDE
      • Python
      • PHP
      • Ruby
      • Node
      • Database?
      FRONT END



       SO WHAT IS METEOR?

      Meteor is an open-source platform for building top-quality, reactive, web apps in a fraction of the time , whether you're an expert developer or just getting started .



      where is meteor at now?


      • Funded with $11M late 2012
      • VERY active development since
      • Close to release of v1.0
      • No huge changes expected on API
      • Already efficient on production

      active community






      METEOR is cool

      Full stack JS framework.

      MAIN PRINCIPLES OF METEOR


       DATA ON THE WIRE 

        Don't send HTML over the network. 

       Send data  and let the client decide how to render it.




       One language 

      Javscript FTW!



       Database Everywhere 

       Database  is present on both the
       server and the client 



       Latency compensation 

      When the user makes a change,
      the  UI renders immediately 



       Full stack reactivity 

       Everything reacts  to changes.
      Reactive programming.

      get started!

      On Windows (unofficial) 



      Installation on Mac / Linux
      http://win.meteor.com/









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

      meteor cli


      $ meteor --help
      run             [default] Run this project in local development mode
      create          Create a new project
update          Upgrade this project to the latest version of Meteor
add             Add a package to this project
remove          Remove a package from this project
list            List available packages
bundle          Pack this project up into a tarball
mongo           Connect to the Mongo database for the specified site
reset           Reset the project state. Erases the local database.
deploy          Deploy this project to Meteor
logs            Show logs for specified site
authorized      View or change authorized users for a site
claim           Claim a site deployed with an old Meteor version
login           Log in to your Meteor developer account
logout          Log out of your Meteor developer account
whoami          Prints the username of your Meteor developer account
test-packages   Test one or more packages
login           Log in to your Meteor account

      Our first meteor app


      Create it using Meteor CLI
      $ meteor create meetupjs

      Run it!
      $ cd meetupjs
$ meteor[[[[[ ~/Meteor/meetupjs ]]]]]

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

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

      WHAT HAPPENS ON RUNTIME?


      • Joins all  JS  files into one, minified file.
      • Compiles  CSS  files into one file, also minified.
      • CSS & JS  generated files are  versioned 
      • Scan project tree for  HTML  files and concatenate head and body tags




      By default, Meteor creates this for us:
      meetupjs $ ls
meetupjs.css  meetupjs.html meetupjs.js

      We can be as flexible as we need
      with our app's structure.

      APP STRUCTURE




      Main special directories
      /client               Files available to the client *only*
/server               Files available to the server side *only*
/public               Home directory of the app, client assets

      Reactivity sample



      Set Template
      Send data to the template
      Create new MongoDB collection
       Clients = new Meteor.collection("clients");
      Template.clients.clientList = function() {   return Clients.find();};
      <template name="clients">    {{ #each clientList }}       {{ name }}    {{ /each }}</template>


        QUICK DEMO  

         Demo | Github  
      Made with Slides.com