The End of Dinosaurs happened because of [a] Meteor

Meteor is a platform
built on top of NodeJS
for building real-time web apps.

Building Real-Time JavaScript Web Apps

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

$ curl https://install.meteor.com | sh
or
$ [sudo -H] npm install -g meteorite
During the demo the first installation is used

https://github.com/jpuzzler/meteor-workshop
git@github.com:jpuzzler/meteor-workshop.git

github repository for demo code

$ meteor create foreign-exchange

creates /foreign-exchange folder with boilerplate code (.js .css .html)

$ cd foreign-exchange
$ meteor

Start your browser and go to localhost:3000

Meteor Packages

$ meteor add [package_name]

$ meteor list

meteor add bootstrap

$ 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

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

Working with templates - Handlebars

<template name="fxList">
<div class="posts">
{{#each fx}}
{{> fxItem}}
{{/each}}
</div>
</template>

client/views/bofs_list.html

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

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.

Collections

FX = new Meteor.Collection(“foreignX”);

collections/bofs.js

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

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

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

Collections Publications & Subscriptions 2
return Posts.find();
});
Publishing Full Collections

return Posts.find({‘author’:’Tom’});
});
Publishing Partial Collections

return Posts.find({},{fields:{author:false}});
});
Publishing Partial Properties

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

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

Accounts
$ meteor add accounts-ui accounts-password
<header class="navbar">
<div class="navbar-inner">
<a class="brand" href="/">Foreign Exchange</a>

</div>
</header>

client/main.html

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

The End of Dinosaurs happened because of [a] Meteor

Recommended

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