This document discusses Backbone.js, describing what it is and how it can be used. Backbone.js is a library that helps organize JavaScript code for single-page applications by providing models, views, collections, and routing. It helps with structure, scalability and maintenance, but is not a full framework. The document provides examples of how to define a model, collection, view and router in Backbone.js, and recommends some best practices and additional references.

1. Dragos Andronic , TxtFeedback

2.  Pentru ca SPA (sau aplicatiile web interactive) sunt greu de tinut
sub control
 Pentru ca vrei structura, scalabilitate si mentenanta

3.  Backbone.js – ce este/ce nu este backbone.js
 Backbone.js – privire de ansamblu asupra tipurilor oferite
 Exemplu
 Sfaturi si referinte

4.  Backbone = librarie de tipuri ce te ajuta sa iti organizezi codul
 Backbone != framework (a se vedea Marionette)
 Backbone != Model View Something…

5.  Groveshark
 Foursquare
 Khan Academy
 AirBnb
 Trello
 LinkedIn Mobile

6. SERVER
Models
Collections
Views
DOM
Router
REST (JSON)

7. app.MyModel = Backbone.Model.extend({
defaults: {},
id: "", //isNew
attributes: {}, //get, set
validate: function(attrs, options) {},//invalid event
initialize: function() {},
parse: function(response, options) {}
});
 toJSON
 save

8.  fetch
 add/remove
 push/pop
 where, findWhere
 sort
var MyCollection = Backbone.Collection.extend({
model: app.MyModel,
url: “”
});

9.  el, $el
app.MyView = Backbone.View.extend({
tagName: 'div',
model: app.MyModel,
template: _.template($('#view-template').html()),
events: {},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
},
initialize: functin () {}
});

10.  Generare elemente DOM
 Underscore template
 <% %>
 <%= %>
 <%- %>

11. var MyRouter= Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {},
search: function(query, page) {}
});

12.  TODOMVC

13.  Sfaturi
 Default values – folositi o functie
 Aveti grija la this (folositi listenTo, events, _.bind si _.bindAll)

14.  Referinte:
 http://backbonejs.org/
 http://ricostacruz.com/backbone-patterns/
 http://pluralsight.com/training/Courses/TableOfContents/backbone-
fundamentals
 http://addyosmani.github.io/backbone-fundamentals/
 http://todomvc.com/

15. dragos@txtfeedback.net
@dandronic

16. dragos@txtfeedback.net
@dandronic