Introduction to Backbone.js

A brief introduction to Backbone.js intended for people knowledgable about jQuery. We also walk through building a simple Backbone.js based twitter client. The full project source code is here: https://github.com/jcon/backbone-tweetflow

Transcript

1. 
   *OUSP
   UP
   #BDLCPOFKT Lightweight framework to organize your complex JS Jim Connell Wednesday, April 4, 12
2. @newfoo "CPVU
   .F Full-stack 15+ years iOS, Android, Web @freshdirect @coolhunting @meegenius @coreperformance Wednesday, April 4, 12
3. @newfoo #BDLCPOF •Why Backbone? •What is Backbone? •Example App Wednesday, April 4, 12
4. @newfoo 5ZQJDBM
   K2
   1SPKFDU
   BU
   UIF
   &OE Wednesday, April 4, 12
5. @newfoo 8IZ
   #BDLCPOF
   Even this can get out of hand courtesy of http://james.padolsey.com/javascript/things-you-may-not-know-about-jquery/ Wednesday, April 4, 12
6. @newfoo 8IZ
   #BDLCPOF
   •Callbacks take effort to organize •Hard to maintain •Views & app logic intermingled Wednesday, April 4, 12
7. @newfoo 8IZ
   /PU
   +4
   Wednesday, April 4, 12
8. @newfoo 8IZ
   /PU
   +4
   •Ember (aka SproutCore 2.0) •ExtJS (or Sencha Touch) •Knockout JS Wednesday, April 4, 12
9. @newfoo #BDLCPOF`T
   7JFX •Lightweight MVC •or Model View ViewController •Provides simple framework •Easy to learn (1400 SLOC) Wednesday, April 4, 12
10. @newfoo .PEFMT •Store stuff for later •Validate changes •Listen for changes Wednesday, April 4, 12
11. @newfoo .PEFMT tf.models.Tweet = Backbone.Model.extend({ defaults: { from_user: "tweetflow", from_user_name: "TweetFlow", text: "Test Tweet" } }); var tweet = new tf.models.Tweet(); tweet.set({“from_user”: “yoda”}); tweet.get(“from_user”); => “yoda” Wednesday, April 4, 12
12. @newfoo 7JFXT •Make these with HTML •Can be in templates or right in HTML Wednesday, April 4, 12
13. @newfoo 7JFXT <script id="tweet-tpl" type="text/template"> <img src="<%= profile_image_url %>" /> <h2><%= from_user_name %></h2> <h3>@<%= from_user %></h3> <p><%= text %></p> </script> var tpl = _.template($(“#tweet-tpl”).html()); tpl({“text”: “A tweet”, ...}) => rendered template Wednesday, April 4, 12
14. @newfoo $POUSPMMFST
    (MVF Wednesday, April 4, 12
15. @newfoo $POUSPMMFST •(Backbone.View) •A ViewController •The Glue between •Can organize views •React to events Wednesday, April 4, 12
16. @newfoo #BDLCPOF7JFXT views.TweetItemView = Backbone.View.extend({ el: 'li', template: tpl('tweet-item-tpl'), render: function() { this.el = this.template(this.model.toJSON()); return this; } }); var tweet = new tf.models.Tweet({ ... }); var tweetItem = new views.TweetItemView({ model: tweet }); $(“#container”).append(tweetItem.render().el); Wednesday, April 4, 12
17. @newfoo "
    #BDLCPOF
    "QQ
    4USVDUVSF •jQuery / Zepto (for mobile) •Underscore •Backbone •Your own JS / Backbone Extensions Wednesday, April 4, 12
18. @newfoo "QQ
    0CKFDU
    .PEFM Wednesday, April 4, 12
19. @newfoo .PEFMT Wednesday, April 4, 12
20. @newfoo 7JFXT Wednesday, April 4, 12
21. @newfoo 7JFXT Wednesday, April 4, 12
22. @newfoo $POUSPMMFST Wednesday, April 4, 12
23. @newfoo $POUSPMMFST Wednesday, April 4, 12
24. @newfoo 3PVUFS Wednesday, April 4, 12
25. @newfoo 'JOBM
    5IPVHIUT •Lightweight JS MVC Framework •Build expertise quickly •Plenty of Extensions Wednesday, April 4, 12
26. @newfoo 5IF
    &OE jconnell@newfoo.net http://newfoo.net Wednesday, April 4, 12