Backbone.js is a JavaScript framework that provides structure and conventions for developing single-page web applications. It helps avoid unnecessary DOM manipulations by separating the application state from the DOM using models. Views observe changes to models and re-render the DOM accordingly. Models can be synced to a back-end API to persist data. Backbone.js uses an MVVM pattern with models representing the application state, views for rendering, and the DOM acting as the view model.
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
Migrating MVC to theFront-end usingBackbone JS.
Planbox is a single-page web application for Agile project management. It was built using the traditional MVC stack with CodeIgniter (PHP) and jQuery (Javascript). AJAX was heavily used to update DOM elements to offer a dynamic user experience. UX logic code quickly became spread across Javascript and PHP. The application code base quickly became unmanageable and scaling functionality became difficult. Things had to change.
A decision was made to change architecture: bring all the UX logic in the front-end, and turn the back-end into an engine in charge of business logic.
This talk is about this experience. How we moved the MVC stack from the back-end to the front-end. How we used Backbone JS as the foundation of our front-end framework and built on top. How the backend became a black-box with a Restful API. What lessons we learned, what benefits we gained, and what reflections we made about the future of MVC in Javascript.
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
Migrating MVC to theFront-end usingBackbone JS.
Planbox is a single-page web application for Agile project management. It was built using the traditional MVC stack with CodeIgniter (PHP) and jQuery (Javascript). AJAX was heavily used to update DOM elements to offer a dynamic user experience. UX logic code quickly became spread across Javascript and PHP. The application code base quickly became unmanageable and scaling functionality became difficult. Things had to change.
A decision was made to change architecture: bring all the UX logic in the front-end, and turn the back-end into an engine in charge of business logic.
This talk is about this experience. How we moved the MVC stack from the back-end to the front-end. How we used Backbone JS as the foundation of our front-end framework and built on top. How the backend became a black-box with a Restful API. What lessons we learned, what benefits we gained, and what reflections we made about the future of MVC in Javascript.
JavaScript Module Patterns: How to build and use JavaScript modules. We cover the Basic Module Pattern, Revealing Module Pattern, CommonJS, AMD, CommonJS, UMD and ES6 modules.
Javascript and first-class citizenry: require.js & node.js
Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code.
In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
A walkthrough of how to write a complete HTML5 web app (both front end and back end) using Google App Engine (Python), Backbone.js, Require.js, underscore.js and jQuery.
JavaScript Module Patterns: How to build and use JavaScript modules. We cover the Basic Module Pattern, Revealing Module Pattern, CommonJS, AMD, CommonJS, UMD and ES6 modules.
Javascript and first-class citizenry: require.js & node.js
Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code.
In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
A walkthrough of how to write a complete HTML5 web app (both front end and back end) using Google App Engine (Python), Backbone.js, Require.js, underscore.js and jQuery.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Slides of a talk of a seminars series I gave at WebRatio in January 2014.
I implemented many best practices and advices in this presentation in a generic app template available here: https://github.com/iivanoo/cordovaboilerplate
Why Backbone
Events
Models
Collections
Views
Routers
Summary
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora
HTML5 is the playing area, the strip, Javascript presentation frameworks are the fences and they are fierce and proud. In this presentation we will attend an interesting match between two of the emerging contenders in the MV* family: KnockoutJS and BackboneJS. We'll try to understand how they solve the same issues in modern web software development to better decide which one is suitable in our scenario.
4. the rise of AJAX (2004)
gmail is the first single-page web app
5. more and more javascript
a website is:
lots of html pages with some javascript
ajax returns html
a webapp is:
lots of javascript with some html pages
ajax returns json
front-end is taking over program logic
necessary to create highly responsive user interfaces
8. 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 task
breaks hardware acceleration
always avoid unnecessary DOM manipulations
especially on mobile devices
Too easy to use the DOM for state of your app
9. How to avoid DOM manipulations?
important rule
The DOM is write-only!
don't use it to store the state of your app
it's for presentation purposes only
10. 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
11. But where to store everything
if DOM is not allowed?
Here backbone.js kicks in...
12. backbone.js
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 {
....
}
})(); We need more
structure than this!
13. backbone.js
Pretty mature
started 2 years ago
popular on github
version 0.9.2, 1.0 coming up
from the creators of underscore.js and coffeescript
Lightweight
just 2 dependencies: underscore, jquery/zepto
Also runs on node.js
Same models in front-end and back-end
15. MVC framework or whatever
it's not really MVC, it's MVVM!
Model
View
ViewModel (=DOM)
where is the controller?
skinny controller, fat model
program logic in models and views
16. DOM Model
MODEL
html javascript is the only source of truth!
is pure javascript
Models and Collections
Collection is an array of Models
17. Events
Lots of events are fired
with 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.
18. render change events
DOM View Model
html events change data
VIEW
observes model changes
html javascript
is pure javascript
render function to write to DOM
this.el is the element in DOM
observes events from DOM
(click, touchmove, ...)
19. Model-backed views
var 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.
20. 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: CRUD
Lots of code for repetitive operations
21. Sync
Backbone.js has a sync module
CRUD interface
GET /model
GET /model/<id>
POST /model
UPDATE /model/id
DELETE /model/id
can be overwritten granularly. examples:
use localstorage for all fetch operations
use sockets instead of REST over http
22. render change events
DOM View Model
html events change data
sync
web
service
html javascript
SYNC
asynchronous persistency
23. Model.sync
In a Model or Collection:
fetch()
save()
remove()
don't care about what's going on in the back
24. More stuff:
Model validation on client-side
you can only save() a valid model
Router
easy url handling (with # or #!)
works with History API, so back button works
Underscore functions
map, reduce, for each, client-side templates, ...
29. Problems
Syntax is not very clear
Lots of ( { "
=> coffeescript can help with this
The use of this
you loose scope quite easily in javascript
=> var self = this to the rescue
Steep learning curve
but documentation is very good
lots of support on stackoverflow