backbone.js, socket.io und node.js im einsatz

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 Springersebastian.springer@mayflower.de

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82

Monday, October 15, 12