A look at Sequential Ajax patterns and the Sexy.js library

1. Making Ajax Sexy
A Look at Sequential Ajax Patterns

2. View source
http://github.com/furf/Sexy

3. Go to website…
http://sexyjs.com

6. NSFW?

7. ?SFW

9. But really, “assholes?”

11. WARNING
This presentation contains a very bawdy joke.

12. WARNING
If very bawdy jokes are the sort of thing that
offend you or make you uncomfortable in the
trousers, you might want to leave now.

13. David Furfero
@furf UI Engineer, MLB.com

14. SERIOUSLY
Go, now.

15. YOU  DATA

16. Ajax makes killer web apps possible.

18. Sequential Ajax makes Ajax killer.

19. Sequential Ajax makes Ajax killer.

21. Sexy.js makes Sequential Ajax…Sexy!

22. Sexy.js makes Sequential Ajax…Sexy!

24. Sequential Ajax (Sajax)
An Ajax pattern for handling multiple
asynchronous requests while maintaining
proper callback execution order.

25. Goals of Sequential Ajax (Sajax)
• Facilitate combination and manipulation of data from
multiple sources
• Speed loading of data, scripts, stylesheets using parallel
asynchronous HTTP requests
• Speed execution of callbacks by allowing them to fire as
soon as all previous data is available
• Fun

26. Three Flavors of Sajax
• Serial request / serial response
• Parallel request / random response
• Parallel request / serial response

27. In a perfect world…

42. In a world, where time waits for
no man…

43. or his data…

59. Sequential Ajax Anti-Patterns

60. Serial Request / Serial Response
// Request an article
$.getJSON('/article/1.json', function (article) {
// Request the related comments
$.getJSON('/article/1/comments.json', function (comments) {
// Join the data
article.comments = comments;
// Render the article and comments
render(article);
});
});

61. Serial Request /
Serial Response
• Pros
• Relatively readable
• Cons
• Slower
• Nested calls don’t
scale

62. Parallel Request / Random Response
var i = 0, n = 2, article, comments;
$.getJSON('/article/1.json', function (data) {
article = data;
if (++i == n) {
handleComplete();
}
});
$.getJSON('/article/1/comments.json', function (data) {
comments = data;
if (++i == n) {
handleComplete();
}
});
function handleComplete () {
article.comments = comments;
render(article);
}

63. Parallel Request /
Random Response
• Pros
• Faster
• Cons
• Heavier
• Uglier
• Really doesn’t scale

64. Do those patterns look familiar?

65. Meet Sexy.js…

66. Sexy is a jQuery plugin
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods.

67. Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods
JavaScript.

68. Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (Sajax) functionality
and a sleek facade to jQuery’s native Ajax methods
JavaScript (using jQuery’s native Ajax methods).

69. Sexy is classy
new Sexy() creates a Sexy instance

70. Sexy is classy
var s = new Sexy();
s.json(articleUrl, callback)
.json(commentsUrl, callback);

71. Sexy is the new Sexy
Sexy() also creates a Sexy instance

72. Sexy is the new Sexy
Sexy()
.json(articleUrl, callback)
.json(commentsUrl, callback);

73. Naked Sexy
/**
* Constructs a new Sexy instance
*/
function Sexy (cfg) {
/**
* Allow instantiation without new keyword
*/
if (!(this instanceof Sexy)) {
return new Sexy(cfg);
}
this.cfgs = [];
this.setup(cfg);
}

74. Sexy is full of surprises
Sexy.fn() also creates a Sexy instance!

75. Sexy is full of surprises
Sexy
.json(articleUrl, callback)
.json(commentsUrl, callback);

76. Naked Sexy
/**
* Add sexier static methods
*/
function addStaticMethod (method) {
Sexy[method] = function () {
return Sexy.prototype[method].apply(new Sexy(), arguments);
};
}
for (i in Sexy.prototype) {
addStaticMethod(i);
}

77. I WASN’T KIDDING!
There is a bawdy joke coming up VERY soon!

78. I WASN’T KIDDING!
If you are pregnant, have a serious heart
condition, or giggle uncontrollably at the word
“titillate”, you may want to hurry to Track A.

79. Expressive, Chainable API

80. Sexy is Your Syntactic Sugar Mama
An expressive method for each supported data type:
html (url, callback)
json (url, callback)
jsonp (url, callback)
script / js (url, callback)
text (url, callback)
xml (url, callback)
style / css (url, callback)

81. Sexy is Patient
Requests can be deferred using an optional 2nd argument.
html (url, defer, callback)
json (url, defer, callback)
jsonp (url, defer, callback)
script / js (url, defer, callback)
text (url, defer, callback)
xml (url, defer, callback)
style / css (url, defer, callback)

82. Sexy is Flexible
Each method can also take a jQuery settings object.
html (settings)
json (settings)
jsonp (settings)
script / js (settings)
text (settings)
xml (settings)
style / css (settings)

83. callback (data, previous, next, status)
Each callback receives four arguments:
data response data of the current request
previous return value of the previous callback
next Ajax settings of the next request
status result status of the current request

84. Sexy Sequential Ajax Patterns

85. Sexy
Sexy
.json({
url: '/article/1.json',
success: function (article) {
return article;
}
})
.json({
url: '/article/1/comments.json',
success: function (comments, article) {
article.comments = comments;
render(article);
}
});

86. Passing Data with Callbacks
Sexy
.json({
url: '/article/1.json',
success: function (article, previous, next, status) {
return article;
}
})
.json({
url: '/article/1/comments.json',
success: function (comments, article, next, status) {
article.comments = comments;
render(article);
}
});

87. Sexy-er
Sexy
.json('/article/1.json', function (article) {
return article;
})
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

88. Passing Data with Callbacks
Sexy
.json('/article/1.json', function (article) {
return article;
})
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

89. Sexy-est
Sexy
.json('/article/1.json')
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

90. Passing Data with Implicit Callbacks
Sexy
.json('/article/1.json')
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

91. Passing Data with Implicit Callbacks
Sexy
.json('/article/1.json')
.js('jquery.js')
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

92. Slow it Down
Sexy
// Authenticate user
.json({
type: 'POST',
url: 'login',
data: { username: 'furf', password: '2s3xy4u' }
})
// GET article
.json('article/1', true, function (article, previous, nextCfg) {
article.author = 'furf';
nextCfg.data = article;
})
// POST article
.json({
defer: true,
type: 'POST',
url: 'article/1'
})
// De-authenticate user
.json('logout', true);

93. Manage <script> Dependencies
Sexy
.js('jquery.js')
.js('jquery-ui.js')
.js('jquery-ui-i18n.js')
.js('jquery.template.js')
.js('mlb.js')
.js('mlb.tracking.js')
.js('mlb.datagrid.js')
.js('mlb.stats.js')
.js('mlb.stats.util.js')
.js('mlb.stats.widget.js')
.js('mlb.stats.sortableplayers.js', function () {
mlb.stats.SortablePlayers.init();
});

94. A Sexy Cinderella Story

95. Old and Busted
var i = 0, n = 2, article, comments;
$.getJSON('/article/1.json', function (data) {
article = data;
if (++i == n) {
handleComplete();
}
});
$.getJSON('/article/1/comments.json', function (data) {
comments = data;
if (++i == n) {
handleComplete();
}
});
function handleComplete () {
article.comments = comments;
render(article);
}

96. Your Royal Hotness
Sexy
.json('/article/1.json')
.json('/article/1/comments.json', function (comments, article) {
article.comments = comments;
render(article);
});

97. The 4th Stage of Grief
ACCEPTANCE
There’s no way out now. Strap yourself in.
Accept your fate. The bawdy joke is on its way.

98. Additional Methods

99. setup (settings)
• Configure subsequent requests of a Sexy instance
• Settings can be unset with setup()

100. setup (settings)
Sexy
.setup({
beforeSend: showLoadingIndicator
complete: hideLoadingIndicator
})
.json('article.json', diplayArticle)
.setup()
.json('comments.json', displayComments);

101. Sexy (settings)
Sexy({
beforeSend: showLoadingIndicator
complete: hideLoadingIndicator
})
.json('article.json', diplayArticle)
.setup()
.json('comments.json', displayComments);

102. bundle (url1, url2, ..., callback)
• Client-side JavaScript packaging
• Multiple file, single <script> injection
• Sequence is preserved

103. Why not Sexy.package?

104. JavaScript was too reserved.

105. *groan*

107. :)
I told you it was bawdy!

108. bundle (url1, url2, ..., callback)
• Client-side JavaScript packaging
• Multiple file, single <script> injection
• Sequence is preserved

109. bundle (url1, url2, ..., callback)
Sexy.bundle(
'jquery.js',
'jquery-ui.js',
'jquery-ui-i18n.js',
'jquery.template.js',
'mlb.js',
'mlb.tracking.js',
'mlb.datagrid.js',
'mlb.stats.js',
'mlb.stats.util.js',
'mlb.stats.widget.js',
'mlb.stats.app.sortableplayers.js',
function () {
mlb.stats.app.SortablePlayers.init();
}
);

110. The Kama Sutra of Sexy.js

111. var s = Sexy
.js('jquery.min.js')
.js('jquery.template.min.js')
.css('friends.css')
.text('friend.tpl')
.json('friends.json', function (data, tpl) {
// Send a new request for each friend (executed simultaneously)
$.each(data.friends, function (i, friend) {
s.json(friend.username + '.json', function (friend, friends) {
// Push onto the previously returned array
friends.push(friend);
// Until the last friend, return the augmented array to the next callback
if (i < data.friends.length - 1) {
return friends;
// When we reach the last friend, render the data and insert into the DOM
} else {
$.template(tpl, friends).appendTo('#friends');
}
});
});
// Instantiate the friends array
return [];
});

112. Known Issues
• Unable to detect error events for remote requests
• jsonp (remoteUrl)
• script (remoteUrl)
• style (remoteUrl)
• style (remoteUrl) fires the success callback even if the
request was unsuccessful (ie. 404)

113. Parallel Request / Serial Response
• Pros
• Faster
• Cleaner
• Prettier
• Cons
• Sexy.js adds
1.4Kb–4.6Kb to
your JavaScript
library

114. Parallel Request / Serial Response
• Pros
• Faster
• Cleaner
• Prettier
• Cons
• Sexy.js adds
1.4Kb–4.6Kb to
your JavaScript
library

115. Can’t get enough?
website http://sexyjs.com
slideshow http://www.slideshare.net/furf
download http://github.com/furf/Sexy
twitter @sexyjs or @furf
email furf@furf.com

116. @thanks!
jsconf, voodootikigod, jquery, jeresig,
jaubourg, dimak25, subchild, brandonaaron,
yoni, jsconfeu, getify, maraksquires,
attricetta, and you!