SproutCore: Amber

Download SproutCore: Amber

Post on 18-May-2015

7.350 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

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