We had – and still probably have – a tough time porting Template-Based Widgets in Dojo for Google Web Toolkit.

The reason is – Templates defined attach-points and attach-events, variable names / function names that are to be made use of at runtime. However, GWT optimizes the Java function names and as such one does not know what will be the function name at runtime.

And hence the conflict and an area of problem.

The DWT team has posted a writeup at their blog that outlines the problem and proposed solution.

If you find the problem interesting or have an opinion, please do write in.

(Sutra: noun, that which runs through and holds things together)

JavaScript is a fantastic language to work with. I will, personally, prefer to work with runtime dynamic language like JavaScript than compile-time feature constrained languages like C++ or Java (well, C# is still far richer than C++ and Java).

However, working with JavaScript is not – quote-unquote – trivial noting that majority of the developers start with C/C++ or languages evolved from them.

I’m not here to talk about JavaScript, but 4-Sutras that I’ve developed that one should keep in mind while working with JavaScript.

These sutras are:

1. All data-types are infinitely flexible.
2. All objects are infinitely extensible.
3. Objects are associative arrays.
4. It’s all about functions.

Let me explain them in some detail…

In JavaScript, we can provide more functionality to any data-types, including the predefined ones through the prototype object. Infact, there exists a JavaScript library with this very name. For example, we need to add a function insertAt to the Array object. Here’s how we can accomplish the task.

Array.prototype.insertAt = function(item, index)
{
  if(index >= 0 && index < this.length)
  {
    this.splice(index, 0, item);
  }
}

And then, I can do:

var a = new Array();
a.push('one');
a.insertAt('two', 0);

alert('Item at index 0 = ' + a[0]);

So, what I meant in “flexible data-types” is that we can add (infact, remove and change as well, at will) the functionality to any data-type (native JavaScript object) irrespective of whether the code for the type is available or not. Isn’t it great?

Coming to the next point – properties / methods associated with any object (instance) is totally configurable. Assume that we have a reference obj to which we want to associate two properties – exx and vayee – and one method checkPoint, we can add that!

Note that this is different from the flexibility of the data-type. Here, only obj will have these properties, any other object obj2 will not have these properties and methods.

var obj = new Object();
bj.exx = "Value x";
bj.vayee = "Value y";

obj.checkPoint = function()
{
  if(this.exx && this.vayee)
  {
    return true;
  }
  return false;
}

What do you gain out of this? Well, this extensibility allows you to grow your objects – at runtime, on demand. And that’s one of the features that I love in JavaScript.

Everybody loves OOAD because it helps us relate programming to our real life – objects with attributes and functionalities. However, it fails to address one key issue – objects in real life grow. They grow as themselves not requiring a child. However, this is absent in almost all languages barring JavaScript and Smalltalk.

btw, do you remember Smalltalk? The world’s first object oriented language. But somewhere, C and C++ grew more popular and we really lost the fun and power of Smalltalk. Sad.

So, I am assuming that you’ve understood what I mean when I say that all objects are infinitely extensible.

Let me proceed to the next item. It may or may not be classified as a sutra, because it’s a very basic feature of JavaScript. However, we tend to forget about it while working with JavaScript. So, I thought about making it a sutra so that it’s not forgotten.

Objects internally are implemented as associative arrays, or whatever alternate name you want to use. The effect is that you can use any object in two ways, as given below:

var obj = new Object();
//Assigning as a property
obj.x = "Ex";

//Assigning as an associative array
obj['x'] = "Ex";

//Similarly, assining a function
obj.fn = function()
{
  alert('Hello, World!');
}

//And calling it
obj['fn']();

The two ways to work with properties, as given above, are identical. So, don’t worry if you do not know the name of the method or property at design time. Just store it in a variable and access it using the format given above!

Voila! So easy! And damn powerful! Isn’t it?

And finally, never forget about functions. JavaScript is all about functions – to start with and till the end!

The attributes associated with JavaScript functions are:

1. Functions are the ways to create data-types: Encapsulation
2. Functions can be nested, any level deep: Some kind of private functions?
3. Functions can be used as simple functions as well as constructors
4. Instance functions (associated with any object) can be called with any context, so that the value of this can be changed on the fly! Voila!

And there’s a lot more magic that you can do with functions in JavaScript.