Getting Started With Backbone.js

Backbone.js is a great library for building single page applications and JavaScript MVC-like apps. The author of Backbone is Jeremy Ashkenas, the same guy who wrote CoffeeScript. If you are interested in knowing more around this library I just redirect to an article I wrote recently for IBM DeveloperWorks.

Parsing Querystring in a URL Through JavaScript

To parse a query string in a URL through JS, you can use a function like the following one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getQueryValue(param) {
  var qstring = window.location.search,
      qstringArray = qstring && qstring.substring(1).split("&"),
      i = 0,
      len = qstringArray.length;
  for (; i < len; i++) {
      var token = qstringArray[i],
          eqIndex = token.indexOf("="),
          firstPart = token && token.substring(0, eqIndex);
      if (firstPart === param ) {
          return token.substring(eqIndex + 1, token.length);
      }
  }
}

E.g. Given a URL “http://domain.com.au?aaa=bbb” , you can call this function as getQueryValue(“aaa”) and youll get “bbb”

I uploaded this code in a Gist on Github (bit modified to be compliant with the module pattern).

Singleton Pattern in Java and JavaScript

Singleton pattern is a Design Pattern that uses a single instance of the same class. It’s used where we need just an object, an instance which we can call through the whole application. In Java, a typical example where this pattern is commonly used is when we use the logging functionality (Log4j, Commons Logging, SLF4J..), where we need a single instance of the Logger object.

In Java, we can implement this pattern typically in two ways:

a) The Singleton Class has a public, static and final field that get the instance and a private constructor

1
2
3
4
public class SingletonClass {
  private static final SingletonClass INSTANCE = new SingletonClass();
  private SingletonClass(){};
}

You can call the object as ”SingletonClass.INSTANCE”.

This first approach is not completely safe though (see AccessibleObject.setAccessible method to call the private constructor). To avoid that, we can look into the second type of approach:

b) The Singleton Class has a public static method that return the instance (factory method), a private constructor and a private field that instantiates the single instance.

1
2
3
4
5
public class SingletonClass {
  public static final SingletonClass INSTANCE = new SingletonClass();
  private SingletonClass(){};
  public static SingletonClass getInstance(){return INSTANCE;}
}

You can call the object as ”SingletonClass.getInstance()” and it gives you more flexibility around the API.

From Java 1.5, the best approach according to Joshua Bloch, is using the enum type.

1
2
3
public enum SingletonClass {
  INSTANCE;
}

You can call the object as ”SingletonClass.INSTANCE”, very similar to the first solution shown. This approach appears to be the best especially when you need to deal with Serialization and Synchronization.

In JavaScript, it’s of course possible to implement this pattern as in Java. That is how the code can look:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var SingletonClass = (function(){
  function SingletonClass() {
      //do stuff
  }
  var instance;

  return = {
      getInstance: function(){
          if (instance === undefined) {
              instance = new SingletonClass();
          }
          return instance;
      };
  }
})();

You can call the object as SingletonClass.getInstance(). The code looks really similar to the way the Singleton used to be implemented in Java, where the main problem is dealing with Threads & Synchronized blocks (having a similar code in Java, it will cause an issue in an environment with multiple threads).

JavaScript fortunately is single-threaded, so we don’t need to worry about this kind of problems.

For more info, you can read the article from the wiki.

Reasons Why I Wrote the Plugin Jquery Asynchronous Image Loader (JAIL)

The need for a plugin that loads images asynchronously comes from the will of improving the page load time and making the user experience enjoyable/acceptable when there are heavy images in a page. When there are images on a page, the browser makes HTTP requests to download them and in case there are many of them and they have large size, it can take a while to load the rest of the page. The user will see the content below the images with some delay and the user experience won’t be that pleasant.

In mobile sites, I find this problem quite critical, as the user will especially feel the effects of this delay.

Deferring the loading of the images can be the solution and that’s what my plugin is about.

Before to have started writing it though, I researched on the net if there was something already that could solve my issue. Well, of course someone else has already thought about this problem and has already implemented something good. That’s what I found:

  • YUI ImageLoader Utility: utility from YUI3, that delays the loading of the images and lets you determine triggers and time limits to initiate image loading. You can find more info on their web page and I believe it’s a great utility (like all YUI3 library great code as well). This utility requires some HTML change, such as leaving out the “src” attribute from the IMG tag. There are few things about this solution that weren’t good for my purpose though (in order of importance): a) Disabling JavaScript, the images are not loaded. That was surprising! They didn’t care about progressive enhancement. b) I can customize a trigger to load the images, but I can’t customize a callback function after the images are loaded. c) I’ve already got jQuery in my page, I’d like not use another JS library for page performance reasons. (other JS code to download)

  • Lazy Loading Plugin for jQuery: plugin for jQuery written by Mika Tuupola. This solution was respecting the progressive enhancement and was solving above a) and c)! It seems the way to go.

Just a couple of things go bad: a) In the homepage it’s clearly written that the plugin is currently not usable. :( b) Refreshing the demo page with the Net tab of Firebug opened, the images “below” the fold are loaded. So something must go wrong at least in my browser FF 3.6 on Mac.

I decided to take notes from this previous solutions and in order to achieve what I needed for the site I was working on, I wrote my own plugin for jQuery, called JAIL aka Jquery Asynchronous Image Loader. The whole solution respects the concept of progressive enhancement, you can customize a callback function and it requires jQuery of course.

You can find the source on Github.

It’s lightweight (compressed version is 4Kb), it’s licensed under MIT and GPL v3 and it’s been tested with jQuery 1.3.2+ on FF2+, IE6+, Chrome5+, Opera 10+, Safari3+.

Just some quick notes, this plugin is not for all the cases and it’s not supposed to be applied to all the images. It required some HTML changes so you need to be able to modify the HTML, and I’d suggest to use it for “heavy” images and for mobile sites.

UPDATE (19/12/2011) : Version 0.7 released. Added support for ‘offset’ configuration

UPDATE (03/04/2011) : Version 0.8 released - jail() function, fixed critical issue on v0.7, resizing function, scrolling fixes

UPDATE (03/08/2011) : Version 0.9.5 released - Issue 14 fixed regarding applying event on container different from ‘window’, filenames changed.