Making Ajax Sexy, JSConf 2010
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Making Ajax Sexy, JSConf 2010

  • 9,682 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,682
On Slideshare
7,212
From Embeds
2,470
Number of Embeds
31

Actions

Shares
Downloads
167
Comments
1
Likes
11

Embeds 2,470

http://www.webresourcesdepot.com 1,270
http://www.sexyjs.com 889
http://sexyjs.com 85
http://feeds2.feedburner.com 59
http://www.slideshare.net 39
http://onwebdev.blogspot.com 36
http://feeds.feedburner.com 14
http://sandbox.dev 14
http://static.slidesharecdn.com 13
http://translate.googleusercontent.com 11
http://www.linkedin.com 8
http://www.webresources.in.th 6
http://xss.yandex.net 3
http://www.hanrss.com 3
http://elsterama.com 2
http://escjuanbalberdi.edu.ar 2
http://www.lmodules.com 2
http://xianguo.com 1
http://onwebdev.blogspot.com.es 1
http://kenosha-web-design.info 1
http://www.coolcreation.co.uk 1
http://www.zimbio.com 1
http://video.google.com 1
http://localhost 1
http://localhost:8080 1
http://webcache.googleusercontent.com 1
http://www.escjuanbalberdi.edu.ar 1
http://www.elsterama.com 1
http://127.0.0.1:8795 1
applewebdata://EFC1EF10-F394-4221-BA52-F4BA647D967D 1
http://webresourcesdepot.com 1

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!