Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Backbone.js

Präsentation von Backbone Javascript
by

stefan ro

on 9 October 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Backbone.js

BACKBONE.js Backbone als Komponente von Documentcloud DocumentCloud Controller View Model Daten- und Geschäftslogik Präsentationsschicht Vermittler zwischen Model und View traditionell? Kernfunktionalität
mehrere Klassen
allg. alle GUI unabhängigen Berechnungen

z.B. Datenbankzugriffe generiert Benutzeroberfläche der Anwendung
Zugriff auf Modelle und dessen Daten

Java
Swing Klassen
Web Anwendungen
Programmteile/Klassen die HTML und CSS generieren erhält Benutzeranforderungen vom View und übersetzt sie für das Model
meist je View ein Controller Warum Backbone? Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone is a framework that speeds development and keeps your code organized just like a server-side framework like Symfony or Rails. Vielen Dank für Ihre Aufmerksamkeit! Fragen? Quellen:
Literatur:
Internet
http://backbonejs.org/
http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/
http://aaronhardy.com/javascript/javascript-architecture-backbone-js-events/
https://github.com/documentcloud/backbone/wiki/Extensions,-Plugins,-Resources
http://net.tutsplus.com/tutorials/javascript-ajax/getting-cozy-with-underscore-js/
http://www.emanuel-kluge.de/tutorial/backbone-js-tutorial-die-merkliste/
http://metabates.com/2012/04/17/there-is-no-escape-actually-there-is-and-you-should-always-use-it/
Buchquellen
Thomas Davis : Backbone Tutorials ; 25.06.2012
Addy Osmani : Developing Backbone.js Applications 2012
Bildquellen:
http://www.opencalais.com/files/wpro_shared/images/Calais%2001.gif
www.se.uni-hannover.de/documents/ws2004_seminar_software_entwurf/04_mvc.pdf
http://backbonejs.org/docs/images/backbone.png
http://www.headhuntable.com/app/webroot/blog/wp-content/uploads/2012/07/spaghetti_code.png
http://backbonejs.org/docs/images/shortmail.png
http://backbonejs.org/docs/images/cloudapp.png
http://backbonejs.org/docs/images/todos.png
http://backbonejs.org/docs/images/dc-workspace.png
http://backbonejs.org/docs/images/wunderkit.png
http://backbonejs.org/docs/images/foursquare.png
http://backbonejs.org/docs/images/wpcom-notifications.png
http://backbonejs.org/docs/images/easel.png
http://3.bp.blogspot.com/_FmQ7sFgB48g/RskNce_uTVI/AAAAAAAAA8M/jSqSgNMRykQ/s400/91364-utility-belt_400.jpg
[Stand:02.102012] Erweiterungen Backbone in Aktion powerful lightweight flexible elegant clean Frontend lastig
datengesteuert
sehr komplex compatible Beobachter Model

View

Controller Backbone.Model
/Bachbone.Collection Backbone.Model/
Backbone.Collection HTML Template View & Router backbone.localStorage
backbone.couchdb.js
backbone.Offline
backbone.SAP
backbone.Analytics
... todo/
Merklisten Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. bietet Vorteile funktionaler Programmiertechnik
optimale Performance
Browserunabhängig
geht Hand in Hand mit jQuery Funktionsumfang map
uniq
intersection
Defaults
templation
... Struktur? Entwurfsmuster UNDERSCORE.JS Utility Sync Herz jeder JavaScript-Anwendung
Objekt mit Attributearray
repräsentiert Daten und Haupteil der Logik
bietet grundlegende Funktionen zur Verwaltung von Änderungen. Collections
Klasse um Modellgruppen zu verwalten
Modelle können in mehreren Collections sein Verknüpfungen, Bookmarks oder shareable URLs
früher wurden Hash Fragmente genutzt (# page)
jetzt Standard-URLs (/page)
Verbindung zu Aktionen und Events
für Browser, die History-API nicht unterstützen
Router übersetzt
mind. route und eine Funktion, die route abbildet Vertritt Datenmodel und Applikationszustand der Anwendung
Konvention
legen nichts für HTML oder CSS fest
mit jeder JavaScript-Muster Bibliothek nutzbar
reagiert auf Modeländerungen und DOM Events
Grundidee
Interface in logischen Views organisiert
Seite muss bei Veränderung nicht neu gezeichnet werden Beispiel: var PhotoSearch = Backbone.View.extend({
el: $('#results'),
render: function( event ){
var compiled_template = _.template( $("#results-template").html() );
this.$el.html( compiled_template(this.model.toJSON()) );
return this;
},
events: {
"submit #searchForm": "search",
"click .reset": "reset",
"click .advanced": "switchContext"
},
search: function( event ){
},
reset: function( event ){
},
switchContext: function( event ){
}
}); on/bind
off/unbind
trigger Dient als globaler Router (pro frame)
gleicht passende route an
niemals selbst erschaffen von Backbone
Server lesen oder speichern
benutzt jQuery/Zepto und ajax
stellt RESTful JSON Anfrage
gibt jqXHR
Überschreibung um Persitenz-Strategien anzuwenden extend
constructor / initialize
get
set
escape
has
unset
clear
id
idAttribute
cid
attributes
changed
defaults
toJSON
fetch
save
destroy
validate
isValid
url
urlRoot
parse
clone
isNew
change
hasChanged
changedAttributes
previous
previousAttributes escape model.escape(attribute)
wie get
Modeldaten in HTML
< %lt;
> %gt;
...
verhindert XSS Angirffe

var hacker = new Backbone.Model({
name: "<script>alert('xss')</script>"
});
alert(hacker.escape('name')); toJSON model.toJSON()
liefert Kopie der Modelattribute für JSON stringification
gibt keinen JSON String zurück

var artist = new Backbone.Model({
firstName: "Wassily",
lastName: "Kandinsky"
});
artist.set({birthday: "December 16, 1866"});
alert(JSON.stringify(artist)); parse model.parse(response)
Aufruf bei fetch und save
Antwort-Objekt wird übergeben
liefert Attribute Hash
"no-op" Funktion fetch model.fetch([options])
zurücksetzten des Modelstatus vom Server
liefert jqXHR
nützlich wenn Model keine Daten oder Sicherstellung der aktuellsten Serverstatus
"change" Event bei Abweichung

model up-to-date.
setInterval(function() {
channel.fetch();
}, 10000); extend
model
constructor / initialize
models
toJSON
Underscore Methods
add
remove
get
getByCid
at
push
pop
unshift
shift
length
comparator
sort
pluck
where
url
parse
fetch
reset
create pluck collection.pluck(attribute)
liest Attribut von jedem Modell der Collection

where collection.where(attributes) 
liefert Array der Modelle indem das Attribut ist parse collection.parse(response)
aufgerufen von Backbone
wenn Sammlung von Server zurückgegeben
Original Antwort wird übergeben
Array mit Modellattributen wird der Collection hinzugefügt
no-op fetch collection.fetch([options])
holt Standardset von Modellen für diese Collection vom Server
delegiert an Backbone.sync als Persistenzstrategie
liefert jqXHR extend
routes
constructor / initialize
route
navigate sync
emulateHTTP
emulateJSON extend
constructor / initialize
el
$el
setElement
attributes
$ (jQuery or Zepto)
render
remove
make
delegateEvents
undelegateEvents noConflict
setDomLibrary routes router.routes 

Routes bildet URLs mit Funktionen und dessen Parameter ab Backbone.sync sync(method, model, [options])
method
– CRUD
model
– das zu speichernde Model (oder zu lesende collection)
options –
success und error callbacks, sowie alle anderen jQuery Anfrageoptionen

Backbone.sync sendet Anfrage zur Modellspeicherung
Modelattribute werden übergeben
gesendet an HTTP body mit content-type application/json
bei Antwort werden vom Server geänderte Attribute wiedergegeben
müssen auf dem Client aktualisiert werden emulateHTTP Backbone.emulateHTTP = true 

Backbones Standard REST/ HTTP Ansatz wird von alten Servern nicht unterstützen
fälscht PUT und DELETE Anfragen mit HTTP POST el view.el 

Alles Views haben stets ein DOM- Element
Views zu jederzeit gerendert und zusammen in DOM eingefügt werden
dadurch High-Performance-UI-Rendering $(jQuery or Zepto) view.$(selector) 

bei jQuery oder Zepto
jedes View hat eine $ Funktion
wenn jQuery Funktion nutzbar sein soll
äquvalent zu view.$el.find(selector) delegate EventsdelegateEvents([events]) 

Nutzt jQuery delegierte Funktion zum Bereitstellen der Callbacks von DOM Events eines Views
gibt Event Hash
Eventeigenschaften werden von übergeordneten Views geerbt start Backbone.history.start([options]) 

Zum Start der Überwachung
HTML5 pushstate
Backbone.history.start({pushState: true})
Wurzel muss mit angegeben werden
start() erst nachdem DOM bereit steht -Beispiel Event wenn die Objekte das Beobachter-Muster nicht impliziert haben oder es erweitert werden muss
String-Zeichen basiertes Beobachter-Muster
kann mit allen Objekten gemischt werden Beispiel: var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
alert("Triggered " + msg);
});

object.trigger("alert", "an event"); "add" (model, collection)
"remove" (model, collection)
"reset" (collection)
"change" (model, options)
"change:[attribute]" (model, value, options)
"destroy" (model, collection)
"sync" (model, collection)
"error" (model, collection)
"route:[name]" (router)
"all" Eventarten
Full transcript