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.

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*
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)
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