Sexy.js: A Sequential Ajax (Sajax) library for jQuery

0 views
3,685 views

Published on

An introduction to Sexy.js: a lightweight JavaScript library which provides enhanced Sequential Ajax (Sajax) functionality and a sleek facade to jQuery’s native Ajax methods.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
































































  • Sexy.js: A Sequential Ajax (Sajax) library for jQuery

    1. 1. Sexy.js Dave Furfero UI Engineer, MLB.com
    2. 2. Sexy.js Slideshow http://www.slideshare.net/furf
    3. 3. Sexy.js A lightweight JavaScript library which provides enhanced Sequential Ajax (Sajax) functionality and a sleek facade to jQuery’s native Ajax methods.
    4. 4. Sexy.js Facilitates combination and manipulation of data from multiple sources Speeds loading of scripts, stylesheets, and data using parallel asynchronous HTTP requests
    5. 5. Ugly.js $.getJSON('articles.json', function (articles) { $.getJSON('comments.json', function (comments) { $.getJSON('ratings.json', function (ratings) { $.each(comments, function (i, comment) { articles[comment.articleId].comments.push(comment); }); $.each(ratings, function (i, rating) { articles[rating.articleId].rating = rating; }); }); }); });
    6. 6. Sexy.js Sexy .json('articles.json') .json('comments.json', function (comments, status, articles) { $.each(comments, function (i, comment) { articles[comment.articleId].comments.push(comment); }); return articles; }) .json('ratings.json', function (ratings, status, articles) { $.each(ratings, function (i, rating) { articles[rating.articleId].rating = rating; }); });
    7. 7. Ugly.js <script src="/js/jquery.template.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/comments.css" type="text/css"/> <script type="text/javascript"> $.get('comments.tpl', function (tpl) { $.getJSON('comments.json', function (data) { $.template(tpl, data).appendTo('#comments'); }); }); </script>
    8. 8. Sexy.js <script type="text/javascript"> Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl') .json('comments.json', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); }); </script>
    9. 9. Sexy.js Enhanced AJAX Functionality
    10. 10. Sequential Ajax (Sajax) Simultaneous request/sequential response Ajax Each successive callback receives the return value of the previous callback as an additional argument
    11. 11. Sexy.js Expressive, Chainable API
    12. 12. Sexy.js API Core Methods html (url, callback) json (url, callback) jsonp (url, callback) script/js (url, callback) style/css (url, callback) text (url, callback) xml (url, callback)
    13. 13. Sexy.js API Core Methods html (url, callback) html (settings) json (url, callback) json (settings) jsonp (url, callback) jsonp (settings) script/js (url, callback) script/js (settings) style/css (url, callback) style/css (settings) text (url, callback) text (settings) xml (url, callback) xml (settings)
    14. 14. Sexy.js API callback (data, status, previous) Each callback receives three arguments: data status previous - the return value of the previous callback (considering a fourth) next or this
    15. 15. Sexy.js API Additional Methods setup (settings) Similar to jQuery.ajaxSetup, but limited to subsequent calls of a Sexy instance Can be unset with setup() bundle (url1, url2, ..., callback) Client-side JavaScript packaging Multiple file, single <script> injection Sequence is preserved
    16. 16. Using Sexy.js Sexy
    17. 17. Using Sexy.js Loading JavaScripts Sexy .js('jquery.template.min.js')
    18. 18. Using Sexy.js Loading Stylesheets (local only) Sexy .js('jquery.template.min.js') .css('comments.css')
    19. 19. Using Sexy.js Loading Stylesheets (local only) Sexy .js('jquery.template.min.js') .css('comments.css')
    20. 20. Using Sexy.js Loading Data Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; })
    21. 21. Using Sexy.js Loading Data Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; }) .json('comments.json', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    22. 22. Using Sexy.js Custom Ajax Settings Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; }) .json({ url: 'comments.json', data: { article_id: 123, }, success: function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); } });
    23. 23. Using Sexy.js Passing Data with Callbacks Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; }) .json('comments.json?article_id=123', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    24. 24. Using Sexy.js Implicit Callbacks Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; }) .json('comments.json?article_id=123', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    25. 25. Using Sexy.js Implicit Callbacks Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; }) .json('comments.json?article_id=123', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    26. 26. Using Sexy.js Implicit Callbacks, Non-Data Types Sexy .css('comments.css') .text('comments.tpl') .js('jquery.template.min.js', function (data, status, previous) { return previous; }) .json('comments.json?article_id=123', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    27. 27. Using Sexy.js Implicit Callbacks, Non-Data Types Sexy .css('comments.css') .text('comments.tpl') .js('jquery.template.min.js') .json('comments.json?article_id=123', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    28. 28. Using Sexy.js Configuring Sexy.js Sexy .setup({ cache: true }) .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl') .json('comments.json', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    29. 29. Using Sexy.js Configuring Sexy.js Sexy({ cache: true }) .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl') .json('comments.json', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    30. 30. Using Sexy.js Configuring Sexy.js Sexy({ cache: true }) .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl') .setup({ cache: false }) .json('comments.json', function (data, status, tpl) { $.template(tpl, data).appendTo('#comments'); });
    31. 31. Using Sexy.js Bundling JavaScripts Sexy .bundle( '/js/bam.js', ‘/js/bam.datagrid.js', ‘/js/bam.stats.js', ‘/js/bam.stats.widget.js', ‘/js/bam.stats.widget.leagueSelector.js', ‘/js/bam.stats.app.js', ‘/js/bam.stats.app.sortablePlayerList.js' );
    32. 32. Using Sexy.js Bundling JavaScripts Sexy .bundle( '/js/bam.js', ‘/js/bam.datagrid.js', ‘/js/bam.stats.js', ‘/js/bam.stats.widget.js', ‘/js/bam.stats.widget.leagueSelector.js', ‘/js/bam.stats.app.js', ‘/js/bam.stats.app.sortablePlayerList.js', function (src) { SortablePlayerList.init(); } );
    33. 33. Known Issues Unable to detect error events for remote requests jsonp (remoteUrl) script (remoteUrl) style (remoteUrl)* *style (remoteUrl) will actually fire success event even if load was unsuccessful (ie. 404)
    34. 34. Sexy.js Enhanced Ajax functionality Expressive, chainable API Lightweight (1.3KB compressed)
    35. 35. Thanks! Slideshow: http://www.slideshare.net/furf URL: http://sexyjs.com Demo: http://sexyjs.com/demos/comments Download: http:github.com/furf/Sexy Twitter: @sexyjs E-mail: furf@furf.com
    36. 36. But wait... there’s more!
    37. 37. Sexy is the new Sexy Sexy() == new Sexy() function Sexy (cfg) { // Allow instantiation without new keyword if (!(this instanceof Sexy)) { return new Sexy(cfg); } this.cfgs = []; this.setup(cfg); this.evt = $(this); }
    38. 38. Take it off... take it all off! Sexy.method(url) == (new Sexy()).method(url) // Alias instance methods as static methods of constructor $.each(Sexy.prototype, function (name, method) { Sexy[name] = function () { return method.apply(new Sexy(), arguments); }; });

    ×