Backbone.js, Socket.io und Node.js im Einsatz

2,805 views

Published on

Talk auf der webtechcon 2012 in Mainz

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,805
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone.js, Socket.io und Node.js im Einsatz

  1. 1. BACKBONE, SOCKET.IO UND NODE.JS IM EINSATZMonday, October 15, 12
  2. 2. Monday, October 15, 12
  3. 3. WER BIN ICH? • Sebastian Springer • 29 • Dipl. Inf. (FH) • Teamleiter @ MayflowerMonday, October 15, 12
  4. 4. WER SEID IHR?Monday, October 15, 12
  5. 5. JAVASCRIPT?Monday, October 15, 12
  6. 6. BACKBONE?Monday, October 15, 12
  7. 7. NODE.JS?Monday, October 15, 12
  8. 8. WAS ERWARTET EUCH • Vorstellung verschiedener Frameworks • Zusammenspiel der Frameworks • ...sehr wenig HTML5Monday, October 15, 12
  9. 9. DER ERSTE VERSUCH Backbone.sync überschreibenMonday, October 15, 12
  10. 10. DEMOMonday, October 15, 12
  11. 11. Client , JS W S eb CS so L, ck M et HT s Webserver Node.jsMonday, October 15, 12
  12. 12. DIE KOMPONENTEN • Client • Server • require.js • Node.js • Backbone.js • Socket.IO • jQuery • Nginx • Underscore.js • Socket.IOMonday, October 15, 12
  13. 13. DIE CLIENT SEITEMonday, October 15, 12
  14. 14. REQUIRE.JS • Module Loader (CommonJS) • Lädt Dateien • Löst Abhängigkeiten auf • (Fast) keine <script>-Tags mehrMonday, October 15, 12
  15. 15. INDEX.HTMLMonday, October 15, 12
  16. 16. JS/MAIN.JSMonday, October 15, 12
  17. 17. JQUERY • Wird von Backbone.js benötigt • DOM-Operationen • Ajax-Funktionalität • Alternative: ZeptoMonday, October 15, 12
  18. 18. UNDERSCORE • Wird von Backbone.js benötigt • Utility-Funktionen (z.B. für Collections)Monday, October 15, 12
  19. 19. BACKBONE.JS • MVC Framework • Struktur für Javascript • REST Infrastruktur • Abhängigkeiten: jQuery und underscore.jsMonday, October 15, 12
  20. 20. User BACKBONE.JS URL Router Collection HTM Model L Model Model View REST ServerMonday, October 15, 12
  21. 21. BACKBONE - ROUTER • “”: “myFunc” • “hello”: “world” • “search/:query”: “search” // #search/backbone • “search/:query/p:page”: “search” // #search/backbone/p2Monday, October 15, 12
  22. 22. BACKBONE - ROUTERMonday, October 15, 12
  23. 23. BACKBONE - CONTROLLER • Entlastet den Router • Instantiiert Model und View • Schafft die Verbindung zwischen Model und ViewMonday, October 15, 12
  24. 24. BACKBONE - CONTROLLERMonday, October 15, 12
  25. 25. BACKBONE - MODEL • REST-API (GET, POST, PUT, DELETE) • get/set für Property Access (via attributes) • id-Property • url als REST locationMonday, October 15, 12
  26. 26. BACKBONE - MODELMonday, October 15, 12
  27. 27. BACKBONE - VIEW •2 Komponenten • js-File mit View-Logik • Template mit HTML • Reagiert auf Änderungen des ModelsMonday, October 15, 12
  28. 28. BACKBONE - VIEWMonday, October 15, 12
  29. 29. BACKBONE - TEMPLATEMonday, October 15, 12
  30. 30. BACKBONE - COLLECTION • Sammlung von Models • Utility Funktionen wie each, map, reduce, find, filter • Models erstellen (add/create) • Models entfernen (remove)Monday, October 15, 12
  31. 31. SOCKET.IO • Library zur Bidirektionalen Client-Server-Kommunikation • Fallbackstrategie: Websockets, Flashsockets, XHR LongpollingMonday, October 15, 12
  32. 32. BACKBONE.SYNC • Übernimmt die REST Kommunikation • Änderungen: • URL + Payload • Callbacks registrieren • Umgang mit den RepliesMonday, October 15, 12
  33. 33. BACKBONE.SYNCMonday, October 15, 12
  34. 34. DIE SERVER SEITEMonday, October 15, 12
  35. 35. NGINXMonday, October 15, 12
  36. 36. NODE.JS • serverseitiges Javascript • V8 Engine • Eventloop • Asynchrones I/OMonday, October 15, 12
  37. 37. NODE.JS - NPM • Node Package Manager • Repository: npmjs.org • npm install socket.io • npm install mysqlMonday, October 15, 12
  38. 38. NODE.JSMonday, October 15, 12
  39. 39. DIE NACHTEILE • Backbone.sync muss überschrieben werden • REST Schnittstelle kann nicht genutzt werdenMonday, October 15, 12
  40. 40. DER ZWEITE VERSUCH REST und Websockets in CoexistenzMonday, October 15, 12
  41. 41. DEMOMonday, October 15, 12
  42. 42. Client , JS W S eb CS RE so L, ST ck M et HT s Webserver Node.jsMonday, October 15, 12
  43. 43. DIE CLIENT SEITEMonday, October 15, 12
  44. 44. BACKBONE.JS • Keine Anpassungen notwendigMonday, October 15, 12
  45. 45. SOCKET.IO router.js controller.jsMonday, October 15, 12
  46. 46. DIE SERVER SEITEMonday, October 15, 12
  47. 47. NGINXMonday, October 15, 12
  48. 48. NODE.JSMonday, October 15, 12
  49. 49. NODE.JSMonday, October 15, 12
  50. 50. FRAGEN?Monday, October 15, 12
  51. 51. http://joind.in/talk/view/7301Monday, October 15, 12
  52. 52. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82Monday, October 15, 12

×