backbone.js
DESCRIPTION
TRANSCRIPT
![Page 1: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/1.jpg)
Filipe Giusti
![Page 2: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/2.jpg)
Roadmap
● Introdução● Básico
○ Características○ Model○ View○ Eventos○ Router
● Além
![Page 3: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/3.jpg)
Introdução
● Estrutura mínima para uma app decente● Release inicial 10/2010● MV alguma coisa
○ Porque sempre tem MV?● Única dependência: Underscore.js
○ Para usar router e persistência: jQuery ou Zepto● Comunidade: suficiente
![Page 4: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/4.jpg)
Básico - Características
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.
![Page 5: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/5.jpg)
Básico - Model // Our basic **Todo** model has `title`, `order`, and `completed` attributes.
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
// Toggle the `completed` state of this todo item.
toggle: function () {
this.save({completed: !this.get('completed')});
}
});
var todo1 = new app.Todo({title: 'First title', order: 1});
![Page 6: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/6.jpg)
Básico - Model
● initialize● get & set● id● attributes● changedAttributes● parse● toJSON
![Page 7: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/7.jpg)
Básico - Model
● Observer pattern● Validação
○ isValid - validation○ Backbone.validation
● Relações○ backbone-relational.js○ backbone-associations○ supermodel.js
![Page 8: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/8.jpg)
Básico - Model
● Persistência○ url - urlRoot○ parse○ sync - fetch - save - destroy○ REST JSON○ LocalStorage?○ Websockets?
![Page 9: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/9.jpg)
Básico - Model - Persistênciaapp.Todo = Backbone.Model.extend({ urlRoot: '/todos'});
var todo2 = new app.Todo({title: 'First title', order: 1});var todo3 = new app.Todo({id: 5, title: 'First title', order: 1});
todo2.url(); // "/todos"todo3.url(); // "/todos/5"
![Page 10: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/10.jpg)
Básico - Model - Collectionsapp.TodosCollection = Backbone.Collection.extend({ model: app.Todo});
var todos = new app.TodosCollection([todo2, todo3]);todos.length; // 2
todos.fetch();todos.create({});todos.add(todo2);
Backbone.sync(method, model, options);
E diversos métodos do Underscore.js.
![Page 11: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/11.jpg)
Básico - View
● Duas partes○ Declarativa
■ el■ model binding■ events
○ Procedural■ render■ Controller
![Page 12: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/12.jpg)
Básico - Viewapp.TodoView = Backbone.View.extend({
el: '#todo',
events: {
'keypress .edit': 'updateOnEnter',
'blur .edit': 'close'
},
render: function() {
return this.$el.html( TemplateEngine.run( this.model.toJSON() ) );
},
close: function() { // executed when todo loses focus },
updateOnEnter: function( e ) { // executed on each keypress when in todo edit mode }
});
var todoView = new app.TodoView({model: todo2});
todoview.render();
![Page 13: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/13.jpg)
Básico - EventosBackbone.on('event', function() {console.log('Handled Backbone event');});Backbone.trigger('event'); // logs: Handled Backbone event
● on - off - trigger - once - listenTo● Eventos do backbone
○ add - remove - reset - sort - change - error - route● Custom
![Page 14: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/14.jpg)
Básico - Routerapp.TodoRouter = Backbone.Router.extend({ routes: { "about" : "showAbout", /* http://example.com/#about */ "todo/:id" : "getTodo", /* http://example.com/#todo/5 */ "todos/:id/download/*documentPath" : "downloadDocument", /* http://example.com/#todos/5/download/files/Meeting_schedule.doc */ }, showAbout: function(){ }, getTodo: function(id){ }, getTodo: function(id, path){ }});
var myTodoRouter = new app.TodoRouter();Backbone.history.start();
myTodoRouter.navigate('todo/5');
![Page 15: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/15.jpg)
Além do Backbone
● Funcionalidade ausentes○ Atributos virtuais○ Hierarquia nas views○ Form validation
● Marionette○ Seta alguns padrões como o template○ Facilita as views
■ Subview, regions, layout● Crescimento da aplicação
![Page 16: Backbone.js](https://reader038.vdocuments.com.br/reader038/viewer/2022100523/54b74f3c4a795967588b45f2/html5/thumbnails/16.jpg)
Referências
● http://backbonejs.org/● http://todomvc.com/architecture-
examples/backbone/● http://addyosmani.github.io/backbone-
fundamentals/