Your SlideShare is downloading. ×
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

3,313
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.

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
3,313
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
62
Comments
0
Likes
3
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. Sexy.js Dave Furfero UI Engineer, MLB.com
    • 2. Sexy.js Slideshow http://www.slideshare.net/furf
    • 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. Sexy.js Facilitates combination and manipulation of data from multiple sources Speeds loading of scripts, stylesheets, and data using parallel asynchronous HTTP requests
    • 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. 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. 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. 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. Sexy.js Enhanced AJAX Functionality
    • 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. Sexy.js Expressive, Chainable API
    • 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. 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. 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. 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. Using Sexy.js Sexy
    • 17. Using Sexy.js Loading JavaScripts Sexy .js('jquery.template.min.js')
    • 18. Using Sexy.js Loading Stylesheets (local only) Sexy .js('jquery.template.min.js') .css('comments.css')
    • 19. Using Sexy.js Loading Stylesheets (local only) Sexy .js('jquery.template.min.js') .css('comments.css')
    • 20. Using Sexy.js Loading Data Sexy .js('jquery.template.min.js') .css('comments.css') .text('comments.tpl', function (data) { return data; })
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Sexy.js Enhanced Ajax functionality Expressive, chainable API Lightweight (1.3KB compressed)
    • 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. But wait... there’s more!
    • 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. 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); }; });