J AVA S C R I P T A L L T H E W AY N O T J U S T F O R R O C K S TA R S

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

powered by

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

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

Lots of fields

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 W I T H U N I V E R S A L J A VA S C R I P T

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

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

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

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

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

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

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

Remote Procedure Calls

Data subscriptions

DDP via WebSocket

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

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

The initial request and all static resources are transferred via HTTP

LiveQuery watches for changes and pushes data to all subscribed

clients

Tracker triggers reactiveupdates, e.g. in the UI

powered by Blaze

F I L E S T R U C T U R E SW H A T G O E S W H E R E

client - is executed only on the client

server - is never sent to the client

public - contains static assets

everything* else is shared

*I lied. Check the details in the official docs http://docs.meteor.com/#/full/structuringyourapp

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

Packages

Our code

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

meteor add accounts-twitter

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

Mobile

Server/ Client

I N S TA L L M E T E O RB U I L D Y O U R O W N

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

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

S H O P. C O W A N T S Y O U !O N E M O R E T H I N G

https://job

s.lever.co

/shopco

– M E . S E P T E M B E R 2 0 1 5

„Go forth and build amazing things.“