BACKBONE, SOCKET.IO UND NODE.JS IM EINSATZ
Monday, October 15, 12
Monday, October 15, 12
WER BIN ICH?
• Sebastian Springer
• 29
•Dipl. Inf. (FH)
• Teamleiter @ Mayflower
Monday, October 15, 12
WER SEID IHR?
Monday, October 15, 12
JAVASCRIPT?
Monday, October 15, 12
BACKBONE?
Monday, October 15, 12
NODE.JS?
Monday, October 15, 12
WAS ERWARTET EUCH
• Vorstellung verschiedener Frameworks
• Zusammenspiel der Frameworks
• ...sehr wenig HTML5
Monday, October 15, 12
DER ERSTE VERSUCHBackbone.sync überschreiben
Monday, October 15, 12
DEMO
Monday, October 15, 12
Webserver Node.js
Client
HTML,
CSS, JS W
ebsockets
Monday, October 15, 12
DIE KOMPONENTEN
• Client
• require.js
• Backbone.js
• jQuery
• Underscore.js
• Socket.IO
• Server
•Node.js
• Socket.IO
•Nginx
Monday, October 15, 12
DIE CLIENT SEITE
Monday, October 15, 12
REQUIRE.JS
•Module Loader (CommonJS)
• Lädt Dateien
• Löst Abhängigkeiten auf
• (Fast) keine <script>-Tags mehr
Monday, October 15, 12
INDEX.HTML
Monday, October 15, 12
JS/MAIN.JS
Monday, October 15, 12
JQUERY
•Wird von Backbone.js benötigt
•DOM-Operationen
• Ajax-Funktionalität
• Alternative: Zepto
Monday, October 15, 12
UNDERSCORE
•Wird von Backbone.js benötigt
• Utility-Funktionen (z.B. für Collections)
Monday, October 15, 12
BACKBONE.JS
•MVC Framework
• Struktur für Javascript
• REST Infrastruktur
• Abhängigkeiten: jQuery und underscore.js
Monday, October 15, 12
BACKBONE.JS
Router
Model
View
Collection
ModelModel
Server
REST
URL
HTML
User
Monday, October 15, 12
BACKBONE - ROUTER
• “”: “myFunc”
• “hello”: “world”
• “search/:query”: “search” // #search/backbone
• “search/:query/p:page”: “search” // #search/backbone/p2
Monday, October 15, 12
BACKBONE - ROUTER
Monday, October 15, 12
BACKBONE - CONTROLLER
• Entlastet den Router
• Instantiiert Model und View
• Schafft die Verbindung zwischen Model und View
Monday, October 15, 12
BACKBONE - CONTROLLER
Monday, October 15, 12
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
BACKBONE - MODEL
Monday, October 15, 12
BACKBONE - VIEW
• 2 Komponenten
• js-File mit View-Logik
• Template mit HTML
• Reagiert auf Änderungen des Models
Monday, October 15, 12
BACKBONE - VIEW
Monday, October 15, 12
BACKBONE - TEMPLATE
Monday, October 15, 12
BACKBONE - COLLECTION
• Sammlung von Models
• Utility Funktionen wie each, map, reduce, find, filter
•Models erstellen (add/create)
•Models entfernen (remove)
Monday, October 15, 12
SOCKET.IO
• Library zur Bidirektionalen Client-Server-Kommunikation
• Fallbackstrategie: Websockets, Flashsockets, XHR Longpolling
Monday, October 15, 12
BACKBONE.SYNC
• Übernimmt die REST Kommunikation
• Änderungen:
• URL + Payload
• Callbacks registrieren
• Umgang mit den Replies
Monday, October 15, 12
BACKBONE.SYNC
Monday, October 15, 12
DIE SERVER SEITE
Monday, October 15, 12
NGINX
Monday, October 15, 12
NODE.JS
• serverseitiges Javascript
• V8 Engine
• Eventloop
• Asynchrones I/O
Monday, October 15, 12
NODE.JS - NPM
•Node Package Manager
• Repository: npmjs.org
• npm install socket.io
• npm install mysql
Monday, October 15, 12
NODE.JS
Monday, October 15, 12
DIE NACHTEILE
• Backbone.sync muss überschrieben werden
• REST Schnittstelle kann nicht genutzt werden
Monday, October 15, 12
DER ZWEITE VERSUCHREST und Websockets in Coexistenz
Monday, October 15, 12
DEMO
Monday, October 15, 12
Webserver Node.js
Client
HTML,
CSS, JS W
ebsockets
REST
Monday, October 15, 12
DIE CLIENT SEITE
Monday, October 15, 12
BACKBONE.JS
• Keine Anpassungen notwendig
Monday, October 15, 12
SOCKET.IO
router.js
controller.js
Monday, October 15, 12
DIE SERVER SEITE
Monday, October 15, 12
NGINX
Monday, October 15, 12
NODE.JS
Monday, October 15, 12
NODE.JS
Monday, October 15, 12
FRAGEN?
Monday, October 15, 12
http://joind.in/talk/view/7301
Monday, October 15, 12
KONTAKT
Sebastian [email protected]
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Monday, October 15, 12
Top Related