webapplikationen mit backbone.js
DESCRIPTION
TRANSCRIPT
Sebastian Springer@basti_springer
Wednesday, June 26, 13
WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Teamlead @ Mayflower
Wednesday, June 26, 13
THEMEN• require.js
• Bootstrap - das von Twitter...
• Backbone.js
• Router
• Model
• View
• Collection
Wednesday, June 26, 13
DIE AUFGABE
• Filmdatenbank
• CRUD
• Single Page Appliakation
• AMD Modulloader
• Layout
Wednesday, June 26, 13
Wednesday, June 26, 13
Wednesday, June 26, 13
AUFBAU
Wednesday, June 26, 13
AUFBAU
require.js
backbone.js Bootstrap
jQuerylodash
Wednesday, June 26, 13
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
Wednesday, June 26, 13
INDEX.HTMLDer Einstieg
Wednesday, June 26, 13
<!DOCTYPE html>
<html><head> <link rel="stylesheet" type="text/css" href="/style/bootstrap.min.css"> <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"></script>
<script>var data = ...</script>
</body></html>Wednesday, June 26, 13
<!DOCTYPE html>
<html><head> <link rel="stylesheet" type="text/css" href="/style/bootstrap.min.css"> <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"></script>
<script>var data = ...</script>
</body></html>Wednesday, June 26, 13
<!DOCTYPE html>
<html><head> <link rel="stylesheet" type="text/css" href="/style/bootstrap.min.css"> <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"></script>
<script>var data = ...</script>
</body></html>Wednesday, June 26, 13
MODULLOADER
Wednesday, June 26, 13
MODULLOADER
• Keine <script>-Tags zum Laden
• Abhängigkeiten auflösen
• CommonJS Modules
Wednesday, June 26, 13
MODULLOADER
define( “name”, [deps...], function (deps) { ... return x; });
Wednesday, June 26, 13
APP/CONFIG.JSApplikationskonfiguration
Wednesday, June 26, 13
require.config({ "deps": ["main"],
"paths": { "jquery": "../lib/jquery-1.9.1.min", ... },
"shim": { "backbone": { "deps": ["jquery","lodash"], "exports": "Backbone" },
"bootstrap": { "deps": ["jquery"] } }});
Wednesday, June 26, 13
APP/MAIN.JSBootstrapping
Wednesday, June 26, 13
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});});
Wednesday, June 26, 13
APP/APP.JSApplication Namespace
Wednesday, June 26, 13
define(["backbone", "bootstrap"], function() { return { root: "/" };});
Wednesday, June 26, 13
ROUTER
Wednesday, June 26, 13
ROUTER
• Navigation innerhalb der Applikation
• Bookmark-Unterstützung
• Back Button-Unterstützung
• Voraussetzung: Backbone.history.start
Wednesday, June 26, 13
APP/ROUTER.JSDer Router
Wednesday, June 26, 13
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;});
Wednesday, June 26, 13
MODEL
Wednesday, June 26, 13
MODEL
• Enthalten die Daten der Applikation
• Enthalten die Businesslogik der Applikation
• Validierung, Konvertierung, Zugriffsberechtigungen
• Kann REST
Wednesday, June 26, 13
MODEL
• get()
• set()
• save()
• fetch()
• destroy()
• ...
• id
• cid
• urlRoot
Wednesday, June 26, 13
APP/MODELS/MOVIE.JSDas Model
Wednesday, June 26, 13
define("models/movie", ['backbone'], function (Backbone) {
"use strict";
return Backbone.Model.extend({
idAttribute: "id",
urlRoot: '/movie' });});
Wednesday, June 26, 13
COLLECTION
Wednesday, June 26, 13
COLLECTION
• Sammlung von Models
• Hilfsmethoden für z.B. Suche, Sortierung
Wednesday, June 26, 13
COLLECTION
• add()
• remove()
• reset()
• fetch()
• get()
• model
• models
Wednesday, June 26, 13
APP/MODELS/MOVIESDie Collection
Wednesday, June 26, 13
define(['backbone', 'models/movie'], function (Backbone, Movie) {
return Backbone.Collection.extend({ model: Movie });});
Wednesday, June 26, 13
VIEW
Wednesday, June 26, 13
VIEW
• Darstellung der Daten der Models
• Displaylogik und Templates
• Templating mit Underscore Template
• HTML Template Einbindung mit dem require text-Plugin
Wednesday, June 26, 13
VIEW
• render() • events
• el
• tagName
• className
• id
Wednesday, June 26, 13
APP/VIEWS/MOVIE.JSDie View
Wednesday, June 26, 13
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) {...} });});
Wednesday, June 26, 13
APP/VIEWS/MOVIE.HTMLDas Template
Wednesday, June 26, 13
<td><%= name %></td><td><%= year %></td><td><%= genre %></td><td class="rating"> <% if (rating >= 1) { %> <i class="icon-star r1"></i> <% } else { %> <i class="icon-star-empty r1"></i> <% } %>
...</td>
<td> <i class="icon-edit"></i> <i class="icon-trash"></i></td>
Wednesday, June 26, 13
READ
Wednesday, June 26, 13
READ
• Collection initialisieren - reset()
• Models mit Views verknüpfen
• Collection Template
• Models rendern
Wednesday, June 26, 13
CREATE
Wednesday, June 26, 13
CREATE
• Neue View & Template
• Neues Model erstellen
• Model mit View verbinden
• POST Anfrage an den Server
• In die Collection aufnehmen
Wednesday, June 26, 13
UPDATE
Wednesday, June 26, 13
UPDATE
• CREATE View verwenden
• Daten per PUT an den Server senden
• Anzeige aktualisieren
Wednesday, June 26, 13
DELETE
Wednesday, June 26, 13
DELETE
• Daten per DELETE-Anfrage löschen
• Knoten aus dem DOM entfernen
Wednesday, June 26, 13
UND WIE GEHT ES WEITER?
Wednesday, June 26, 13
UND WIE GEHT ES WEITER?
• Tests (Jasmine, Karma)
• Unittests
• E2E Tests
• Build (r.js)
• Minifying
• Combining
Wednesday, June 26, 13
FRAGEN?
Wednesday, June 26, 13
KONTAKT
Sebastian [email protected]
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Wednesday, June 26, 13