Meteor - not just for rockstars

I S O M O R P H I C R E A LT I M E A P P S W I T H

FA C E B O O K - Q U A L I T Y A P P S W I T H O U T FA C E B O O K ’ S M O N E Y

METE R

Stephan Hochhaus @yauh

T H E R O A D S O FA R

• Applications in the browser

• JavaScript everywhere

• Overwhelming tools

A P P S I N T H E B R O W S E RU S E R S E X P E C T M O R E

J AVA S C R I P T C O N Q U E R E D T H E S E R V E RN O D E . J S







W E B D E V I S R O C K E T S C I E N C E

L A R G E T E A M S B U I L D L A R G E A P P S

A M E T E O R A P P E A R E DN O W

A M E T E O R A P P E A R E DN O W

– N I C K M A R T I N

At Meteor, we hope to democratize web app development by empowering anyone, anywhere to create apps.

T H E M E T E O R S TA C K

N O T O N LY F O R R O C K S TA R S



The Database

The Server Engine

Bunch of Libs



The CLI Tool

The Database

The Server Engine

Bunch of Libs



The CLI Tool

The Database

The Server Engine

Bunch of Libs

1. I S O M O R P H I S M 2. S Y N C H R O N I C I T Y 3. R E A C T I V I T Y 4. S M A R T C L I E N T S

W H Y I S I T E A S Y T O L E A R N ?

D O C U M E N T- B A S E D D ATA B A S E SM O N G O D B - T H E K E Y T O I S O M O R P H I S M


A collection


A collection

A document

Lots of fields

DB Server ClientSELECT name FROM users WHERE id = 12345

GET http://server/users/ name/12345

var name = response.name;

A C C E S S I N G D A TA T H R O U G H O U T T H E S TA C K

I S O M O R P H I C A P P L I C AT I O N S

DB Server ClientSELECT name FROM users WHERE id = 12345

GET http://server/users/ name/12345

var name = response.name;

A C C E S S I N G D A TA T H R O U G H O U T T H E S TA C K

Users.find( {_id: 12345}, {fields: {name : 1} } )



E V E N T E D A P P L I C AT I O N S N E E D C A L L B A C K S

N O D E . J S A N D T H E E V E N T L O O P

EventqueueEvent

Event

Event

Event

…

Node.js Event Loop

Thread pool

Disk

Network

Process

…

Single threadedprocessing

Callback

split off to achild process

C A L L B A C K H E L LT H E D O W N S I D E O F N O D E J S

DB.connect(options, function(err, connection){ connection.query(something, function(err, document){ ExternalAPI.makeCall(document, function(err, apiResult){ connection.save(apiResult, function(err, saveResult){ request.end(saveResult); }); }); }); });

S Y N C H R O N I C I T Y W I T H M E T E O RT H E P O W E R O F F I B E R S

DB.connect(options, function (err, con) { connection = con; }); connection.query(something, function (err, doc) { document = doc; }); ExternalAPI.makeCall(document, function (err, res) { apiResult = res; }); connection.save(apiResult, function (err, res) { saveResult = res; }); request.end(saveResult);

Fiber #1

0 10 20 30 40milliseconds

By default Meteor creates one fiber

per client

DB.connect

Wait(idle CPU time)

Event Loop

connection.query

ExternalAPI.makeCall

connection.save

request.end

S Y N C H R O N I C I T Y W I T H M E T E O RT H E P O W E R O F F I B E R S

N O M O R E E V E N T- S PA G H E T T I SR E A C T I V I T Y

R E A C T I V I T Y

R E A C T I V I T Y

Traditional programming•var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7

R E A C T I V I T Y


•a = 5;console.log(c);# c is still 7

R E A C T I V I T Y



•c = a + b;console.log(c);# c is finally 10

R E A C T I V I T Y




Reactive programming•var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7

R E A C T I V I T Y




Reactive programming•var a = 2;var b = 5;var c = a + b;console.log(c);# c is 7

•a = 5;console.log(c);# c is magically 10

S M A R T C L I E N T SR E M O T E A P P S W I T H B I - D I R E C T I O N A L C O M M U N I C A T I O N

M E T E O R C O M M U N I C AT E SR E M O T E A P P S W I T H B I - D I R E C T I O N A L C O M M U N I C A T I O N

App

Database

Server

Livequery

App

MiniDB

Client

Blaze

Tracker

HTTP


App

Database

Server

Livequery

App

MiniDB

Client

Blaze

Tracker

HTTP

Static assetsHTML, JS, CSS, JPG, PNG, etc

The initial request and all static resources are transferred via HTTP


App

Database

Server

Livequery

App

MiniDB

Client

Blaze

Tracker

HTTP

Remote Procedure Calls

Data subscriptions

DDP via WebSocket

Clients call server functions remotely via DDPand the server returns data as JSON objects


App

Database

Server

Livequery

App

MiniDB

Client

Blaze

Tracker

HTTP


Data subscriptions

DDP via WebSocket


LiveQuery watches for changes and pushes data to all subscribed

clients


App

Database

Server

Livequery

App

MiniDB

Client

Blaze

Tracker

HTTP


Data subscriptions

DDP via WebSocket


LiveQuery watches for changes and pushes data to all subscribed

clients

Tracker triggers reactiveupdates, e.g. in the UI

powered by Blaze

C O D E & PA C K A G E S

E X T E N D I N G M E T E O R



Our code



Packages

Our code

I N S TA L L M E T E O RL E T ’ S B U I L D

Linux, Mac: $ curl https://install.meteor.com/ | sh

Windows: https://www.meteor.com/install

TA L K I N G T O T H E T W I T T E R A P I

E X T E N D I N G M E T E O R W I T H O A U T H

External API

Using a package

M U LT I P L E P L AT F O R M S

A S I N G L E C O D E B A S E - M A N Y D E P L O Y M E N T S



Server/ Client



Mobile

Server/ Client

Meteor - not just for rockstars

Technology