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.

6bbed4d8a26da005cfd4e9e179d50c9d?s=128

Vero Rebagliatte

March 22, 2013
Tweet

Transcript

  1. Vero Rebagliatte

  2. Vero Rebagliatte @rebagliatte

  3. Forecast

  4. Forecast • What’s backbone.js • Why to use a library/framework

    • Alternatives • How to pick one (libraries vs frameworks) • Backbone classes • Backbone examples
  5. What’s backbone?

  6. It’s a javascript library

  7. It was created by J. Ashkenas

  8. It’s lightweight

  9. It’s free and open source

  10. It provides utilities via

  11. It was extracted from

  12. It’s MV*

  13. None
  14. Why do I need a library/framework?

  15. Client-side rendering

  16. Event-driven approach

  17. Model mirroring

  18. Separation of concerns

  19. History

  20. ‘Single API - many client apps’ pattern

  21. Alternatives?

  22. Alternatives • Spine • Knockout • Angular • JavaScript MVC

    • Capuccino • SproutCore • Batman.js • Coherent • Ember • Ext • Meteor • Agility • Google Closure • Google Web Toolkit
  23. Should I pick a library or a framework?

  24. Library approach

  25. Framework approach

  26. A library gets called by me

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

  28. None
  29. Backbone classes

  30. Routers

  31. Routers map urls to js methods

  32. History

  33. History observes url changes and triggers callbacks

  34. Views

  35. Views own a DOM element

  36. Views might render DOM via the Templates

  37. Views might observe model events

  38. Views handle user input

  39. Views invoke model methods

  40. Views are pretty much like Rails Controllers

  41. Templates

  42. Templates are interpolated HTML

  43. Models

  44. Models represent a single record

  45. Collections

  46. Collections contain multiple models

  47. Collections have underscore methods available

  48. Models and Collections represent the data

  49. Building a twitter app

  50. window.Twitter = Models: {} Collections: {} Views: {} Routers: {}

    initialize: -> new Twitter.Routers.Tweets() Backbone.history.start() $(document).ready -> Twitter.initialize() Initializing the app
  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
  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
  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
  54. class Twitter.Collections.Tweets extends Backbone.Collection model: Twitter.Models.Tweet url: '/tweets' Collection

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

  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
  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
  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
  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
  60. <h1>My Twitter App </h1> <form id="new_tweet"> <input type="text" name="msg" id="new_tweet_msg">

    <input type="submit" value="Tweet"> </form> <ul> <% for tweet in @.tweets.models: %> <li><%= tweet.get('content') %></li> <% end %> </ul> Template
  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.
  62. Conclusion

  63. Thanks! @rebagliatte