• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to Backbone.js by Azat Mardanov for General Assembly
 

Intro to Backbone.js by Azat Mardanov for General Assembly

on

  • 1,183 views

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

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

Statistics

Views

Total Views
1,183
Views on SlideShare
1,181
Embed Views
2

Actions

Likes
2
Downloads
17
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to Backbone.js by Azat Mardanov for General Assembly Intro to Backbone.js by Azat Mardanov for General Assembly Presentation Transcript

    • Azat MardanovEngineer, Storify.comINTRODUCTIONTO BACKBONE.JSSaturday, February 2, 13
    • AGENDA‣ History, Problems and Solutions‣ Brief Overview of Backbone Components‣ Building Backbone App From Scratch‣ Backbone Starter Kit‣ Subviews‣ AMD2Saturday, February 2, 13
    • INTRODUCTION‣ Over 12 years in software development‣ Author of RapidPrototypingWithJS.com‣ 500 Startups grad (Gizmo)AZAT MARDANOVENGINEER, STORIFY3@azat_coazat.coSaturday, February 2, 13
    • INTRODUCTION TO BACKBONE.JSHISTORY,PROBLEMSANDSOLUTIONS4Saturday, February 2, 13
    • 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
    • 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
    • HISTORY, PROBLEMS AND SOLUTIONSSOLUTIONS‣ Better architecture (MVC)‣ Best practices‣ More developers (not scalable)7RIGHTCHOICESaturday, February 2, 13
    • HISTORY, PROBLEMS AND SOLUTIONSWHY USE MVC FOR FRONT-ENDDEVELOPMENT?“Code is not an asset, it’s a liability” - Unknown source8Saturday, February 2, 13
    • HISTORY, PROBLEMS AND SOLUTIONSMODEL VIEW CONTROLLER‣ Better code organization leads to faster/cheaper maintenance‣ Reusability‣ Separation of components/concerns9Saturday, February 2, 13
    • HISTORY, PROBLEMS AND SOLUTIONSMODEL VIEW CONTROLLER‣ Model: data and information‣ View: visual representation‣ Controller: interaction between a user and the system10Saturday, February 2, 13
    • 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
    • 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
    • HISTORY, PROBLEMS AND SOLUTIONSOTHER MVC FRAMEWORKS‣ Ember.js: live-templates (Handebars), scaffolding, more desktop-likeapps‣ Knockout.js: lightweighthttp://todomvc.com/ — Todo app in various frameworks13GOODTOKNOWSaturday, February 2, 13
    • 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
    • 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
    • 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
    • BACKBONE.JS COMPONENTSSTANDARD TRANSACTIONSMADE EASIER WITH AFRAMEWORK‣ fetchAll: collection.fetchAll() instead of $.ajax(...) via REST API‣ save(): model.save() instead of $.ajax(...) via REST API‣ Updates Views based on data changes17Saturday, February 2, 13
    • Q&AINTRODUCTION TO BACKBONE.JS 18Saturday, February 2, 13
    • 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 http://github.com/azat-co/ga-backbone/19Saturday, February 2, 13
    • IMAGES 20Saturday, February 2, 13
    • DISCUSSIONTIMEINTRODUCTION TO BACKBONE.JS 21Saturday, February 2, 13
    • EVENT BINDINGBAD PRACTICEHave lots of ajax calls with callback inside of them:$.ajax (...//fetch datasuccess: function(...//update view))22DANGERZONE!Saturday, February 2, 13
    • EVENT BINDINGGOOD PRACTICEIn a view listen to Backbone collection.on(‘change’) event:collection.fetch() triggers ‘change’ event23RIGHTCHOICESaturday, February 2, 13
    • EVENT BINDINGFURTHER READINGAwesome guide on on going from jQuery to Backbone.js:https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md/orhttp://bit.ly/NGqFeK24GOODTOKNOWSaturday, February 2, 13
    • 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 http://github.com/azat-co/ga-backbone/25Saturday, February 2, 13
    • DISCUSSIONTIMEINSERT CLASS TITLE 26Saturday, February 2, 13
    • 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
    • BACKBONE.JS STARTER KIT 28SUPER SIMPLE BACKBONESTARTER KITBackbone + Twitter Bootstarp + Require.js (AMD) Boilerplate:https://github.com/azat-co/super-simple-backbone-starter-kitGOODTOKNOWSaturday, February 2, 13
    • 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 http://github.com/azat-co/ga-backbone/29Saturday, February 2, 13
    • BOILERPLATEFURTHER READINGBackbone Boilerplate Buddy:https://github.com/backbone-boilerplate/grunt-bbbBackbone.js Applications:http://addyosmani.github.com/backbone-fundamentals/30GOODTOKNOWSaturday, February 2, 13
    • DISCUSSIONTIMEINSERT CLASS TITLE 31Saturday, February 2, 13
    • Q&AINSERT CLASS TITLE 32Saturday, February 2, 13