The End of Dinosaurs happened because of [a] Meteor

_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

_start

$ curl https://install.meteor.com | sh

$ [sudo -H] npm install -g meteorite

or

During the demo the first installation is used

github repository for demo code

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

[email protected]:jpuzzler/meteor-workshop.git

$ 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 add [package_name]

meteor add bootstrap

$ meteor list

Meteor Packages

_Project structure

$ 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

_Templates

http://handlebarsjs.com/

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

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});

_Data

Collections

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 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

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');

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

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

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

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>

</header>

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

_Thanks ! Q&A ?

Technology

The End of Dinosaurs happened because of [a] Meteor