BACKBONE.JS                             Michał Taberskipiątek, 29 kwietnia 2011
AGENDA    • Classic              web-app model    • Modern                web-app model    • Intro            to Backbone....
CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
WHAT IS CAUSING THIS?    • Poor             calculation distribution    • Small                scalability    • Server    ...
MODERN                           WEB-APP MODEL               GitHubpiątek, 29 kwietnia 2011
piątek, 29 kwietnia 2011
piątek, 29 kwietnia 2011
HOW IT WORKS ?                                 Server provides templates (eg. mustache like) as                           ...
WHAT IS REQUIRED TO DO IT?    • Implement              business logic (JS)    • Prepare              server JSON API    • ...
BACKBONE.JS    • simple               framework to organize JS-heavy apps    • provide               classic MVC - models,...
BACKBONE.JS    • launched             by Documentcloud (underscore.js, Jammit)    • lightweight           - 3.9kb    • har...
BACKBONE.JS - MODELS    • easy            way to keep your data sync with server    • define                custom events (...
BACKBONE.JS - MODELS    •     extend, constructor / initialize, get, escape, set, unset, clear,           id, cid, attribu...
BACKBONE.JS - COLLECTIONS    • organize                models    • fires            events    • REST                 calls ...
BACKBONE.JS - COLLECTIONS    •         extend, model, constructor / initialize, models, toJSON,          Underscore Method...
BACKBONE.JS - VIEWS    • responsible               for DOM modiffications    • works                in el range    • relate...
BACKBONE.JS - VIEWS               class	  NewCommentView	  extends	  Backbone.View               	  	  events:            ...
BACKBONE.JS - CONTROLLER    • routing              control    • transferable             links                            ...
DEMOpiątek, 29 kwietnia 2011
RESOURCES    • Project     page:        http://documentcloud.github.com/backbone/    • Source       code:        https://g...
Upcoming SlideShare
Loading in …5
×

Backbone.js - Michał Taberski (PRUG 2.0)

3,679 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,679
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
86
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Backbone.js - Michał Taberski (PRUG 2.0)

  1. 1. BACKBONE.JS Michał Taberskipiątek, 29 kwietnia 2011
  2. 2. AGENDA • Classic web-app model • Modern web-app model • Intro to Backbone.js • overview BB • DEMOpiątek, 29 kwietnia 2011
  3. 3. CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
  4. 4. CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
  5. 5. WHAT IS CAUSING THIS? • Poor calculation distribution • Small scalability • Server is doing more than it should • Slow answer to user • Unresponsive apps • Client often still has unused (free) resourcespiątek, 29 kwietnia 2011
  6. 6. MODERN WEB-APP MODEL GitHubpiątek, 29 kwietnia 2011
  7. 7. piątek, 29 kwietnia 2011
  8. 8. piątek, 29 kwietnia 2011
  9. 9. HOW IT WORKS ? Server provides templates (eg. mustache like) as an answer for first request, and JSON data to fi# it When event is tri%ered, browser ask for JSON data (pure RESTful request) browser SERVER Server gives just JSON data* * - Because they fi# templates using JS, they can display data in a fancy way eg. like project navigation in GitHubpiątek, 29 kwietnia 2011
  10. 10. WHAT IS REQUIRED TO DO IT? • Implement business logic (JS) • Prepare server JSON API • organize somehow JS codepiątek, 29 kwietnia 2011
  11. 11. BACKBONE.JS • simple framework to organize JS-heavy apps • provide classic MVC - models, (collections), controllers, views • event driven • easy to use with Railspiątek, 29 kwietnia 2011
  12. 12. BACKBONE.JS • launched by Documentcloud (underscore.js, Jammit) • lightweight - 3.9kb • hard dependency - underscore.js • recommended dependency • jQuery or Zepto for DOM modifications • json2.js - few helpers by Douglas Crockfordpiątek, 29 kwietnia 2011
  13. 13. BACKBONE.JS - MODELS • easy way to keep your data sync with server • define custom events (add, remove, change) like below: class  Sidebar  extends  Backbone.Model    promptColor:  ()-­‐>          cssColor  =  prompt("Please  enter  a  CSS  color:")        @set({color:  cssColor}) sidebar  =  new  Sidebar • sidebar.bind(change:color,  (model,  color)-­‐>      $(#sidebar).css({background:  color}) ) sidebar.set({color:  white}) sidebar.promptColor()piątek, 29 kwietnia 2011
  14. 14. BACKBONE.JS - MODELS • extend, constructor / initialize, get, escape, set, unset, clear, id, cid, attributes, defaults, toJSON, fetch, save, destroy, validate, url, parse, clone, isNew, change, hasChanged, changedAttributes, previous, previousAttributespiątek, 29 kwietnia 2011
  15. 15. BACKBONE.JS - COLLECTIONS • organize models • fires events • REST calls class  CommentsCollection  extends  Backbone.Collection    model:  CommentModel    url:  /comments Comments  =  new  CommentsCollection Comments.fetch()piątek, 29 kwietnia 2011
  16. 16. BACKBONE.JS - COLLECTIONS • extend, model, constructor / initialize, models, toJSON, Underscore Methods (25), add, remove, get, getByCid, at, length, comparator, sort, pluck, url, parse, fetch, refresh, createpiątek, 29 kwietnia 2011
  17. 17. BACKBONE.JS - VIEWS • responsible for DOM modiffications • works in el range • related to collection or modelpiątek, 29 kwietnia 2011
  18. 18. BACKBONE.JS - VIEWS class  NewCommentView  extends  Backbone.View    events:        submit:  save    constructor:  -­‐>        @el  =  $(#comment_form)        super    save:  (e)-­‐>        @model  =  new  CommentModel        @model.save({            title:  @$("input[name=title]").val(),            author:  @$("input[name=author]").val(),            body:  @$("textarea").val()        },  {            success:  =>                @$("input[name=title]").val()                @$("input[name=author]").val()                @$("textarea").val()                @render()        })        e.preventDefault()        e.stopPropagation()        render:  -­‐>        $.tmpl($("#commentTemplate"),  @model.toJSON()).appendTo(#commentsContener)piątek, 29 kwietnia 2011
  19. 19. BACKBONE.JS - CONTROLLER • routing control • transferable links Workspace  extends  Backbone.Controller    routes:        "help":                                  "help"            "search/:query":                "search"        "search/:query/p:page":  "search"    help:  ()-­‐>        new  HelpView()    search:  (query,  page)-­‐>        new  QueryView(query,  page)piątek, 29 kwietnia 2011
  20. 20. DEMOpiątek, 29 kwietnia 2011
  21. 21. RESOURCES • Project page: http://documentcloud.github.com/backbone/ • Source code: https://github.com/documentcloud/backbone/ • Another presentation about BB http://ngauthier-backbone.heroku.com/ • Nice tutorial BB + Rails http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/piątek, 29 kwietnia 2011

×