Developing jQuery applications

The key aspect with developing jQuery applications is to have a clear idea about the actual structure of the application itself. Before coding, you should know what kind of components are required by your application. If you don't know these details, the risk is basically only one: writing redundant code. Redundant code is the typical result of a ill-planned application. Generally speaking, this happens when your deadlines are tight and you don't have the time to write modular code. This happens very often.

In these situations, you have only a very limited overview of the application you're developing. Your code follows the order of the pages as soon as they are marked up and styled with CSS, starting from simple PSD files and separated images. Again, this happens when you don't have the time to get a detailed overview of the application as a whole. Consequently, your code will be surely bloated and redundant.

For example, I've just finished to develop this application in about 12 days. 12 days is not that much, but I didn't have the time to get an overview of the application. As a result, the main JavaScript file is more than 35 Kb uncompressed. If you take a look at this site, you'll probably notice that most of the work hinges on jQuery effects and animations.

Now, since most of these animations have many features in common, a good thing would surely be to create objects or widgets that handle them in a OOP way. I didn't do that completely, but I only created a singleton with public and private methods without adding any widgets or, even better, custom plugins only because I didn't have the time to do that.

To summarize:

1. use OOP whenever it's possible
2. create custom widgets and plugins.

For example, I used the $.extend() method also to define the parameters of my private methods:

var myPrivateMethod = function(options) {

  options = $.extend({
    element: ...,
    speed: 800
  }, options);
  
  // other code here

};

This is much neater than defining your method parameters using the default list of function parameters, because default parameters are treated in a more consistent way. In short, planning and OOP are two key concepts of a successful and well-planned jQuery applications, provided that you have the time necessary to do that.