Meteor - not just for rockstars

2,594 views

Published on

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

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,594
On SlideShare
0
From Embeds
0
Number of Embeds
741
Actions
Shares
0
Downloads
14
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Meteor - not just for rockstars

  1. 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. 2. T H E R O A D S O FA R • Applications in the browser • JavaScript everywhere • Overwhelming tools
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. A M E T E O R A P P E A R E D N O W
  13. 13. A M E T E O R A P P E A R E D N O W
  14. 14. – 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.
  15. 15. 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
  16. 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 The Database The Server Engine Bunch of Libs
  17. 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 CLI Tool The Database The Server Engine Bunch of Libs
  18. 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. 19. 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 ?
  20. 20. 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
  21. 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 A collection
  22. 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 A document Lots of fields
  23. 23. 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
  24. 24. 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} } )
  25. 25. 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
  26. 26. 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); }); }); }); });
  27. 27. 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);
  28. 28. 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
  29. 29. 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
  30. 30. R E A C T I V I T Y
  31. 31. 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
  32. 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 •a = 5; console.log(c); # c is still 7
  33. 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 •c = a + b; console.log(c); # c is finally 10
  34. 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 Reactive programming •var a = 2; var b = 5; var c = a + b; console.log(c); # c is 7
  35. 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 •a = 5; console.log(c); # c is magically 10
  36. 36. 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
  37. 37. 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
  38. 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 Static assets HTML, JS, CSS, JPG, PNG, etc The initial request and all static resources are transferred via HTTP
  39. 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 Remote Procedure Calls Data subscriptions DDP via WebSocket Clients call server functions remotely via DDP and the server returns data as JSON objects
  40. 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 LiveQuery watches for changes and pushes data to all subscribed clients
  41. 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 Tracker triggers reactive updates, e.g. in the UI powered by Blaze
  42. 42. 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
  43. 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 Our code
  44. 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 Packages Our code
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 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 Server/ Client
  49. 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 Mobile Server/ Client

×