Backbone.js, Socket.io und Node.js im Einsatz
•
0 likes•2,155 views
This document discusses using Backbone.js, Socket.IO and Node.js together. It introduces the speaker and describes the frameworks. It demonstrates setting up the client side with Require.js, Backbone, jQuery and Underscore, and connecting it to the server side with Socket.IO and Node.js. It also discusses overcoming limitations of Backbone.sync by using REST and websockets together.
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to Backbone.js, Socket.io und Node.js im Einsatz
Similar to Backbone.js, Socket.io und Node.js im Einsatz (20)
More from Sebastian Springer
More from Sebastian Springer (20)
Recently uploaded
Recently uploaded (20)
Backbone.js, Socket.io und Node.js im Einsatz
- 1. BACKBONE, SOCKET.IO UND NODE.JS IM EINSATZ Monday, October 15, 12
- 2. Monday, October 15, 12
- 3. WER BIN ICH? • Sebastian Springer • 29 • Dipl. Inf. (FH) • Teamleiter @ Mayflower Monday, October 15, 12
- 4. WER SEID IHR? Monday, October 15, 12
- 8. WAS ERWARTET EUCH • Vorstellung verschiedener Frameworks • Zusammenspiel der Frameworks • ...sehr wenig HTML5 Monday, October 15, 12
- 9. DER ERSTE VERSUCH Backbone.sync überschreiben Monday, October 15, 12
- 10. DEMO Monday, October 15, 12
- 11. Client , JS W S eb CS so L, ck M et HT s Webserver Node.js Monday, October 15, 12
- 12. DIE KOMPONENTEN • Client • Server • require.js • Node.js • Backbone.js • Socket.IO • jQuery • Nginx • Underscore.js • Socket.IO Monday, October 15, 12
- 13. DIE CLIENT SEITE Monday, October 15, 12
- 14. REQUIRE.JS • Module Loader (CommonJS) • Lädt Dateien • Löst Abhängigkeiten auf • (Fast) keine <script>-Tags mehr Monday, October 15, 12
- 17. JQUERY • Wird von Backbone.js benötigt • DOM-Operationen • Ajax-Funktionalität • Alternative: Zepto Monday, October 15, 12
- 18. UNDERSCORE • Wird von Backbone.js benötigt • Utility-Funktionen (z.B. für Collections) Monday, October 15, 12
- 19. BACKBONE.JS • MVC Framework • Struktur für Javascript • REST Infrastruktur • Abhängigkeiten: jQuery und underscore.js Monday, October 15, 12
- 20. User BACKBONE.JS URL Router Collection HTM Model L Model Model View REST Server Monday, October 15, 12
- 21. BACKBONE - ROUTER • “”: “myFunc” • “hello”: “world” • “search/:query”: “search” // #search/backbone • “search/:query/p:page”: “search” // #search/backbone/p2 Monday, October 15, 12
- 22. BACKBONE - ROUTER Monday, October 15, 12
- 23. BACKBONE - CONTROLLER • Entlastet den Router • Instantiiert Model und View • Schafft die Verbindung zwischen Model und View Monday, October 15, 12
- 24. BACKBONE - CONTROLLER Monday, October 15, 12
- 25. BACKBONE - MODEL • REST-API (GET, POST, PUT, DELETE) • get/set für Property Access (via attributes) • id-Property • url als REST location Monday, October 15, 12
- 26. BACKBONE - MODEL Monday, October 15, 12
- 27. BACKBONE - VIEW •2 Komponenten • js-File mit View-Logik • Template mit HTML • Reagiert auf Änderungen des Models Monday, October 15, 12
- 28. BACKBONE - VIEW Monday, October 15, 12
- 29. BACKBONE - TEMPLATE Monday, October 15, 12
- 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. SOCKET.IO • Library zur Bidirektionalen Client-Server-Kommunikation • Fallbackstrategie: Websockets, Flashsockets, XHR Longpolling Monday, October 15, 12
- 32. BACKBONE.SYNC • Übernimmt die REST Kommunikation • Änderungen: • URL + Payload • Callbacks registrieren • Umgang mit den Replies Monday, October 15, 12
- 34. DIE SERVER SEITE Monday, October 15, 12
- 35. NGINX Monday, October 15, 12
- 36. NODE.JS • serverseitiges Javascript • V8 Engine • Eventloop • Asynchrones I/O Monday, October 15, 12
- 37. NODE.JS - NPM • Node Package Manager • Repository: npmjs.org • npm install socket.io • npm install mysql Monday, October 15, 12
- 38. NODE.JS Monday, October 15, 12
- 39. DIE NACHTEILE • Backbone.sync muss überschrieben werden • REST Schnittstelle kann nicht genutzt werden Monday, October 15, 12
- 40. DER ZWEITE VERSUCH REST und Websockets in Coexistenz Monday, October 15, 12
- 41. DEMO Monday, October 15, 12
- 42. Client , JS W S eb CS RE so L, ST ck M et HT s Webserver Node.js Monday, October 15, 12
- 43. DIE CLIENT SEITE Monday, October 15, 12
- 44. BACKBONE.JS • Keine Anpassungen notwendig Monday, October 15, 12
- 45. SOCKET.IO router.js controller.js Monday, October 15, 12
- 46. DIE SERVER SEITE Monday, October 15, 12
- 47. NGINX Monday, October 15, 12
- 48. NODE.JS Monday, October 15, 12
- 49. NODE.JS Monday, October 15, 12
- 50. FRAGEN? Monday, October 15, 12
- 52. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Monday, October 15, 12