The End of Dinosaurs happened because of [a] Meteor
•
1 like•1,308 views
My slides of a Sfeir Share Presentation of MeteorJS
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to The End of Dinosaurs happened because of [a] Meteor
Similar to The End of Dinosaurs happened because of [a] Meteor (20)
Recently uploaded
Recently uploaded (20)
The End of Dinosaurs happened because of [a] Meteor
- 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 https://install.meteor.com | sh or $ [sudo -H] npm install -g meteorite During the demo the first installation is used
- 6. https://github.com/jpuzzler/meteor-workshop git@github.com:jpuzzler/meteor-workshop.git 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
- 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
- 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
- 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 http://docs.meteor.com/#publishandsubscribe
- 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 0.6.4.1 … </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
- 29. _Thanks ! Q&A ?