Intro to by Azat Mardanov for General Assembly

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


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

Transcript of Intro to by Azat Mardanov for General Assembly

  • 1. Azat MardanovEngineer, Storify.comINTRODUCTIONTO BACKBONE.JSSaturday, February 2, 13

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. INTRODUCTION Over 12 years in software development Author of 500 Startups grad (Gizmo)AZAT MARDANOVENGINEER, [email protected]_coazat.coSaturday, February 2, 13 4. INTRODUCTION TO BACKBONE.JSHISTORY,PROBLEMSANDSOLUTIONS4Saturday, February 2, 13 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. 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. HISTORY, PROBLEMS AND SOLUTIONSSOLUTIONS Better architecture (MVC) Best practices More developers (not scalable)7RIGHTCHOICESaturday, February 2, 13 8. HISTORY, PROBLEMS AND SOLUTIONSWHY USE MVC FOR FRONT-ENDDEVELOPMENT?Code is not an asset, its a liability - Unknown source8Saturday, February 2, 13 9. HISTORY, PROBLEMS AND SOLUTIONSMODEL VIEW CONTROLLER Better code organization leads to faster/cheaper maintenance Reusability Separation of components/concerns9Saturday, February 2, 13 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. 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. 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. 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. 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. BACKBONE.JS COMPONENTSBEST PRACTICE Router: denes 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. BACKBONE.JS COMPONENTSFLEXIBILITY Router: not required Templates: can be just variables inside of Views or separate le (AMD) View can use Models directly16Saturday, February 2, 13 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. Q&AINTRODUCTION TO BACKBONE.JS 18Saturday, February 2, 13 19. KEY OBJECTIVE(S) AGENDARESOURCESDELIVERABLEEXERCISE 1 - HELLO WORLDBuild Hello World Backbone.jsapp from scratch15m 1. Download jQuery, Underscore and Backbone2. Create HTML and link libraries3. Create Router4. Create View5. Run HTML leInsert deliverable/outcome, February 2, 13 20. IMAGES 20Saturday, February 2, 13 21. DISCUSSIONTIMEINTRODUCTION TO BACKBONE.JS 21Saturday, February 2, 13 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. EVENT BINDINGGOOD PRACTICEIn a view listen to Backbone collection.on(change) event:collection.fetch() triggers change event23RIGHTCHOICESaturday, February 2, 13 24. EVENT BINDINGFURTHER READINGAwesome guide on on going from jQuery to Backbone.js:, February 2, 13 25. KEY OBJECTIVE(S) AGENDARESOURCESDELIVERABLEEXERCISE 2 - EVENT BINDINGExtend SSBSK to use subviews 15m 1. Download SSBSK2. Create subview3. Populate subview with models4. Render subview5. Run HTML leInsert deliverable/outcome, February 2, 13 26. DISCUSSIONTIMEINSERT CLASS TITLE 26Saturday, February 2, 13 27. REQUIRE.JS AND AMDASYNCHRONOUS MODULEDEFINITIONRequire.js allows for asynchronous loading of JS and other les (HTML):define(["alpha"], function (alpha) {return {verb: function(){return alpha.verb() + 2;}};});27GOODTOKNOWSaturday, February 2, 13 28. BACKBONE.JS STARTER KIT 28SUPER SIMPLE BACKBONESTARTER KITBackbone + Twitter Bootstarp + Require.js (AMD) Boilerplate:, February 2, 13 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 leInsert deliverable/outcome, February 2, 13 30. BOILERPLATEFURTHER READINGBackbone Boilerplate Buddy: Applications:, February 2, 13 31. DISCUSSIONTIMEINSERT CLASS TITLE 31Saturday, February 2, 13 32. Q&AINSERT CLASS TITLE 32Saturday, February 2, 13