The End of Dinosaurs happened because of [a] Meteor

1,174 views
1,033 views

Published on

My slides of a Sfeir Share Presentation of MeteorJS

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,174
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The End of Dinosaurs happened because of [a] Meteor

  1. 1. _meteor
  2. 2. Meteor is a platform built on top of NodeJS for building real-time web apps. Building Real-Time JavaScript Web Apps
  3. 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. 4. _start
  5. 5. $ curl https://install.meteor.com | sh or $ [sudo -H] npm install -g meteorite During the demo the first installation is used
  6. 6. https://github.com/jpuzzler/meteor-workshop git@github.com:jpuzzler/meteor-workshop.git github repository for demo code
  7. 7. $ meteor create foreign-exchange creates /foreign-exchange folder with boilerplate code (.js .css .html)
  8. 8. $ cd foreign-exchange $ meteor
  9. 9. Start your browser and go to localhost:3000
  10. 10. Meteor Packages $ meteor add [package_name] $ meteor list meteor add bootstrap
  11. 11. _Project structure
  12. 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. 13. _Templates
  14. 14. http://handlebarsjs.com/
  15. 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. 16. Working with templates - Handlebars <template name="fxList"> <div class="posts"> {{#each fx}} {{> fxItem}} {{/each}} </div> </template> client/views/bofs_list.html
  17. 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. 18. _Data Collections
  19. 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. 20. Collections FX = new Meteor.Collection(“foreignX”); collections/bofs.js
  21. 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. 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. 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 http://docs.meteor.com/#publishandsubscribe
  24. 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. 25. Routing $ meteor add router $ meteor update --release 0.6.4.1 … </div> </header> <div id="main" class="row-fluid"> {{renderPage}} </div> </div> </body> client/main.html
  26. 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. 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. 28. Resources http://meteorhacks.com/understanding-meteor-internals.html http://meteorhacks.com/introducing-smart-collections.html https://github.com/arunoda/meteor-smart-collections/ http://stackoverflow.com/questions/tagged/meteor
  29. 29. _Thanks ! Q&A ?

×