The document discusses the benefits of using a framework like SproutCore for building large, complex web applications. It outlines how SproutCore separates an application into distinct Models, Views, and Controllers. Models manage the application data, Views handle DOM manipulation and display, and Controllers tie everything together. This isolation of concerns makes the code more modular and reusable, preventing views from becoming tangled together ("spaghetti code"). The document provides an example of how SproutCore implements a Twitter-like following feature with isolated, reusable Views, Models, and bindings between them to update automatically on data changes.

1. SproutCore

3. Why?

4. building large apps in jQuery

5. ?
?
View (DOM Manipulation)

6. Model (.data)
Controller (.bind)
View (DOM Manipulation)

7. jQuery
jQuery
jQuery

9. Following 187

10. Following 188

11. $(".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);
});

12. D E F G
Following 187
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber

13. D E F G
Following 187
Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber

14. 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

15. 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

16. What's
wrong?

17. Views need to
know about
each other

18. There are lots of views

19. There are lots of views

20. More complex
apps
==
more spaghetti

21. What's the
right way?

22. Model objects

23. User
guid
username
gravatar
isFollowed

24. self-
contained
views

25. D E F G
Following 187
following.length
following[N]
[1][0] [2] [3]

26. 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]

27. 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

28. wired
together by
the page

29. 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

30. Who to follow
A
wycats · Follow
Yehuda Katz
B
okito · Follow
Charles Jolley
C
wifelette · Follow
Leah Silber
recommendations
Twitter.recommendations
Users

31. 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)

32. What's
Happening
Here?

33. 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

34. Totally
Isolated
Models
User
guid
username
gravatar
isFollowed
isFollowedChanged

35. Glued Together
By the App
SC.MainPage.append({
pickFollowers: Twitter.PickFollowers.design({
recommendationsBinding:
"Twitter.recommendations"
}),
listFollowers: Twitter.FollowerList.design({
followingBinding: "Twitter.following"
})
});

36. Views?

38. SC.TemplateView

39. Twitter.FollowersList = SC.TemplateView.extend({
// display property
following: [],
template: "followers_list",
});

40. creates
render
method for
you

41. <ul>
{{#bind following}}
<li data-guid="{{guid}}">
<a href="#!/{{username}}">
<img src="{{gravatar}}" />
</a>
</li>
{{/bind}}
</ul>

42. Mustache++

43. Handlebars.js

44. {{#bind following}}

45. “Listen to changes in the
following Array. If an
element is added, render a
new <li>. If an element is
removed, remove it.

46. Syntax and
impl are a
work in
progress

47. Works for
simple
properties

48. <div class="post">
<h1>{{bind title}}</h1>
<div class="body">{{bind body}}</div>
</div>

49. What about
getting
remote data?

50. Twitter.following = [];
$.getJSON("/following", function(json) {
var users = json.users.map(function(post) {
return Twitter.User.create(post);
});
Twitter.set('following', users);
});

51. Twitter.User?

52. 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')
});

53. To Recap

54. Benefits:
Isolation

55. $(".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);
});

56. $(".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

57. Makes totally
rewriting
parts of the
view feasible

58. Makes totally
rewriting
parts of the
view trivial

59. Keeps data
model
concerns out
of the view

60. Makes
revising large
areas of the
view simpler

61. I Haven't
Touched on
Controllers

62. This is a very
simple
example

63. Controllers
add view
concerns to
objects

64. e.g.
ArrayController
has 'selection'

65. Mockup Ideas

66. amber-mockups.strobeapp.com

67. Thanks!