The End of Dinosaurs happened because of [a] Meteor
-
Upload
abderrazak-bouadma -
Category
Technology
-
view
1.245 -
download
1
Transcript of The End of Dinosaurs happened because of [a] Meteor
![Page 1: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/1.jpg)
_meteor
![Page 2: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/2.jpg)
Meteor is a platform built on top of NodeJS
for building real-time web apps.
Building Real-Time JavaScript Web Apps
![Page 3: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/3.jpg)
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
![Page 4: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/4.jpg)
_start
![Page 5: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/5.jpg)
$ curl https://install.meteor.com | sh
$ [sudo -H] npm install -g meteorite
or
During the demo the first installation is used
![Page 6: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/6.jpg)
github repository for demo code
https://github.com/jpuzzler/meteor-workshop
[email protected]:jpuzzler/meteor-workshop.git
![Page 7: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/7.jpg)
$ meteor create foreign-exchange
creates /foreign-exchange folder with boilerplate code (.js .css .html)
![Page 8: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/8.jpg)
$ cd foreign-exchange$ meteor
![Page 9: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/9.jpg)
Start your browser and go to localhost:3000
![Page 10: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/10.jpg)
$ meteor add [package_name]
meteor add bootstrap
$ meteor list
Meteor Packages
![Page 11: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/11.jpg)
_Project structure
![Page 12: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/12.jpg)
$ ls -l foreign-exchange/main.html # loaded after any thing elsemain.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
![Page 13: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/13.jpg)
_Templates
![Page 14: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/14.jpg)
http://handlebarsjs.com/
![Page 15: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/15.jpg)
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
![Page 16: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/16.jpg)
Working with templates - Handlebars
<template name="fxList"> <div class="posts">
{{#each fx}} {{> fxItem}}
{{/each}} </div>
</template>
client/views/bofs_list.html
![Page 17: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/17.jpg)
Working with templates - Manager
client/views/fx_list.js | git co step02
var fxData = [{ "location": "Paris", "currency": "1 EUR", "target": "USD", "country":"us", "rate":1.35}];
Template.fxList.helpers({ fx: fxData});
![Page 18: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/18.jpg)
_Data
Collections
![Page 19: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/19.jpg)
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.
![Page 20: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/20.jpg)
Collections
FX = new Meteor.Collection(“foreignX”);
collections/bofs.js
![Page 21: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/21.jpg)
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
![Page 22: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/22.jpg)
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 collection2. tries to sync with server3. if it’s ok then server is updated and all connected clients else the inserted item is deleted again.
Latency Compensation
![Page 23: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/23.jpg)
Collections Publications & Subscriptions 1
$ meteor remove autopublish
by default entire collections are accessible by all connected usershttp://docs.meteor.com/#publishandsubscribe
Meteor.publish('posts', function() { return Posts.find();});
Meteor.subscribe('posts');
![Page 24: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/24.jpg)
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
![Page 25: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/25.jpg)
Routing$ meteor add router
client/main.html
… </div>
</header> <div id="main" class="row-fluid">
{{renderPage}} </div>
</div></body>
$ meteor update --release 0.6.4.1
![Page 26: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/26.jpg)
Routing
client/helpers/router.js
Meteor.Router.add({ '/': 'fxList'});
Basic Routing
Meteor.Router.add({ '/': 'postsList', '/posts/:_id': { to: 'postPage', and: function(id) { Session.set('currentPostId', id); } }});
Session Driven Routing
![Page 27: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/27.jpg)
Accounts$ meteor add accounts-ui accounts-password
client/main.html
<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>
![Page 28: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/28.jpg)
Resourceshttp://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
![Page 29: The End of Dinosaurs happened because of [a] Meteor](https://reader031.fdocuments.net/reader031/viewer/2022030212/589ff6881a28ab46598b58d5/html5/thumbnails/29.jpg)
_Thanks ! Q&A ?