0
Sexy.js
Dave Furfero
UI Engineer, MLB.com
Sexy.js
          Slideshow
 http://www.slideshare.net/furf
Sexy.js
A lightweight JavaScript library which provides enhanced
Sequential Ajax (Sajax) functionality and a sleek facade ...
Sexy.js
 Facilitates combination and manipulation of data from
 multiple sources
 Speeds loading of scripts, stylesheets, ...
Ugly.js
$.getJSON('articles.json', function (articles) {
 $.getJSON('comments.json', function (comments) {
   $.getJSON('r...
Sexy.js
Sexy
 .json('articles.json')

 .json('comments.json', function (comments, status, articles) {
   $.each(comments, ...
Ugly.js
<script src="/js/jquery.template.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/comment...
Sexy.js
<script type="text/javascript">


Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl')...
Sexy.js
Enhanced AJAX Functionality
Sequential Ajax (Sajax)
 Simultaneous request/sequential response Ajax
 Each successive callback receives the return value...
Sexy.js
Expressive, Chainable API
Sexy.js API
Core Methods
    html (url, callback)
    json (url, callback)
   jsonp (url, callback)
  script/js (url, call...
Sexy.js API
Core Methods
    html (url, callback)        html (settings)
    json (url, callback)        json (settings)
 ...
Sexy.js API
callback (data, status, previous)


 Each callback receives three arguments:
   data
   status
   previous - t...
Sexy.js API
Additional Methods
 setup (settings)
     Similar to jQuery.ajaxSetup, but limited to
     subsequent calls of...
Using Sexy.js
Sexy
Using Sexy.js
Loading JavaScripts
Sexy
 .js('jquery.template.min.js')
Using Sexy.js
Loading Stylesheets (local only)
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
Using Sexy.js
Loading Stylesheets (local only)
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
Using Sexy.js
Loading Data
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl', function (data...
Using Sexy.js
Loading Data
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl', function (data...
Using Sexy.js
Custom Ajax Settings
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl', functi...
Using Sexy.js
Passing Data with Callbacks
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl',...
Using Sexy.js
Implicit Callbacks
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl', function...
Using Sexy.js
Implicit Callbacks
Sexy
 .js('jquery.template.min.js')
 .css('comments.css')
 .text('comments.tpl', function...
Using Sexy.js
Implicit Callbacks, Non-Data Types
Sexy
 .css('comments.css')
 .text('comments.tpl')
 .js('jquery.template.m...
Using Sexy.js
Implicit Callbacks, Non-Data Types
Sexy
 .css('comments.css')
 .text('comments.tpl')
 .js('jquery.template.m...
Using Sexy.js
Configuring Sexy.js
Sexy
 .setup({ cache: true })
 .js('jquery.template.min.js')
 .css('comments.css')
 .text...
Using Sexy.js
Configuring Sexy.js
Sexy({
  cache: true
})
  .js('jquery.template.min.js')
  .css('comments.css')
  .text('c...
Using Sexy.js
Configuring Sexy.js
Sexy({
  cache: true
})
  .js('jquery.template.min.js')
  .css('comments.css')
  .text('c...
Using Sexy.js
Bundling JavaScripts
Sexy
 .bundle(
   '/js/bam.js',
   ‘/js/bam.datagrid.js',
   ‘/js/bam.stats.js',
   ‘/j...
Using Sexy.js
Bundling JavaScripts
Sexy
 .bundle(
   '/js/bam.js',
   ‘/js/bam.datagrid.js',
   ‘/js/bam.stats.js',
   ‘/j...
Known Issues

Unable to detect error events for remote requests
  jsonp (remoteUrl)
  script (remoteUrl)
  style (remoteUr...
Sexy.js
 Enhanced Ajax functionality
 Expressive, chainable API
 Lightweight (1.3KB compressed)
Thanks!
Slideshow: http://www.slideshare.net/furf
URL: http://sexyjs.com
Demo: http://sexyjs.com/demos/comments
Download: ...
But wait... there’s more!
Sexy is the new Sexy
Sexy() == new Sexy()
function Sexy (cfg) {

    // Allow instantiation without new keyword

    if (!...
Take it off... take it all off!
Sexy.method(url) == (new Sexy()).method(url)
// Alias instance methods as static methods o...
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
Upcoming SlideShare
Loading in...5
×

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

3,446

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
3,446
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
































































  • Transcript of "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); }; });
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×