Your SlideShare is downloading. ×
0
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone.js - Michał Taberski (PRUG 2.0)

3,288

Published on

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

No Downloads
Views
Total Views
3,288
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
82
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BACKBONE.JS Michał Taberskipiątek, 29 kwietnia 2011
  • 2. AGENDA • Classic web-app model • Modern web-app model • Intro to Backbone.js • overview BB • DEMOpiątek, 29 kwietnia 2011
  • 3. CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
  • 4. CLASSIC WEB-APP MODELpiątek, 29 kwietnia 2011
  • 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. MODERN WEB-APP MODEL GitHubpiątek, 29 kwietnia 2011
  • 7. piątek, 29 kwietnia 2011
  • 8. piątek, 29 kwietnia 2011
  • 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. WHAT IS REQUIRED TO DO IT? • Implement business logic (JS) • Prepare server JSON API • organize somehow JS codepiątek, 29 kwietnia 2011
  • 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. 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. 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. 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. 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. 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. BACKBONE.JS - VIEWS • responsible for DOM modiffications • works in el range • related to collection or modelpiątek, 29 kwietnia 2011
  • 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. 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. DEMOpiątek, 29 kwietnia 2011
  • 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

×