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

BACKBONE, SOCKET.IO UND NODE.JS IM EINSATZ

Monday, October 15, 12


WER BIN ICH?

• Sebastian Springer

• 29

•Dipl. Inf. (FH)

• Teamleiter @ Mayflower


WER SEID IHR?


JAVASCRIPT?


BACKBONE?


NODE.JS?


WAS ERWARTET EUCH

• Vorstellung verschiedener Frameworks

• Zusammenspiel der Frameworks

• ...sehr wenig HTML5


DER ERSTE VERSUCHBackbone.sync überschreiben


DEMO


Webserver Node.js

Client

HTML,

CSS, JS W

ebsockets


DIE KOMPONENTEN

• Client

• require.js

• Backbone.js

• jQuery

• Underscore.js

• Socket.IO

• Server

•Node.js

• Socket.IO

•Nginx


DIE CLIENT SEITE


REQUIRE.JS

•Module Loader (CommonJS)

• Lädt Dateien

• Löst Abhängigkeiten auf

• (Fast) keine <script>-Tags mehr


INDEX.HTML


JS/MAIN.JS


JQUERY

•Wird von Backbone.js benötigt

•DOM-Operationen

• Ajax-Funktionalität

• Alternative: Zepto


UNDERSCORE

•Wird von Backbone.js benötigt

• Utility-Funktionen (z.B. für Collections)


BACKBONE.JS

•MVC Framework

• Struktur für Javascript

• REST Infrastruktur

• Abhängigkeiten: jQuery und underscore.js


BACKBONE.JS

Router

Model

View

Collection

ModelModel

Server

REST

URL

HTML

User


BACKBONE - ROUTER

• “”: “myFunc”

• “hello”: “world”

• “search/:query”: “search” // #search/backbone

• “search/:query/p:page”: “search” // #search/backbone/p2


BACKBONE - ROUTER


BACKBONE - CONTROLLER

• Entlastet den Router

• Instantiiert Model und View

• Schafft die Verbindung zwischen Model und View


BACKBONE - CONTROLLER


BACKBONE - MODEL

• REST-API (GET, POST, PUT, DELETE)

• get/set für Property Access (via attributes)

• id-Property

• url als REST location


BACKBONE - MODEL


BACKBONE - VIEW

• 2 Komponenten

• js-File mit View-Logik

• Template mit HTML

• Reagiert auf Änderungen des Models


BACKBONE - VIEW


BACKBONE - TEMPLATE


BACKBONE - COLLECTION

• Sammlung von Models

• Utility Funktionen wie each, map, reduce, find, filter

•Models erstellen (add/create)

•Models entfernen (remove)


SOCKET.IO

• Library zur Bidirektionalen Client-Server-Kommunikation

• Fallbackstrategie: Websockets, Flashsockets, XHR Longpolling


BACKBONE.SYNC

• Übernimmt die REST Kommunikation

• Änderungen:

• URL + Payload

• Callbacks registrieren

• Umgang mit den Replies


BACKBONE.SYNC


DIE SERVER SEITE


NGINX


NODE.JS

• serverseitiges Javascript

• V8 Engine

• Eventloop

• Asynchrones I/O


NODE.JS - NPM

•Node Package Manager

• Repository: npmjs.org

• npm install socket.io

• npm install mysql


NODE.JS


DIE NACHTEILE

• Backbone.sync muss überschrieben werden

• REST Schnittstelle kann nicht genutzt werden


DER ZWEITE VERSUCHREST und Websockets in Coexistenz


DEMO


Webserver Node.js

Client

HTML,

CSS, JS W

ebsockets

REST


DIE CLIENT SEITE


BACKBONE.JS

• Keine Anpassungen notwendig


SOCKET.IO

router.js

controller.js


DIE SERVER SEITE


NGINX


NODE.JS


NODE.JS


FRAGEN?


http://joind.in/talk/view/7301




KONTAKT

Sebastian [email protected]

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82


mailto:[email protected]

mailto:[email protected]



Date post:	27-May-2015
Category:	Technology
Upload:	sebastian-springer
View:	2,320 times
Download:	1 times

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

Technology