Webapplikationen mit Backbone.js

Sebastian Springer@basti_springer

Wednesday, June 26, 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

• Teamlead @ Mayflower


https://github.com/sspringer82


THEMEN• require.js

• Bootstrap - das von Twitter...

• Backbone.js

• Router

• Model

• View

• Collection


DIE AUFGABE

• Filmdatenbank

• CRUD

• Single Page Appliakation

• AMD Modulloader

• Layout


AUFBAU


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.HTMLDer Einstieg


<!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


MODULLOADER

• Keine <script>-Tags zum Laden

• Abhängigkeiten auflösen

• CommonJS Modules


MODULLOADER

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


APP/CONFIG.JSApplikationskonfiguration


require.config({ "deps": ["main"],

"paths": { "jquery": "../lib/jquery-1.9.1.min", ... },

"shim": { "backbone": { "deps": ["jquery","lodash"], "exports": "Backbone" },

"bootstrap": { "deps": ["jquery"] } }});


APP/MAIN.JSBootstrapping


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.JSApplication Namespace


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


ROUTER


ROUTER

• Navigation innerhalb der Applikation

• Bookmark-Unterstützung

• Back Button-Unterstützung

• Voraussetzung: Backbone.history.start


APP/ROUTER.JSDer 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


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.JSDas 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/MOVIESDie Collection


define(['backbone', 'models/movie'], function (Backbone, Movie) {

return Backbone.Collection.extend({ model: Movie });});


VIEW


VIEW

• Darstellung der Daten der Models

• Displaylogik und Templates

• Templating mit Underscore Template

• HTML Template Einbindung mit dem require text-Plugin


VIEW

• render() • events

• el

• tagName

• className

• id


APP/VIEWS/MOVIE.JSDie View


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.HTMLDas Template


READ


READ

• Collection initialisieren - reset()

• Models mit Views verknüpfen

• Collection Template

• Models rendern


CREATE


CREATE

• Neue View & Template

• Neues Model erstellen

• Model mit View verbinden

• POST Anfrage an den Server

• In die Collection aufnehmen


UPDATE


UPDATE

• CREATE View verwenden

• Daten per PUT an den Server senden

• Anzeige aktualisieren


DELETE


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

• E2E Tests

• Build (r.js)

• Minifying

• Combining


FRAGEN?


KONTAKT

Sebastian [email protected]

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer



mailto:[email protected]

mailto:[email protected]



Webapplikationen mit Backbone.js

Technology

Transcript of Webapplikationen mit Backbone.js