$30 off During Our Annual Pro Sale. View Details »

An introduction to Backbone.js

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.

Vero Rebagliatte

March 22, 2013
Tweet

More Decks by Vero Rebagliatte

Other Decks in Programming

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