viking academy backbone.js
DESCRIPTION
Introduction to backbone.jsTRANSCRIPT
![Page 1: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/1.jpg)
and single-page web apps
http://backbonejs.org/
Bert Wijnants - Mobile Vikings - 9 november 2012
backbone.js
![Page 2: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/2.jpg)
Let's start with a little historyJavascript was invented by Netscape in 1995,and the web looked like...
![Page 3: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/3.jpg)
iteractive website:<marquee>, <blink>
![Page 4: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/4.jpg)
the rise of AJAX (2004)
gmail is the first single-page web app
![Page 5: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/5.jpg)
more and more javascript
a website is:lots of html pages with some javascriptajax returns html
a webapp is:lots of javascript with some html pagesajax returns json
front-end is taking over program logicnecessary to create highly responsive user interfaces
![Page 6: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/6.jpg)
6 in top 7 on Github is javascript
#7
![Page 7: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/7.jpg)
Why another framework?we've got jQuery, right?
![Page 8: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/8.jpg)
What's wrong with jQuery?
jQuery is very useful for DOM manipulations, events, ajax,... (cross-browser)and btw: use zepto.js for mobile devices (webkit only)
DOM manipulation = very expensive taskbreaks hardware accelerationalways avoid unnecessary DOM manipulationsespecially on mobile devices
Too easy to use the DOM for state of your app
![Page 9: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/9.jpg)
How to avoid DOM manipulations?
important ruleThe DOM is write-only!
don't use it to store the state of your appit's for presentation purposes only
![Page 10: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/10.jpg)
Bad:
$(".button").click( function(event) {if (!$(this).hasClass("selected")) {
$(this).parent().find(".button.selected").removeClass("selected);$(this).addClass("selected")
}});
Don't read from the DOM to know which of the buttons is selected
![Page 11: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/11.jpg)
But where to store everything if DOM is not allowed?Here backbone.js kicks in...
![Page 12: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/12.jpg)
every good framework has "a sentence" :-)
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.
Single-page web apps with hundreds of lines of javascript. Most apps just give structure with namespaces:
var namespace = (function() {return {
....}
})();
backbone.js
We need more structure than this!
![Page 13: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/13.jpg)
backbone.js
Pretty maturestarted 2 years agopopular on githubversion 0.9.2, 1.0 coming upfrom the creators of underscore.js and coffeescript
Lightweightjust 2 dependencies: underscore, jquery/zepto
Also runs on node.jsSame models in front-end and back-end
![Page 14: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/14.jpg)
Annotated source
![Page 15: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/15.jpg)
MVC framework or whatever
it's not really MVC, it's MVVM!
ModelViewViewModel (=DOM)
where is the controller? skinny controller, fat modelprogram logic in models and views
![Page 16: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/16.jpg)
DOM Model
javascripthtml
MODELis the only source of truth!is pure javascriptModels and CollectionsCollection is an array of Models
![Page 17: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/17.jpg)
Events
Lots of events are firedwith these naming conventions:"add" (model, collection) — when a model is added to a collection."remove" (model, collection) — when a model is removed from a collection."reset" (collection) — when the collection's entire contents have been replaced."change" (model, options) — when a model's attributes have changed."change:[attribute]" (model, value, options) — when a specific attribute has been updated."destroy" (model, collection) — when a model is destroyed."sync" (model, collection) — triggers whenever a model has been successfully synced to the server."error" (model, collection) — when a model's validation fails, or a save call fails on the server."route:[name]" (router) — when one of a router's routes has matched."all" — this special event fires for any triggered event, passing the event name as first argument.
![Page 18: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/18.jpg)
DOM View Model
javascripthtml
change datahtml events
render change events
VIEWobserves model changesis pure javascriptrender function to write to DOMthis.el is the element in DOMobserves events from DOM(click, touchmove, ...)
![Page 19: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/19.jpg)
Model-backed viewsvar model = new Todo({
title: 'foo', done: false
});var view = new TodoView(model);
View has direct access to model.Model does not. View listens to change events.
![Page 20: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/20.jpg)
Persistency a.k.a the database
javascript applications usually work like this:
get_all()get_one()save_one()update_one()delete_one()
and the same on server-side: CRUDLots of code for repetitive operations
![Page 21: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/21.jpg)
Sync
Backbone.js has a sync module
CRUD interfaceGET /modelGET /model/<id>POST /modelUPDATE /model/idDELETE /model/id
can be overwritten granularly. examples:use localstorage for all fetch operationsuse sockets instead of REST over http
![Page 22: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/22.jpg)
SYNCasynchronous persistency
DOM View Model
javascripthtml
change datahtml events
render change events
web service
sync
![Page 23: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/23.jpg)
Model.sync
In a Model or Collection:fetch()save()remove()
don't care about what's going on in the back
![Page 24: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/24.jpg)
More stuff:
Model validation on client-sideyou can only save() a valid model
Routereasy url handling (with # or #!)works with History API, so back button works
Underscore functionsmap, reduce, for each, client-side templates, ...
![Page 25: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/25.jpg)
example: Model
var Todo = Backbone.Model.extend({defaults: {
"title" : "(empty)","done" : false
},toggle: function() {
this.set({"done" : !this.get("done")
});this.save();
},clear: function() {
this.destroy();}
});
![Page 26: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/26.jpg)
example: Collectionvar TodoList = Backbone.Collection.extend({
model: Todo,
initialize: function() {this.fetch();
},
done: function() { return this.filter(function(todo){ return todo.get('done'); });},
remaining: function() { return this.without.apply(this, this.done());},
});
![Page 27: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/27.jpg)
example: Viewvar TodoView = Backbone.View.extend({
tagName: "li",template: Templates.todo,
initialize: function() {this.model.bind('change', this.render, this);this.model.bind('destroy', this.remove, this);
},render: function() {
this.$el.html(this.template(this.model.toJSON()));this.$el.toggleClass('done', this.model.get('done'));return this;
}});
![Page 28: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/28.jpg)
example: View (continued)events: { "click .toggle" : "toggleDone", "click .clear" : "clear"},
toggleDone: function() {this.model.toggle();
},
clear: function() {this.model.clear();
}
![Page 29: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/29.jpg)
Problems
Syntax is not very clearLots of ( { "=> coffeescript can help with this
The use of thisyou loose scope quite easily in javascript=> var self = this to the rescue
Steep learning curvebut documentation is very goodlots of support on stackoverflow
![Page 30: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/30.jpg)
Advantages
structured javascriptwrite-only DOMdesigned for web appssyncing with back-end = trivialnaming conventions (events, render, ...)model change => view rendervery popular: big community
![Page 31: Viking academy backbone.js](https://reader034.vdocuments.net/reader034/viewer/2022052307/5558bd1dd8b42a7e298b5159/html5/thumbnails/31.jpg)
Getting started
http://backbonejs.orgEverything you need is here
Or check out the webapp for VikingSpots NG:github.com/deals-platform/mobile-apps/html5
Questions? Remarks?