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

THEMEN• require.js

• Bootstrap - das von Twitter...

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

<!DOCTYPE html>

<a id="newMovie"> <i class="icon-file"></i><span>neuen Film anlegen</span></a>

</body></html>Wednesday, June 26, 13

<!DOCTYPE html>

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

• 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;});

• Enthalten die Daten der Applikation

• Enthalten die Businesslogik der Applikation

• Validierung, Konvertierung, Zugriffsberechtigungen

• Kann REST

• 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

• 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 });});

• Darstellung der Daten der Models

• Displaylogik und Templates

• Templating mit Underscore Template

• HTML Template Einbindung mit dem require text-Plugin

• 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

...</td>

• Collection initialisieren - reset()

• Models mit Views verknüpfen

• Collection Template

• Models rendern

CREATE

• Neue View & Template

• Neues Model erstellen

• Model mit View verbinden

• POST Anfrage an den Server

• In die Collection aufnehmen

UPDATE

• CREATE View 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?

• Tests (Jasmine, Karma)

• Unittests

• E2E Tests

• Build (r.js)

• Minifying

• Combining

FRAGEN?

KONTAKT

Sebastian Springersebastian.springer@mayflower.de

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82

Webapplikationen mit Backbone.js

Technology

Transcript of Webapplikationen mit Backbone.js

Rails & Backbone.js

Deep Dive into Backbone.js Internals + Underscore.js

Refactoring Large Web Applications with Backbone.js

Intro to Backbone.js

Developing Backbone.js Applications - The Eye Various/developing...Developing Backbone.js Applications Addy Osmani Beijing ¥ Cambridge ¥ Farnham ¥ Kln ¥ Sebastopol ¥ Tokyo Developing

Appear IQ - Tutorials Backbone.js

Is There Still Room for Backbone.js

Drupal Backbone.js in the Frontend

Intro to Backbone.js with Rails

Viking academy backbone.js

Node.js für Webapplikationen

Structuring web applications with Backbone.js

Building Backbone.js

JSDay Italy - Backbone.js

Developing a Backbone.js edge

Basics of Backbone.js

AngularJS vs Backbone.js Smackdown

Client-side MVC with Backbone.js

MVC & backbone.js

jQuery Mobile, Backbone.js, and ASP.NET MVC