Your SlideShare is downloading. ×
0
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making Ajax Sexy, JSConf 2010

8,207

Published on

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

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,207
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
168
Comments
1
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide





















































































































  • Transcript

    • 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!

    ×