SproutCore: Amber

8,029 views

Published on

Slides from my SproutCore Meetup presentation on Amber, delivered 11/23/2010.

Published in: Technology

SproutCore: Amber

  1. 1. SproutCore
  2. 2. Why?
  3. 3. building large apps in jQuery
  4. 4. ? ? View (DOM Manipulation)
  5. 5. Model (.data) Controller (.bind) View (DOM Manipulation)
  6. 6. jQuery jQuery jQuery
  7. 7. Following 187
  8. 8. Following 188
  9. 9. $(".follow-me").live("click", function() { var link = $(this).parent().prev(); var count = parseInt($("#following span.count").text()); var newLink = $("<li class='user'>") .append(link.clone()); $("#following").prepend(newLink); $("#following span.count").text(count + 1); });
  10. 10. D E F G Following 187 Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber
  11. 11. D E F G Following 187 Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber
  12. 12. Edge cases Start with less than 4 D E F Following 187 Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber
  13. 13. Edge cases Start with less than 4 Unfollowing A D E F Following 188 Who to follow A wycats · Unfollow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber
  14. 14. What's wrong?
  15. 15. Views need to know about each other
  16. 16. There are lots of views
  17. 17. There are lots of views
  18. 18. More complex apps == more spaghetti
  19. 19. What's the right way?
  20. 20. Model objects
  21. 21. User guid username gravatar isFollowed
  22. 22. self- contained views
  23. 23. D E F G Following 187 following.length following[N] [1][0] [2] [3]
  24. 24. Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber A.isFollowed B.isFollowed C.isFollowed users [0] [1] [2]
  25. 25. D E F G Following 187 following Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber recommendations
  26. 26. wired together by the page
  27. 27. Twitter.following User isFollowedChanged: function() { var followed = this.get('isFollowed'); if(followed) { Twitter.following.unshiftObject(this); } else { Twitter.following.removeObject(this); } }.observes('isFollowed') D E F G Following 187 following Users
  28. 28. Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber recommendations Twitter.recommendations Users
  29. 29. Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber recommendations Twitter.recommendations Users click => user.set('isFollowed', true)
  30. 30. What's Happening Here?
  31. 31. D E F G Following 187 following Who to follow A wycats · Follow Yehuda Katz B okito · Follow Charles Jolley C wifelette · Follow Leah Silber recommendations Totally Isolated Views
  32. 32. Totally Isolated Models User guid username gravatar isFollowed isFollowedChanged
  33. 33. Glued Together By the App SC.MainPage.append({ pickFollowers: Twitter.PickFollowers.design({ recommendationsBinding: "Twitter.recommendations" }), listFollowers: Twitter.FollowerList.design({ followingBinding: "Twitter.following" }) });
  34. 34. Views?
  35. 35. SC.TemplateView
  36. 36. Twitter.FollowersList = SC.TemplateView.extend({ // display property following: [], template: "followers_list", });
  37. 37. creates render method for you
  38. 38. <ul> {{#bind following}} <li data-guid="{{guid}}"> <a href="#!/{{username}}"> <img src="{{gravatar}}" /> </a> </li> {{/bind}} </ul>
  39. 39. Mustache++
  40. 40. Handlebars.js
  41. 41. {{#bind following}}
  42. 42. “Listen to changes in the following Array. If an element is added, render a new <li>. If an element is removed, remove it.
  43. 43. Syntax and impl are a work in progress
  44. 44. Works for simple properties
  45. 45. <div class="post"> <h1>{{bind title}}</h1> <div class="body">{{bind body}}</div> </div>
  46. 46. What about getting remote data?
  47. 47. Twitter.following = []; $.getJSON("/following", function(json) { var users = json.users.map(function(post) { return Twitter.User.create(post); }); Twitter.set('following', users); });
  48. 48. Twitter.User?
  49. 49. Twitter.User = SC.Object.extend({ // documentation isFollowed: false, username: null, gravatar: null, isFollowedChanged: function() { var followed = this.get('isFollowed'); if(followed) { Twitter.following.unshiftObject(this); } else { Twitter.following.removeObject(this); } }.observes('isFollowed') });
  50. 50. To Recap
  51. 51. Benefits: Isolation
  52. 52. $(".follow-me").live("click", function() { var link = $(this).parent().prev(); var count = parseInt($("#following span.count").text()); var newLink = $("<li class='user'>") .append(link.clone()); $("#following").prepend(newLink); $("#following span.count").text(count + 1); });
  53. 53. $(".follow-me").live("click", function() { var link = $(this).parent().prev(); var count = parseInt($("#following span.count").text()); var newLink = $("<li class='user'>") .append(link.clone()); $("#following").prepend(newLink); $("#following span.count").text(count + 1); }); X
  54. 54. Makes totally rewriting parts of the view feasible
  55. 55. Makes totally rewriting parts of the view trivial
  56. 56. Keeps data model concerns out of the view
  57. 57. Makes revising large areas of the view simpler
  58. 58. I Haven't Touched on Controllers
  59. 59. This is a very simple example
  60. 60. Controllers add view concerns to objects
  61. 61. e.g. ArrayController has 'selection'
  62. 62. Mockup Ideas
  63. 63. amber-mockups.strobeapp.com
  64. 64. Thanks!

×