May 06

JavaScript asynchronous method queue chaining

Ajax No Comments »

“Guess who’s back? Back again…..”

The JavaScript slim shady himself…. Dustin Diaz (formerly of YUI – Google, now of Twitter) has taken some time out for his busy coding at Twitter, and photography awesomeness to get back to some JS blogging.

Dustin has written up a pattern that he used in Twitter @anywhere, the asynchronous method queue chaining pattern:

One technique you don’t often see is queueing up a chain of methods, asynchronously, by which functions can be linked together independent of a callback.

Let’s start with the end result. What if you could do this?

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. $(“<div />”)
  3.   .fetch(‘/server/navigation.html’)
  4.   .addClass(‘column’)
  5.   .appendTo(‘#side’);
  6.  
  7. fetchTweet(url).linkify().filterBadWords().appendTo(‘#status’);
  8.  

You grab content, tweak style, and change the DOM, all in a single chain. Or, fetch a tweet, add href, filter it, and then change the DOM.

Here is an example that does this.

The internals of the Twitter example become:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. function fetchTweet(url) {
  3.   this.queue = new Queue;
  4.   this.tweet = “”;
  5.   var self = this;
  6.   ajax(url, function(resp) {
  7.     self.tweet = resp;
  8.     self.queue.flush(this);
  9.   });
  10. }
  11. fetchTweet.prototype = {
  12.  
  13.   linkify: function() {
  14.     this.queue.add(function(self) {
  15.       self.tweet = self.tweet.replace(/\b@(\w{1,20}\b/g, ‘<a href="…">$1</a>’);
  16.     });
  17.   return this;
  18.   },
  19.  
  20.   filterBadWords: function() {
  21.     this.queue.add(function(self) {
  22.       self.tweet = self.tweet.replace(/\b(****|****|****)\b/g, “”);
  23.     });
  24.   return this;
  25.   },
  26.  
  27.   appendTo: function(selector) {
  28.     this.queue.add(function(self) {
  29.       $(self.tweet).appendTo(selector);
  30.     });
  31.   return this;
  32.   }
  33.  
  34. };
  35.  

Nicely done my friend. Looking forward to more JS goodness inspired from your Twitter work.

Continue reading »

Tagged with: • • • •
Mar 18

RequireJS: Asynchronous JavaScript loading

Ajax No Comments »

A certain someone was talking to me about how they find it interesting that node.js, the JavaScript server framework du jour which loves all things async, starts life with a bunch of synchronous require() calls. Now, this is actually quite fine since the startup of the server is not the issue at hand.

However, if you are running require()-esque loader code in the browser you want to avoid blocking calls else Steve Souders will come over and beat you up.

I have seen a couple of interesting items in this area:

RequireJS

James Burke of Mozilla Messaging has spent a lot of time in the depths of dojo.require(). He has taken another look at the problem and RequireJS a solution that offers:

  • some sort of #include/import/require
  • ability to load nested dependencies
  • ease of use for developer but then backed by an optimization tool that helps deployment

He walks through the problem and why other solutions like LABjs, CommonJS require, and Dojo itself don’t cover all of his bases.

The end result is:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. // code that runs asynchronously when the library is loaded
  3. require([“some/script.js”], function() {
  4.     //This function is called after some/script.js has loaded.
  5. });
  6.  
  7. // defining the module and dependencies
  8. require.def(
  9.     // The name of this module
  10.     “types/Manager”,
  11.  
  12.     // The array of dependencies
  13.     [“types/Employee”],
  14.  
  15.     // The function to execute when all dependencies have loaded. The arguments
  16.     // to this function are the array of dependencies mentioned above.
  17.     function (Employee) {
  18.         function Manager () {
  19.             this.reports = [];
  20.         }
  21.  
  22.         // This will now work
  23.         Manager.prototype = new Employee();
  24.  
  25.         // return the Manager constructor function so it can be used by other modules.
  26.         return Manager;
  27.     }
  28. );
  29.  

Google Analytics “async add to []” Pattern

When talking to Davis Frank of Pivotal about some Google Analytics code, he pointed me to details about the new GA asynchronous loader that we very excitedly blogged about since GA was such a blocking offender on the Web.

Part of the asynchronous API is that you, the developer create an array, and use the push() method to put commands on a queue. This means that you can start pushing commands immediately.

Then, when the GA code loads asynchronously, it takes over that array and wraps those standard methods. Now it can take the commands and fire them back to GA and push() can do more. Freaking brilliant.

Continue reading »

Tagged with: • • •
preload preload preload