An introductory talk originally intended for JSConf Belgium 2015 (unfortunately had to be cancelled due to health reasons).

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

2. T H E R O A D S O FA R
• Applications in the browser
• JavaScript everywhere
• Overwhelming tools

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

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

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

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

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

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

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

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

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

12. A M E T E O R A P P E A R E D
N O W

13. A M E T E O R A P P E A R E D
N O W

15. – 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.

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

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

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

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

20. 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 ?

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

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

23. 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 document
Lots of fields

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

25. 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}
}
)

26. 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 off to a
child process

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

28. 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);

29. Fiber #1
0 10 20 30 40
milliseconds
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 R
T H E P O W E R O F F I B E R S

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

31. R E A C T I V I T Y

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

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

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

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

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

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

38. M E T E O R C O M M U N I C AT E 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
App
Database
Server
Livequery
App
MiniDB
Client
Blaze
Tracker
HTTP

39. M E T E O R C O M M U N I C AT E 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
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

40. M E T E O R C O M M U N I C AT E 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
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

41. M E T E O R C O M M U N I C AT E 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
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
LiveQuery watches for
changes and pushes
data to all subscribed
clients

42. M E T E O R C O M M U N I C AT E 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
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
LiveQuery watches for
changes and pushes
data to all subscribed
clients
Tracker triggers reactive
updates, e.g. in the UI
powered by Blaze

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

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

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

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

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

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

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

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