Backbone.js

936 views

Published on

Published in: Technology, Business, Real Estate
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone.js

  1. 1. Filipe Giusti
  2. 2. Roadmap ● Introdução ● Básico ○ ○ ○ ○ ○ Características Model View Eventos Router ● Além
  3. 3. 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
  4. 4. 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.
  5. 5. 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});
  6. 6. Básico - Model ● ● ● ● ● ● ● initialize get & set id attributes changedAttributes parse toJSON
  7. 7. Básico - Model ● Observer pattern ● Validação ○ isValid - validation ○ Backbone.validation ● Relações ○ backbone-relational.js ○ backbone-associations ○ supermodel.js
  8. 8. Básico - Model ● Persistência ○ ○ ○ ○ ○ ○ url - urlRoot parse sync - fetch - save - destroy REST JSON LocalStorage? Websockets?
  9. 9. Básico - Model - Persistência app.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"
  10. 10. Básico - Model - Collections app.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.
  11. 11. Básico - View ● Duas partes ○ Declarativa ■ el ■ model binding ■ events ○ Procedural ■ render ■ Controller
  12. 12. Básico - View app.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();
  13. 13. Básico - Eventos Backbone.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
  14. 14. Básico - Router app.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');
  15. 15. 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
  16. 16. Referências ● http://backbonejs.org/ ● http://todomvc.com/architectureexamples/backbone/ ● http://addyosmani.github.io/backbonefundamentals/

×