Backbone js in action
1 like1,997 views
The document discusses Backbone.js as a framework that structures web applications through models, views, and collections with a RESTful JSON interface. It highlights key features such as model binding, collection methods, view rendering, and the router for managing application state. Additionally, it provides code examples and suggests further resources for learning Backbone.js and related technologies.
Backbone js in action
- 1. BACKBONE JS IN ACTION @UshaGuduri
- 2. AGENDA Web Apps Back Then Web Apps Now What the heck is the problem?!! What is BackboneJS? Lets get hands-on Whats out there
- 3. ONCE UPON A TIME...
- 4. RIGHT HERE, RIGHT NOW!
- 5. HOW DO WE ACHIEVE DYNAMISM? “ The best thing about JavaScript is its implementation of functions. ”
- 6. JQUERY AJAX $(function () { // do stuff after DOM has loaded }); $.ajax({ url: "/myurl", beforeSend: function ( xhr ) { xhr.overrideMimeType("text/plain;"); }, success: function(response) { // I AM INVINCIBLE! }, error: function(response) { // What, I FAILED ? :O } })
- 7. WHAT THE HECK IS THE PROBLEM?!!! Lets check Boston.com
- 8. “ 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. ”
- 9. 6.3KB Packed and gzipped !!
- 10. BACKBONEJS CONSTRUCTS Model (and Collection): Application (domain) data objects that are retrieved from and persisted to the server View: HTML presentation of the data stored in the models and DOM 'controller' Router: Controller that saves the state of the application via a url hash History: Global router (per frame) to handle hashchange events or pushState Events: Module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. Sync: Manages actual persistence by a "function that Backbone calls every time it attempts to read or save a model to the server."
- 12. HOW TO MAP BACKBONE TO MVC
- 13. MODEL extend, initialize(constructor), url/urlRoot, id/idAttribute/cid, get, set, defaults, fetch, save/destroy, validate Also be aware of useful functions like: escape, unset, clear, parse, clone, isNew, hasChanged/changed/changedAttributes, previous/previousAttributes var CallItem = Backbone.Model.extend({ urlRoot:"/call" }); var myCall = new CallItem(); mycall.save({ name: "Leia", phone: "1-213-345-2343", call_on: "2013-03-10" });
- 14. COLLECTION extend, initialize(constructor), url, model, models, add, remove, get, reset Supports 28 underscore methods ! (forEach, map, min, max...) Also be aware of useful functions like: sort, pluck, comparator, where var CallList = Backbone.Collection.extend({ model: CallItem, url: '/calls' }); var myCallList = new CallList(); myCallList.fetch();
- 15. VIEW extend, initialize(constructor), tagName, className, events, remove, delegateEvents, undelegateEvents var CallItemView = Backbone.View.extend({ events:{ "click .edit" : "render" }, initialize: function(){ this.model.bind("change", this.render, this); }, render: function(event) { this.$el.html(this.template(this.model.attributes)); return this; // allow chaining } }); var myCallItemView = new CallItemView({ model: myCall, el: "#my-call-view" });
- 16. el, $el
- 17. ROUTER extend, initialize(constructor), navigate, route var CallRouter = Backbone.Router.extend({ routes: { "help": "help", // #help "call/:id": "call", // #call/10 "search/:date(/p:page)": "search" // #search/2013-03-10 or #sea rch/2013-03-10/2 }, help: function() { //...your function } }); $(function(){ new CallRouter(); Backbone.history.start({pushState: true}); });
- 18. PUTTING IT ALL TOGETHER Lets look at: Call Butler src/ js/ init.js callButlerApp.js routers/ models/ callItem.js callList.js views/ callItem.js callDetail.js
- 19. Over 35 Javascript MVC framework libraries showcased at Jster Catalog
- 20. FURTHER RESOURCES AngularJS Videos at Using Knockoutjs and JQuery to Create Richer MVC 4 Applications at 11:40am Backbone.JS Backbone.JS Source Code Call Butler Source Code Backbone Tutorials egghead.io Bocoup Training at $1,149!
- 21. Good Luck BackboneJS Padawan!