meteor - not just for rockstars
Post on 18-Jul-2015
1.399 Views
Preview:
TRANSCRIPT
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
– 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
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
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
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
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} } )
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
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
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
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
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
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
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
Static assetsHTML, JS, CSS, JPG, PNG, etc
The initial request and all static resources are transferred via HTTP
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
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
LiveQuery watches for changes and pushes data to all subscribed
clients
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
LiveQuery watches for changes and pushes data to all subscribed
clients
Tracker triggers reactiveupdates, e.g. in the UI
powered by Blaze
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
top related