SproutCore
Why?
building large apps in jQuery
?
?
View (DOM Manipulation)
Model (.data)
Controller (.bind)
View (DOM Manipulation)
jQuery
jQuery
jQuery
Following 187
Following 188
$(".follow-me").live("click", function() {
var link = $(this).parent().prev();
var count =
parseInt($("#following span.cou...
D E F G
Following 187
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Lea...
D E F G
Following 187
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Lea...
Edge cases
Start with less than 4
D E F
Following 187
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles...
Edge cases
Start with less than 4
Unfollowing
A D E F
Following 188
Who to follow
A
wycats · Unfollow
Yehuda Katz
B
okito ...
What's
wrong?
Views need to
know about
each other
There are lots of views
There are lots of views
More complex
apps
==
more spaghetti
What's the
right way?
Model objects
User
guid
username
gravatar
isFollowed
self-
contained
views
D E F G
Following 187
following.length
following[N]
[1][0] [2] [3]
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber
A.isFollowed
...
D E F G
Following 187
following
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · ...
wired
together by
the page
Twitter.following
User
isFollowedChanged: function() {
var followed = this.get('isFollowed');
if(followed) {
Twitter.follo...
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber
recommendatio...
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber
recommendatio...
What's
Happening
Here?
D E F G
Following 187
following
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · ...
Totally
Isolated
Models
User
guid
username
gravatar
isFollowed
isFollowedChanged
Glued Together
By the App
SC.MainPage.append({
pickFollowers: Twitter.PickFollowers.design({
recommendationsBinding:
"Twit...
Views?
SC.TemplateView
Twitter.FollowersList = SC.TemplateView.extend({
// display property
following: [],
template: "followers_list",
});
creates
render
method for
you
<ul>
{{#bind following}}
<li data-guid="{{guid}}">
<a href="#!/{{username}}">
<img src="{{gravatar}}" />
</a>
</li>
{{/bin...
Mustache++
Handlebars.js
{{#bind following}}
“Listen to changes in the
following Array. If an
element is added, render a
new <li>. If an element is
removed, remove it.
Syntax and
impl are a
work in
progress
Works for
simple
properties
<div class="post">
<h1>{{bind title}}</h1>
<div class="body">{{bind body}}</div>
</div>
What about
getting
remote data?
Twitter.following = [];
$.getJSON("/following", function(json) {
var users = json.users.map(function(post) {
return Twitte...
Twitter.User?
Twitter.User = SC.Object.extend({
// documentation
isFollowed: false,
username: null,
gravatar: null,
isFollowedChanged: f...
To Recap
Benefits:
Isolation
$(".follow-me").live("click", function() {
var link = $(this).parent().prev();
var count =
parseInt($("#following span.cou...
$(".follow-me").live("click", function() {
var link = $(this).parent().prev();
var count =
parseInt($("#following span.cou...
Makes totally
rewriting
parts of the
view feasible
Makes totally
rewriting
parts of the
view trivial
Keeps data
model
concerns out
of the view
Makes
revising large
areas of the
view simpler
I Haven't
Touched on
Controllers
This is a very
simple
example
Controllers
add view
concerns to
objects
e.g.
ArrayController
has 'selection'
Mockup Ideas
amber-mockups.strobeapp.com
Thanks!
SproutCore: Amber
SproutCore: Amber
SproutCore: Amber
Upcoming SlideShare
Loading in...5
×

SproutCore: Amber

7,410

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,410
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
86
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×