Build Facebook-Quality Apps with Meteor

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 R
U 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 R
N 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 D
N 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

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 S
M 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 Client
SELECT 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 Client
SELECT 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}
}
)
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
Event
queue
Event
Event
Event
Event
…
Node.js
Event Loop
Thread
pool
Disk
Network
Process
…
Single threaded
processing
Callback
split oﬀ to a
child process

C A L L B A C K H E L L
T 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 R
T 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 40
milliseconds
By default Meteor
creates one ﬁber
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 R
T 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 S
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
•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

R E A C T I V I T Y
•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

R E A C T I V I T Y
•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

R E A C T I V I T Y
•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 S
R 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 S
App
Database
Server
Livequery
App
MiniDB
Client
Blaze
Tracker
HTTP

App
Database
Server
Livequery
App
MiniDB
Client
Blaze
Tracker
HTTP
Static assets
HTML, 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 DDP
and 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 reactive
updates, 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 R
L 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

Build Facebook-Quality Apps with Meteor

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie Build Facebook-Quality Apps with Meteor

Ähnlich wie Build Facebook-Quality Apps with Meteor (20)

Mehr von Stephan Hochhaus

Mehr von Stephan Hochhaus (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Build Facebook-Quality Apps with Meteor