An introduction to Backbone.js

JavaScript libraries and frameworks keep coming out. It seems the community is addressing problems we all have in common with a wide range of solutions.

In these slides we analyze what these problems are, why we would need a JavaScript framework and how to pick one.

Lastly we are gonna go through Backbone classes and a really basic example of them in action.

Transcript

1. Vero Rebagliatte
   

   View Slide

2. Vero Rebagliatte
   @rebagliatte
   

   View Slide

3. Forecast
   

   View Slide

4. Forecast
   • What’s backbone.js
   • Why to use a library/framework
   • Alternatives
   • How to pick one (libraries vs frameworks)
   • Backbone classes
   • Backbone examples
   

   View Slide

5. What’s backbone?
   

   View Slide

6. It’s a javascript library
   

   View Slide

7. It was created by J. Ashkenas
   

   View Slide

8. It’s lightweight
   

   View Slide

9. It’s free and open source
   

   View Slide

10. It provides utilities via
    

    View Slide

11. It was extracted from
    

    View Slide

12. It’s MV*
    

    View Slide

13. View Slide

14. Why do I need a library/framework?
    

    View Slide

15. Client-side rendering
    

    View Slide

16. Event-driven approach
    

    View Slide

17. Model mirroring
    

    View Slide

18. Separation of concerns
    

    View Slide

19. History
    

    View Slide

20. ‘Single API - many client apps’ pattern
    

    View Slide

21. Alternatives?
    

    View Slide

22. Alternatives
    • Spine
    • Knockout
    • Angular
    • JavaScript MVC
    • Capuccino
    • SproutCore
    • Batman.js
    • Coherent
    • Ember
    • Ext
    • Meteor
    • Agility
    • Google Closure
    • Google Web Toolkit
    

    View Slide

23. Should I pick a library or a framework?
    

    View Slide

24. Library approach
    

    View Slide

25. Framework approach
    

    View Slide

26. A library gets called by me
    

    View Slide

27. I get called by frameworks (inversion of control)
    

    View Slide

28. View Slide

29. Backbone classes
    

    View Slide

30. Routers
    

    View Slide

31. Routers map urls to js methods
    

    View Slide

32. History
    

    View Slide

33. History observes url changes and triggers callbacks
    

    View Slide

34. Views
    

    View Slide

35. Views own a DOM element
    

    View Slide

36. Views might render DOM via the Templates
    

    View Slide

37. Views might observe model events
    

    View Slide

38. Views handle user input
    

    View Slide

39. Views invoke model methods
    

    View Slide

40. Views are pretty much like Rails Controllers
    

    View Slide

41. Templates
    

    View Slide

42. Templates are interpolated HTML
    

    View Slide

43. Models
    

    View Slide

44. Models represent a single record
    

    View Slide

45. Collections
    

    View Slide

46. Collections contain multiple models
    

    View Slide

47. Collections have underscore methods available
    

    View Slide

48. Models and Collections represent the data
    

    View Slide

49. Building a twitter app
    

    View Slide

50. window.Twitter =
    Models: {}
    Collections: {}
    Views: {}
    Routers: {}
    initialize: ->
    new Twitter.Routers.Tweets()
    Backbone.history.start()
    $(document).ready ->
    Twitter.initialize()
    Initializing the app
    

    View Slide

51. class Twitter.Routers.Tweets extends Backbone.Router
    routes:
    '': 'index'
    'tweets': 'index'
    initialize: ->
    @collection = new Twitter.Collections.Tweets()
    @collection.fetch()
    index: ->
    view = new Twitter.Views.TweetsIndex(collection:
    @collection)
    $('#container').html(view.render().el)
    Router
    

    View Slide

52. class Twitter.Routers.Tweets extends Backbone.Router
    routes:
    '': 'index'
    'tweets': 'index'
    initialize: ->
    @collection = new Twitter.Collections.Tweets()
    @collection.fetch()
    index: ->
    view = new Twitter.Views.TweetsIndex(collection:
    @collection)
    $('#container').html(view.render().el)
    Router
    

    View Slide

53. class Twitter.Routers.Tweets extends Backbone.Router
    routes:
    '': 'index'
    'tweets': 'index'
    initialize: ->
    @collection = new Twitter.Collections.Tweets()
    @collection.fetch()
    index: ->
    view = new Twitter.Views.TweetsIndex(collection:
    @collection)
    $('#container').html(view.render().el)
    Router
    

    View Slide

54. class Twitter.Collections.Tweets extends
    Backbone.Collection
    model: Twitter.Models.Tweet
    url: '/tweets'
    Collection
    

    View Slide

55. class Twitter.Models.Tweet extends Backbone.Model
    Model
    

    View Slide

56. class Twitter.Views.TweetsIndex extends Backbone.View
    template: JST['tweets/index']
    events:
    'submit #new_tweet': 'createTweet'
    initialize: ->
    @collection.on('add', @render, this)
    @collection.on('reset', @render, this)
    render: ->
    $(@el).html(@template(tweets: @collection))
    this
    createTweet: (event) ->
    event.preventDefault()
    @collection.create name: $('#new_tweet_msg').val()
    View
    

    View Slide

57. class Twitter.Views.TweetsIndex extends Backbone.View
    template: JST['tweets/index']
    events:
    'submit #new_tweet': 'createTweet'
    initialize: ->
    @collection.on('add', @render, this)
    @collection.on('reset', @render, this)
    render: ->
    $(@el).html(@template(tweets: @collection))
    this
    createTweet: (event) ->
    event.preventDefault()
    @collection.create name: $('#new_tweet_msg').val()
    View
    

    View Slide

58. class Twitter.Views.TweetsIndex extends Backbone.View
    template: JST['tweets/index']
    events:
    'submit #new_tweet': 'createTweet'
    initialize: ->
    @collection.on('add', @render, this)
    @collection.on('reset', @render, this)
    render: ->
    $(@el).html(@template(tweets: @collection))
    this
    createTweet: (event) ->
    event.preventDefault()
    @collection.create name: $('#new_tweet_msg').val()
    View
    

    View Slide

59. class Twitter.Views.TweetsIndex extends Backbone.View
    template: JST['tweets/index']
    events:
    'submit #new_tweet': 'createTweet'
    initialize: ->
    @collection.on('add', @render, this)
    @collection.on('reset', @render, this)
    render: ->
    $(@el).html(@template(tweets: @collection))
    this
    createTweet: (event) ->
    event.preventDefault()
    @collection.create name: $('#new_tweet_msg').val()
    View
    

    View Slide

60. My Twitter App
    
    
    
    
    
    <% for tweet in @.tweets.models: %>
    <%= tweet.get('content') %>
    <% end %>
    
    Template
    

    View Slide

61. Recap
    • Instantiate router
    • Router: Map routes with functions, load collections on them
    • Collection: Associate a model and a url to touch the API
    • Model: Add attributes logic
    • View: Associate a template, pass in the collection and render the result, bind
    events.
    

    View Slide

62. Conclusion
    

    View Slide

63. Thanks!
    @rebagliatte
    

    View Slide