Webapplikationen mit Backbone.js

Sebastian Springer
@basti_springer
Wednesday, June 26, 13

WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Teamlead @ Mayﬂower

THEMEN
• require.js
• Bootstrap - das vonTwitter...
• Backbone.js
• Router
• Model
• View
• Collection

DIE AUFGABE
• Filmdatenbank
• CRUD
• Single Page Appliakation
• AMD Modulloader
• Layout

AUFBAU
require.js
backbone.js Bootstrap
jQuerylodash

public/
!"" img
!"" js
#   !"" app
#   #   !"" app.js
#   #   !"" config.js
#   #   !"" main.js
#   #   !"" router.js
#   #   !"" text.js
#   #   !"" models
#   #   $"" views
#   $"" lib
#   !"" backbone-min.js
#   !"" bootstrap.min.js
#   !"" jquery-1.9.1.min.js
#   !"" lodash.min.js
#   $"" require.js
$"" style

INDEX.HTML
Der Einstieg

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.
<link rel="stylesheet" type="text/css" href="/style/style.css"
</head>
<body>
<div class="text-right">
<a id="logout" href="/logout"><i class="icon-off"></i></a>
</div>
<div id="main"></div>
<a id="newMovie">
<i class="icon-file"></i><span>neuen Film anlegen</span>
</a>
<script data-main="/js/app/config" src="/js/lib/require.js"></scri
<script>var data = ...</script>
</body>
</html>

MODULLOADER

MODULLOADER
• Keine <script>-Tags zum Laden
• Abhängigkeiten auﬂösen
• CommonJS Modules

MODULLOADER
define(
“name”,
[deps...],
function (deps) {
...
return x;
});

APP/CONFIG.JS
Applikationskonﬁguration

require.config({
"deps": ["main"],
"paths": {
"jquery": "../lib/jquery-1.9.1.min",
...
},
"shim": {
"backbone": {
"deps": ["jquery","lodash"],
"exports": "Backbone"
},
"bootstrap": {
"deps": ["jquery"]
}
}
});

APP/MAIN.JS
Bootstrapping

require(["app", "router"], function (app, Router) {
app.router = new Router();
Backbone.history.start(
{ pushState: true, root: app.root }
);
app.router.navigate(app.root, {trigger: true});
});

APP/APP.JS
Application Namespace

define(["backbone", "bootstrap"], function() {
return {
root: "/"
};
});

ROUTER
• Navigation innerhalb der Applikation
• Bookmark-Unterstützung
• Back Button-Unterstützung
• Voraussetzung: Backbone.history.start

APP/ROUTER.JS
Der Router

define(["backbone", ...],
function(Backbone, ...) {
var Router = Backbone.Router.extend({
routes: {
"": "index",
"new": "addMovie",
"edit/:id": "editMovie"
},
index: function() {...},
addMovie: function () {...},
editMovie: function (id) {...}
});
return Router;
});

MODEL
• Enthalten die Daten der Applikation
• Enthalten die Businesslogik der Applikation
• Validierung, Konvertierung, Zugriffsberechtigungen
• Kann REST

MODEL
• get()
• set()
• save()
• fetch()
• destroy()
• ...
• id
• cid
• urlRoot

APP/MODELS/MOVIE.JS
Das Model

define("models/movie", ['backbone'],
function (Backbone) {
"use strict";
return Backbone.Model.extend({
idAttribute: "id",
urlRoot: '/movie'
});
});

COLLECTION

COLLECTION
• Sammlung von Models
• Hilfsmethoden für z.B. Suche, Sortierung

COLLECTION
• add()
• remove()
• reset()
• fetch()
• get()
• model
• models

APP/MODELS/MOVIES
Die Collection

define(['backbone', 'models/movie'],
function (Backbone, Movie) {
return Backbone.Collection.extend({
model: Movie
});
});

VIEW
• Darstellung der Daten der Models
• Displaylogik undTemplates
• Templating mit UnderscoreTemplate
• HTMLTemplate Einbindung mit dem require text-Plugin

VIEW
• render() • events
• el
• tagName
• className
• id

APP/VIEWS/MOVIE.JS
DieView

define(['text!views/movie.html', 'app'],
function (template, app) {
return Backbone.View.extend({
tagName: 'tr',
events: {
"click .icon-trash": "remove",
"click .icon-edit": "edit",
"click .rating": "rate"
},
initialize: function () {
this.listenTo(this.model, "change",
this.render);
},
render: function () {...},
remove: function () {...},
edit: function () {...},
rate: function (e) {...}
});
});

APP/VIEWS/MOVIE.HTML
DasTemplate

READ
• Collection initialisieren - reset()
• Models mitViews verknüpfen
• CollectionTemplate
• Models rendern

CREATE
• NeueView &Template
• Neues Model erstellen
• Model mitView verbinden
• POST Anfrage an den Server
• In die Collection aufnehmen

UPDATE
• CREATEView verwenden
• Daten per PUT an den Server senden
• Anzeige aktualisieren

DELETE
• Daten per DELETE-Anfrage löschen
• Knoten aus dem DOM entfernen

UND WIE GEHT ES WEITER?

UND WIE GEHT ES WEITER?
• Tests (Jasmine, Karma)
• Unittests
• E2ETests
• Build (r.js)
• Minifying
• Combining

FRAGEN?

KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82

Webapplikationen mit Backbone.js

Recommended

Recommended

More Related Content

Similar to Webapplikationen mit Backbone.js

Similar to Webapplikationen mit Backbone.js (20)

More from Sebastian Springer

More from Sebastian Springer (20)

Recently uploaded

Recently uploaded (20)

Webapplikationen mit Backbone.js