Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Backbone.js by Azat Mardanov for General Assembly


Published on

History of JavaScript, problems and solutions, MVC, main components of Backbone.js, links for further reading

Published in: Technology
  • Be the first to comment

Intro to Backbone.js by Azat Mardanov for General Assembly

  1. 1. Azat MardanovEngineer, Storify.comINTRODUCTIONTO BACKBONE.JSSaturday, February 2, 13
  2. 2. AGENDA‣ History, Problems and Solutions‣ Brief Overview of Backbone Components‣ Building Backbone App From Scratch‣ Backbone Starter Kit‣ Subviews‣ AMD2Saturday, February 2, 13
  3. 3. INTRODUCTION‣ Over 12 years in software development‣ Author of‣ 500 Startups grad (Gizmo)AZAT MARDANOVENGINEER, STORIFY3@azat_coazat.coSaturday, February 2, 13
  5. 5. HISTORY, PROBLEMS AND SOLUTIONSHISTORY1. Before: Pure HTML from the server, client just a painting instructions2. Some client code to style (DHTML, AJAX), 90% of server3. Spaghetti code (~4yr ago), no structure in who calls who4. Now: 10-60% of interaction on client: data transferred in DOM,a.k.a lossy transformation, trying to use DOM as a database — sucks5. Future: client will own entire complexity of application (?)5Saturday, February 2, 13
  6. 6. HISTORY, PROBLEMS AND SOLUTIONSPROBLEMS IN FRONT-ENDDEVELOPMENT‣ Client has more responsibility but not all (bugs)‣ Complexity grows polynomial, features *2, must keep in mind allfeatures before,‣ Leads to re-writes, throwing away all code‣ Accumulation of technical debt, more resource (developers)6DANGERZONE!Saturday, February 2, 13
  7. 7. HISTORY, PROBLEMS AND SOLUTIONSSOLUTIONS‣ Better architecture (MVC)‣ Best practices‣ More developers (not scalable)7RIGHTCHOICESaturday, February 2, 13
  8. 8. HISTORY, PROBLEMS AND SOLUTIONSWHY USE MVC FOR FRONT-ENDDEVELOPMENT?“Code is not an asset, it’s a liability” - Unknown source8Saturday, February 2, 13
  9. 9. HISTORY, PROBLEMS AND SOLUTIONSMODEL VIEW CONTROLLER‣ Better code organization leads to faster/cheaper maintenance‣ Reusability‣ Separation of components/concerns9Saturday, February 2, 13
  10. 10. HISTORY, PROBLEMS AND SOLUTIONSMODEL VIEW CONTROLLER‣ Model: data and information‣ View: visual representation‣ Controller: interaction between a user and the system10Saturday, February 2, 13
  11. 11. WHAT IS BACKBONE.JS?WHY USE MVC FOR FRONT-ENDDEVELOPMENT?‣ Desktop-like applications in a browser (think GMail)‣ Thick client and mobile apps‣ Lots of interactions via HTTP Request (ex-AJAX)‣ Updating DOM and dealing with callbacks quickly becomes PITA11Saturday, February 2, 13
  12. 12. HISTORY, PROBLEMS AND SOLUTIONSADVANTAGES OF BACKBONE.JS‣ Simple: (View, Models, Collections, Router)‣ Uses Underscore, jQuery/Zepto‣ Customizable, works well with mobile apps12Saturday, February 2, 13
  13. 13. HISTORY, PROBLEMS AND SOLUTIONSOTHER MVC FRAMEWORKS‣ Ember.js: live-templates (Handebars), scaffolding, more desktop-likeapps‣ Knockout.js: lightweight — Todo app in various frameworks13GOODTOKNOWSaturday, February 2, 13
  14. 14. BACKBONE.JS COMPONENTSMAIN COMPONENTS‣ Router: Controller in MVC concept‣ Templates and Views: View (and Controller) in MVC concept‣ Collections and Models: Model in MVC concept14Saturday, February 2, 13
  15. 15. BACKBONE.JS COMPONENTSBEST PRACTICE‣ Router: defines routes a.k.a nice URLs (/stories/:id/element/:id), callsviews/collections‣ Views: accept data, bind events, compile and render HTML‣ Templates: HTML templates with JS instructions (Underscore)‣ Collections: fetch, parse data via REST API, represent sets of Models‣ Models: manipulate attributes, fetch and parse data via REST API15Saturday, February 2, 13
  16. 16. BACKBONE.JS COMPONENTSFLEXIBILITY‣ Router: not required‣ Templates: can be just variables inside of Views or separate file (AMD)‣ View can use Models directly16Saturday, February 2, 13
  17. 17. BACKBONE.JS COMPONENTSSTANDARD TRANSACTIONSMADE EASIER WITH AFRAMEWORK‣ fetchAll: collection.fetchAll() instead of $.ajax(...) via REST API‣ save(): instead of $.ajax(...) via REST API‣ Updates Views based on data changes17Saturday, February 2, 13
  18. 18. Q&AINTRODUCTION TO BACKBONE.JS 18Saturday, February 2, 13
  19. 19. KEY OBJECTIVE(S) AGENDARESOURCESDELIVERABLEEXERCISE 1 - “HELLO WORLD”Build ‘Hello World” Backbone.jsapp from scratch15m 1. Download jQuery, Underscore and Backbone2. Create HTML and link libraries3. Create Router4. Create View5. Run HTML fileInsert deliverable/outcome, February 2, 13
  20. 20. IMAGES 20Saturday, February 2, 13
  22. 22. EVENT BINDINGBAD PRACTICEHave lots of ajax calls with callback inside of them:$.ajax (...//fetch datasuccess: function(...//update view))22DANGERZONE!Saturday, February 2, 13
  23. 23. EVENT BINDINGGOOD PRACTICEIn a view listen to Backbone collection.on(‘change’) event:collection.fetch() triggers ‘change’ event23RIGHTCHOICESaturday, February 2, 13
  24. 24. EVENT BINDINGFURTHER READINGAwesome guide on on going from jQuery to Backbone.js:, February 2, 13
  25. 25. KEY OBJECTIVE(S) AGENDARESOURCESDELIVERABLEEXERCISE 2 - “EVENT BINDING”Extend SSBSK to use subviews 15m 1. Download SSBSK2. Create subview3. Populate subview with models4. Render subview5. Run HTML fileInsert deliverable/outcome, February 2, 13
  26. 26. DISCUSSIONTIMEINSERT CLASS TITLE 26Saturday, February 2, 13
  27. 27. REQUIRE.JS AND AMDASYNCHRONOUS MODULEDEFINITIONRequire.js allows for asynchronous loading of JS and other files (HTML):define(["alpha"], function (alpha) {return {verb: function(){return alpha.verb() + 2;}};});27GOODTOKNOWSaturday, February 2, 13
  28. 28. BACKBONE.JS STARTER KIT 28SUPER SIMPLE BACKBONESTARTER KITBackbone + Twitter Bootstarp + Require.js (AMD) Boilerplate:, February 2, 13
  29. 29. KEY OBJECTIVE(S) AGENDARESOURCESDELIVERABLEEXERCISE 3 - SSBSKExtend SSBSK to use subviews 15m 1. Download SSBSK2. Create subview3. Populate subview with models4. Render subview5. Run HTML fileInsert deliverable/outcome, February 2, 13
  30. 30. BOILERPLATEFURTHER READINGBackbone Boilerplate Buddy: Applications:, February 2, 13
  31. 31. DISCUSSIONTIMEINSERT CLASS TITLE 31Saturday, February 2, 13
  32. 32. Q&AINSERT CLASS TITLE 32Saturday, February 2, 13