February » 2012 » Eric Feminella

Aptana JavaScript Outline View

Aptana Studio is a great IDE for developing Web Applications. The fact that it is built on Eclipse and completely free leaves little to be desired. That being said, there is one feature I have always found to be lacking, which is, the Outline View for JavaScript. Or, more precisely, the fact that it dosent provide an Outline View when your code is sandboxed within an immediate function.

As it turns out, it actually does; only there is a syntactical caveat to it – your immediate functions must have the closing parentheses defined outside of the function.

For example, while my preferred tool for validating Javascript is JSHint, the much stricter JSLint requires defining an immediate function’s invocation (i.e. the closing parentheses) within the function:

( function(){
}());

( function(){

}());

In JSLint, failing to do so, such as the following:

( function(){
})();

( function(){

})();

… results in the following error:

Error: Move the invocation into the parens that contain the function.

Being somewhat used to conforming to these (arguably unnecessary) rules, after some trial and error I found that adhering to JSLint’s requirements was in fact the cause of Aptana failing to provide an Outline View.

The solution to this problem is quite simple, just keep the invocation outside of the immediate function and Aptana will display the correct Outline View. Technically, I would consider this a bug on Aptana’s part and therefore have filed APSTUD-4364. Hopefully this issue will be resolved. In the interim, I hope this post helps.

Update: As of 04.05.2012, this has been fixed by the Aptana team. Details

February 11, 2012 JavaScript

1 comment

One-time function initialization

When developing Mobile Web Applications, even the seemingly marginal micro-optimizations can result in a noticeable performance improvement over time and, therefore should be implemented where possible. One could also argue (and rightly so) that this same principle applies when developing Web Applications on the Desktop; however, in the context of Mobile Web Experiences, such optimizations are essential, perhaps even obligatory on the developers part.

In a previous post from a few months back I discussed some of the benefits of function overwriting in JavaScript. One similar performance optimization I regularly employee is that of One-time function initializations.

Conceptually, a One-time function initialization is a rather simple pattern which can be broadly described as follows:

An Immediate Function / Self-executing Function performs some initial test conditions.
The Immediate Function returns an anonymous function which, in turn, returns the results of the test conditions. Alternately, the Immediate Function can just return the test condition results.
The anonymous function returned is assigned to a function expression or, the test condition results are assigned directly.

An example in code illustrates just how simple this pattern is:

var hasSomeFeature = ( function() {
    // implement test logic... for example, testing
    // a feature's existence in the browser against
    // multiple vendor prefixes, etc.

    // return a function which returns the results, or
    // just return the result value if desired...
    return function(){
        // return results...
    };
}() );

var hasSomeFeature = ( function() {

// implement test logic... for example, testing

// a feature's existence in the browser against

// multiple vendor prefixes, etc.

// return a function which returns the results, or

// just return the result value if desired...

return function(){

// return results...

};

}() );

Practical implementation example:

var hasWebSockets = ( function( window ) 
{
    var prefixes = 'ms O Moz Webkit'.split(' '),
        n = prefixes.length,
        i = 0;
    
    for ( ; i < n; ++i ) {
        if ( window[ prefixes[i] + 'WebSocket'] ) {
            return true;
        }
    }
    return 'WebSocket' in window;
}( this ) );

var hasWebSockets = ( function( window )

{

var prefixes = 'ms O Moz Webkit'.split(' '),

n = prefixes.length,

i = 0;

for ( ; i < n; ++i ) {

if ( window[ prefixes[i] + 'WebSocket'] ) {

return true;

}

return 'WebSocket' in window;

}( this ) );

Implementing One-time function initializations are quite useful in many situations. Specifically, they are of most value when implemented for use-cases where conditions are too complex to assign to a variable directly and, when the conditions tested only need to be evaluated once, after which re-evaluating the condition would be redundant and unnecessary – such as certain feature detections.

As a general rule of thumb, if a condition or set of conditions can be tested once; that is, they are guaranteed to not change during the execution of the application and, the tests are too complex to maintain if directly assign to a variable, then implementing One-time function initializations are a small, yet simple and practical optimization.

No comments