0
Making Ajax Sexy
A Look at Sequential Ajax Patterns
View source
http://github.com/furf/Sexy
Go to website…
http://sexyjs.com
NSFW?
?SFW
But really, “assholes?”
WARNING
This presentation contains a very bawdy joke.
WARNING
If very bawdy jokes are the sort of thing that
offend you or make you uncomfortable in the
    trousers, you might...
David Furfero
@furf   UI Engineer, MLB.com
SERIOUSLY
  Go, now.
YOU  DATA
Ajax makes killer web apps possible.
Sequential Ajax makes Ajax killer.
Sequential Ajax makes Ajax killer.
Sexy.js makes Sequential Ajax…Sexy!
Sexy.js makes Sequential Ajax…Sexy!
Sequential Ajax (Sajax)
An Ajax pattern for handling multiple
asynchronous requests while maintaining
proper callback exec...
Goals of Sequential Ajax (Sajax)

• Facilitate combination and manipulation of data from
  multiple sources

• Speed loadi...
Three Flavors of Sajax

• Serial request / serial response
• Parallel request / random response
• Parallel request / seria...
In a perfect world…
In a world, where time waits for
no man…
or his data…
Sequential Ajax Anti-Patterns
Serial Request / Serial Response
// Request an article
$.getJSON('/article/1.json', function (article) {

  // Request the...
Serial Request /
Serial Response

• Pros

  • Relatively readable

• Cons

  • Slower

  • Nested calls don’t
    scale
Parallel Request / Random Response
var i = 0, n = 2, article, comments;

$.getJSON('/article/1.json', function (data) {
  ...
Parallel Request /
Random Response

• Pros

  • Faster

• Cons

  • Heavier

  • Uglier

  • Really doesn’t scale
Do those patterns look familiar?
Meet Sexy.js…
Sexy is a jQuery plugin
A lightweight JavaScript library which provides parallel
request/serial response Sequential Ajax (...
Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential A...
Sexy is a standalone library
A lightweight JavaScript library which provides parallel
request/serial response Sequential A...
Sexy is classy
new Sexy() creates a Sexy instance
Sexy is classy
var s = new Sexy();

s.json(articleUrl, callback)
 .json(commentsUrl, callback);
Sexy is the new Sexy
Sexy() also creates a Sexy instance
Sexy is the new Sexy
Sexy()
  .json(articleUrl, callback)
  .json(commentsUrl, callback);
Naked Sexy
/**
 * Constructs a new Sexy instance
 */
function Sexy (cfg) {

    /**
      * Allow instantiation without ne...
Sexy is full of surprises
Sexy.fn() also creates a Sexy instance!
Sexy is full of surprises
Sexy
  .json(articleUrl, callback)
  .json(commentsUrl, callback);
Naked Sexy
/**
  * Add sexier static methods
  */
function addStaticMethod (method) {
   Sexy[method] = function () {
    ...
I WASN’T KIDDING!
There is a bawdy joke coming up VERY soon!
I WASN’T KIDDING!
   If you are pregnant, have a serious heart
condition, or giggle uncontrollably at the word
 “titillate...
Expressive, Chainable API
Sexy is Your Syntactic Sugar Mama

An expressive method for each supported data type:
html          (url, callback)
json  ...
Sexy is Patient

Requests can be deferred using an optional 2nd argument.
html          (url, defer, callback)
json       ...
Sexy is Flexible

Each method can also take a jQuery settings object.
html          (settings)
json          (settings)
js...
callback (data, previous, next, status)

Each callback receives four arguments:
data          response data of the current...
Sexy Sequential Ajax Patterns
Sexy
Sexy
  .json({
     url: '/article/1.json',
     success: function (article) {
       return article;
     }
  })
  ....
Passing Data with Callbacks
Sexy
  .json({
     url: '/article/1.json',
     success: function (article, previous, next, s...
Sexy-er
Sexy
  .json('/article/1.json', function (article) {
     return article;
  })
  .json('/article/1/comments.json',...
Passing Data with Callbacks
Sexy
  .json('/article/1.json', function (article) {
     return article;
  })
  .json('/artic...
Sexy-est
Sexy
  .json('/article/1.json')
  .json('/article/1/comments.json', function (comments, article) {
     article.c...
Passing Data with Implicit Callbacks
Sexy
  .json('/article/1.json')
  .json('/article/1/comments.json', function (comment...
Passing Data with Implicit Callbacks
Sexy
  .json('/article/1.json')
  .js('jquery.js')
  .json('/article/1/comments.json'...
Slow it Down
Sexy
  // Authenticate user
  .json({
     type: 'POST',
     url: 'login',
     data: { username: 'furf', pa...
Manage <script> Dependencies
Sexy
  .js('jquery.js')
  .js('jquery-ui.js')
  .js('jquery-ui-i18n.js')
  .js('jquery.templa...
A Sexy Cinderella Story
Old and Busted
var i = 0, n = 2, article, comments;

$.getJSON('/article/1.json', function (data) {
  article = data;
  if...
Your Royal Hotness
Sexy
  .json('/article/1.json')
  .json('/article/1/comments.json', function (comments, article) {
    ...
The 4th Stage of Grief
          ACCEPTANCE
  There’s no way out now. Strap yourself in.
Accept your fate. The bawdy joke ...
Additional Methods
setup (settings)

• Configure subsequent requests of a Sexy instance

• Settings can be unset with setup()
setup (settings)
Sexy
  .setup({
     beforeSend: showLoadingIndicator
     complete:   hideLoadingIndicator
  })
  .json(...
Sexy (settings)
Sexy({
     beforeSend: showLoadingIndicator
     complete:   hideLoadingIndicator
  })
  .json('article.j...
bundle (url1, url2, ..., callback)

• Client-side JavaScript packaging

• Multiple file, single <script> injection

• Seque...
Why not Sexy.package?
JavaScript was too reserved.
*groan*
:)
I told you it was bawdy!
bundle (url1, url2, ..., callback)

• Client-side JavaScript packaging

• Multiple file, single <script> injection

• Seque...
bundle (url1, url2, ..., callback)
Sexy.bundle(
   'jquery.js',
   'jquery-ui.js',
   'jquery-ui-i18n.js',
   'jquery.temp...
The Kama Sutra of Sexy.js
var s = Sexy
  .js('jquery.min.js')
  .js('jquery.template.min.js')
  .css('friends.css')
  .text('friend.tpl')
  .json('f...
Known Issues

• Unable to detect error events for remote requests

  • jsonp (remoteUrl)

  • script (remoteUrl)

  • styl...
Parallel Request / Serial Response

• Pros

  • Faster

  • Cleaner

  • Prettier

• Cons

  • Sexy.js adds
    1.4Kb–4.6K...
Parallel Request / Serial Response

• Pros

  • Faster

  • Cleaner

  • Prettier

• Cons

  • Sexy.js adds
    1.4Kb–4.6K...
Can’t get enough?

website      http://sexyjs.com
slideshow    http://www.slideshare.net/furf
download     http://github.c...
@thanks!
jsconf, voodootikigod, jquery, jeresig,
jaubourg, dimak25, subchild, brandonaaron,
yoni, jsconfeu, getify, maraks...
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Making Ajax Sexy, JSConf 2010
Upcoming SlideShare
Loading in...5
×

Making Ajax Sexy, JSConf 2010

8,258

Published on

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

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,258
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
168
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide





















































































































  • Transcript of "Making Ajax Sexy, JSConf 2010"

    1. 1. Making Ajax Sexy A Look at Sequential Ajax Patterns
    2. 2. View source http://github.com/furf/Sexy
    3. 3. Go to website… http://sexyjs.com
    4. 4. NSFW?
    5. 5. ?SFW
    6. 6. But really, “assholes?”
    7. 7. WARNING This presentation contains a very bawdy joke.
    8. 8. 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.
    9. 9. David Furfero @furf UI Engineer, MLB.com
    10. 10. SERIOUSLY Go, now.
    11. 11. YOU  DATA
    12. 12. Ajax makes killer web apps possible.
    13. 13. Sequential Ajax makes Ajax killer.
    14. 14. Sequential Ajax makes Ajax killer.
    15. 15. Sexy.js makes Sequential Ajax…Sexy!
    16. 16. Sexy.js makes Sequential Ajax…Sexy!
    17. 17. Sequential Ajax (Sajax) An Ajax pattern for handling multiple asynchronous requests while maintaining proper callback execution order.
    18. 18. 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
    19. 19. Three Flavors of Sajax • Serial request / serial response • Parallel request / random response • Parallel request / serial response
    20. 20. In a perfect world…
    21. 21. In a world, where time waits for no man…
    22. 22. or his data…
    23. 23. Sequential Ajax Anti-Patterns
    24. 24. 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); }); });
    25. 25. Serial Request / Serial Response • Pros • Relatively readable • Cons • Slower • Nested calls don’t scale
    26. 26. 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); }
    27. 27. Parallel Request / Random Response • Pros • Faster • Cons • Heavier • Uglier • Really doesn’t scale
    28. 28. Do those patterns look familiar?
    29. 29. Meet Sexy.js…
    30. 30. 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.
    31. 31. 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.
    32. 32. 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).
    33. 33. Sexy is classy new Sexy() creates a Sexy instance
    34. 34. Sexy is classy var s = new Sexy(); s.json(articleUrl, callback) .json(commentsUrl, callback);
    35. 35. Sexy is the new Sexy Sexy() also creates a Sexy instance
    36. 36. Sexy is the new Sexy Sexy() .json(articleUrl, callback) .json(commentsUrl, callback);
    37. 37. 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); }
    38. 38. Sexy is full of surprises Sexy.fn() also creates a Sexy instance!
    39. 39. Sexy is full of surprises Sexy .json(articleUrl, callback) .json(commentsUrl, callback);
    40. 40. 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); }
    41. 41. I WASN’T KIDDING! There is a bawdy joke coming up VERY soon!
    42. 42. 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.
    43. 43. Expressive, Chainable API
    44. 44. 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)
    45. 45. 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)
    46. 46. 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)
    47. 47. 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
    48. 48. Sexy Sequential Ajax Patterns
    49. 49. 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); } });
    50. 50. 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); } });
    51. 51. Sexy-er Sexy .json('/article/1.json', function (article) { return article; }) .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    52. 52. 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); });
    53. 53. Sexy-est Sexy .json('/article/1.json') .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    54. 54. Passing Data with Implicit Callbacks Sexy .json('/article/1.json') .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    55. 55. 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); });
    56. 56. 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);
    57. 57. 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(); });
    58. 58. A Sexy Cinderella Story
    59. 59. 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); }
    60. 60. Your Royal Hotness Sexy .json('/article/1.json') .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    61. 61. 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.
    62. 62. Additional Methods
    63. 63. setup (settings) • Configure subsequent requests of a Sexy instance • Settings can be unset with setup()
    64. 64. setup (settings) Sexy .setup({ beforeSend: showLoadingIndicator complete: hideLoadingIndicator }) .json('article.json', diplayArticle) .setup() .json('comments.json', displayComments);
    65. 65. Sexy (settings) Sexy({ beforeSend: showLoadingIndicator complete: hideLoadingIndicator }) .json('article.json', diplayArticle) .setup() .json('comments.json', displayComments);
    66. 66. bundle (url1, url2, ..., callback) • Client-side JavaScript packaging • Multiple file, single <script> injection • Sequence is preserved
    67. 67. Why not Sexy.package?
    68. 68. JavaScript was too reserved.
    69. 69. *groan*
    70. 70. :) I told you it was bawdy!
    71. 71. bundle (url1, url2, ..., callback) • Client-side JavaScript packaging • Multiple file, single <script> injection • Sequence is preserved
    72. 72. 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(); } );
    73. 73. The Kama Sutra of Sexy.js
    74. 74. 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 []; });
    75. 75. 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)
    76. 76. Parallel Request / Serial Response • Pros • Faster • Cleaner • Prettier • Cons • Sexy.js adds 1.4Kb–4.6Kb to your JavaScript library
    77. 77. Parallel Request / Serial Response • Pros • Faster • Cleaner • Prettier • Cons • Sexy.js adds 1.4Kb–4.6Kb to your JavaScript library
    78. 78. 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
    79. 79. @thanks! jsconf, voodootikigod, jquery, jeresig, jaubourg, dimak25, subchild, brandonaaron, yoni, jsconfeu, getify, maraksquires, attricetta, and you!
    1. A particular slide catching your eye?

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

    ×