Meteor WWNRW Intro

694 Aufrufe

Veröffentlicht am

JavaScript all the way - Not just for rockstars

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
694
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Meteor WWNRW Intro

  1. 1. J AVA S C R I P T A L L T H E WAY 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
  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. 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
  6. 6. A M E T E O R A P P E A R E D N O W
  7. 7. – 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.
  8. 8. 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
  9. 9. 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 ?
  10. 10. 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
  11. 11. 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 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} } )
  12. 12. 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
  13. 13. 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); }); }); }); });
  14. 14. 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);
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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 Static assets HTML, 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 reactive updates, e.g. in the UI powered by Blaze
  20. 20. F I L E S T R U C T U R E S W 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. I N S TA L L M E T E O R B 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
  25. 25. S H O P. C O WA N T S Y O U ! O N E M O R E T H I N G https://jobs.lever.co/shopco
  26. 26. – M E . S E P T E M B E R 2 0 1 5 „Go forth and build amazing things.“

×