Making Ajax Sexy, JSConf 2010

10,456 views
9,036 views

Published on

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

Published in: Technology
4 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
10,456
On SlideShare
0
From Embeds
0
Number of Embeds
2,489
Actions
Shares
0
Downloads
173
Comments
4
Likes
16
Embeds 0
No embeds

No notes for slide





















































































































  • Making Ajax Sexy, JSConf 2010

    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
    4. NSFW?
    5. ?SFW
    6. But really, “assholes?”
    7. WARNING This presentation contains a very bawdy joke.
    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. David Furfero @furf UI Engineer, MLB.com
    10. SERIOUSLY Go, now.
    11. YOU  DATA
    12. Ajax makes killer web apps possible.
    13. Sequential Ajax makes Ajax killer.
    14. Sequential Ajax makes Ajax killer.
    15. Sexy.js makes Sequential Ajax…Sexy!
    16. Sexy.js makes Sequential Ajax…Sexy!
    17. Sequential Ajax (Sajax) An Ajax pattern for handling multiple asynchronous requests while maintaining proper callback execution order.
    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. Three Flavors of Sajax • Serial request / serial response • Parallel request / random response • Parallel request / serial response
    20. In a perfect world…
    21. In a world, where time waits for no man…
    22. or his data…
    23. Sequential Ajax Anti-Patterns
    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. Serial Request / Serial Response • Pros • Relatively readable • Cons • Slower • Nested calls don’t scale
    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. Parallel Request / Random Response • Pros • Faster • Cons • Heavier • Uglier • Really doesn’t scale
    28. Do those patterns look familiar?
    29. Meet Sexy.js…
    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. 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. 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. Sexy is classy new Sexy() creates a Sexy instance
    34. Sexy is classy var s = new Sexy(); s.json(articleUrl, callback) .json(commentsUrl, callback);
    35. Sexy is the new Sexy Sexy() also creates a Sexy instance
    36. Sexy is the new Sexy Sexy() .json(articleUrl, callback) .json(commentsUrl, callback);
    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. Sexy is full of surprises Sexy.fn() also creates a Sexy instance!
    39. Sexy is full of surprises Sexy .json(articleUrl, callback) .json(commentsUrl, callback);
    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. I WASN’T KIDDING! There is a bawdy joke coming up VERY soon!
    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. Expressive, Chainable API
    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. 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. 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. 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. Sexy Sequential Ajax Patterns
    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. 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. 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. 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. Sexy-est Sexy .json('/article/1.json') .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    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. 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. 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. 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. A Sexy Cinderella Story
    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. Your Royal Hotness Sexy .json('/article/1.json') .json('/article/1/comments.json', function (comments, article) { article.comments = comments; render(article); });
    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. Additional Methods
    63. setup (settings) • Configure subsequent requests of a Sexy instance • Settings can be unset with setup()
    64. setup (settings) Sexy .setup({ beforeSend: showLoadingIndicator complete: hideLoadingIndicator }) .json('article.json', diplayArticle) .setup() .json('comments.json', displayComments);
    65. Sexy (settings) Sexy({ beforeSend: showLoadingIndicator complete: hideLoadingIndicator }) .json('article.json', diplayArticle) .setup() .json('comments.json', displayComments);
    66. bundle (url1, url2, ..., callback) • Client-side JavaScript packaging • Multiple file, single <script> injection • Sequence is preserved
    67. Why not Sexy.package?
    68. JavaScript was too reserved.
    69. *groan*
    70. :) I told you it was bawdy!
    71. bundle (url1, url2, ..., callback) • Client-side JavaScript packaging • Multiple file, single <script> injection • Sequence is preserved
    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. The Kama Sutra of Sexy.js
    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. 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. Parallel Request / Serial Response • Pros • Faster • Cleaner • Prettier • Cons • Sexy.js adds 1.4Kb–4.6Kb to your JavaScript library
    77. Parallel Request / Serial Response • Pros • Faster • Cleaner • Prettier • Cons • Sexy.js adds 1.4Kb–4.6Kb to your JavaScript library
    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. @thanks! jsconf, voodootikigod, jquery, jeresig, jaubourg, dimak25, subchild, brandonaaron, yoni, jsconfeu, getify, maraksquires, attricetta, and you!

    ×