• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sexy.js: A Sequential Ajax (Sajax) library for jQuery
 

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

on

  • 4,519 views

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.

Statistics

Views

Total Views
4,519
Views on SlideShare
3,058
Embed Views
1,461

Actions

Likes
3
Downloads
62
Comments
0

14 Embeds 1,461

http://sexyjs.com 1351
http://blogger-recursos.blogspot.com 39
http://www.slideshare.net 32
http://www.sexyjs.com 10
http://rapidop.com 9
http://blogger-recursos.blogspot.mx 8
http://blogger-recursos.blogspot.com.es 4
http://translate.googleusercontent.com 2
http://blogger-recursos.blogspot.com.ar 1
http://www.linkedin.com 1
http://www.25thin.gs 1
http://207.46.192.232 1
http://sexyjs.dev 1
http://web.archive.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

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

  • 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 to jQuery’s native Ajax methods.
  • Sexy.js Facilitates combination and manipulation of data from multiple sources Speeds loading of scripts, stylesheets, and data using parallel asynchronous HTTP requests
  • 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; }); }); }); });
  • 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; }); });
  • 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>
  • 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>
  • Sexy.js Enhanced AJAX Functionality
  • Sequential Ajax (Sajax) Simultaneous request/sequential response Ajax Each successive callback receives the return value of the previous callback as an additional argument
  • Sexy.js Expressive, Chainable API
  • 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)
  • 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)
  • 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
  • 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
  • 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) { return data; })
  • 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'); });
  • 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'); } });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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'); });
  • 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' );
  • 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(); } );
  • 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)
  • 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: http:github.com/furf/Sexy Twitter: @sexyjs E-mail: furf@furf.com
  • But wait... there’s more!
  • 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); }
  • 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); }; });