Your SlideShare is downloading. ×
  • Like
The End of Dinosaurs happened because of [a] Meteor
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The End of Dinosaurs happened because of [a] Meteor


My slides of a Sfeir Share Presentation of MeteorJS

My slides of a Sfeir Share Presentation of MeteorJS

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. _meteor
  • 2. Meteor is a platform built on top of NodeJS for building real-time web apps. Building Real-Time JavaScript Web Apps
  • 3. The real-time web is a set of technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates. source : wikipedia
  • 4. _start
  • 5. $ curl | sh or $ [sudo -H] npm install -g meteorite During the demo the first installation is used
  • 6. github repository for demo code
  • 7. $ meteor create foreign-exchange creates /foreign-exchange folder with boilerplate code (.js .css .html)
  • 8. $ cd foreign-exchange $ meteor
  • 9. Start your browser and go to localhost:3000
  • 10. Meteor Packages $ meteor add [package_name] $ meteor list meteor add bootstrap
  • 11. _Project structure
  • 12. $ ls -l foreign-exchange/ main.html # loaded after any thing else main.js # loaded after any thing else /client # runs only on client side + CSS + Templates ! /server # runs only on server /public # runs on both client & server + assets /lib # files loaded before anything else /collections # may be to store collections it’s not a rule but it’s a structure suggestion
  • 13. _Templates
  • 14.
  • 15. Working with templates - Handlebars <head> <title>Foreign Exchange</title> </head> <body> <div class="container"> <header class="navbar"> <div class="navbar-inner"> <a class="brand" href="/">Foreign Exchange</a> </div> </header> <div id="main" class="row-fluid"> {{> fxList}} </div> </div> </body> client/main.html
  • 16. Working with templates - Handlebars <template name="fxList"> <div class="posts"> {{#each fx}} {{> fxItem}} {{/each}} </div> </template> client/views/bofs_list.html
  • 17. Working with templates - Manager var fxData = [{ "location": "Paris", "currency": "1 EUR", "target": "USD", "country":"us", "rate":1.35} ]; Template.fxList.helpers({ fx: fxData }); client/views/fx_list.js | git co step02
  • 18. _Data Collections
  • 19. Collections Data is stored in Meteor in the Collection. A collection is a special data structure that, along with publications, takes care of the job of synchronising real-time data to and from each connected user's browser and into the Mongo database.
  • 20. Collections FX = new Meteor.Collection(“foreignX”); collections/bofs.js
  • 21. Collections seen from server On the server, the collection acts as an API into your Mongo database. $ meteor mongo # starts the embedded mongoDB console >db.posts.insert({title:’Hello there !’}); >db.posts.find(); {“_id”:ObjectId(..). “title”:”Hello there !”} MongoDB is the de facto database used by Meteor until now
  • 22. Collections seen from client local, in-browser cache of the real Mongo collection MiniMongo is client-side Mongo client -use DevTools>db.posts.insert({title:’Hello there !’}); 1. first insert the data in the client collection 2. tries to sync with server 3. if it’s ok then server is updated and all connected clients else the inserted item is deleted again. Latency Compensation
  • 23. Collections Publications & Subscriptions 1 $ meteor remove autopublish Meteor.publish('posts', function() { return Posts.find(); }); Meteor.subscribe('posts'); by default entire collections are accessible by all connected users
  • 24. Collections Publications & Subscriptions 2 Meteor.publish('posts', function() { return Posts.find(); }); Publishing Full Collections Meteor.publish('posts', function() { return Posts.find({‘author’:’Tom’}); }); Publishing Partial Collections Meteor.publish('posts', function() { return Posts.find({},{fields:{author:false}}); }); Publishing Partial Properties
  • 25. Routing $ meteor add router $ meteor update --release … </div> </header> <div id="main" class="row-fluid"> {{renderPage}} </div> </div> </body> client/main.html
  • 26. Routing Meteor.Router.add({ '/': 'fxList' }); Basic Routing Meteor.Router.add({ '/': 'postsList', '/posts/:_id': { to: 'postPage', and: function(id) { Session.set('currentPostId', id); } } }); Session Driven Routing client/helpers/router.js
  • 27. Accounts $ meteor add accounts-ui accounts-password <header class="navbar"> <div class="navbar-inner"> <a class="brand" href="/">Foreign Exchange</a> <!--div class="nav-collapse collapse"> <ul class="nav pull-right"> <li>{{loginButtons}}</li> </ul> </div--> </div> </header> client/main.html
  • 28. Resources
  • 29. _Thanks ! Q&A ?