Cheminformatics & Javascript: Part 1

Richard Apodaca already made several posts on this topic on his blog. After experimenting with javascript for the past few weeks, I agree with him that javascript could have a role in future web applications. Exciting things happening in browser land. For example, javascript performance has increased significantly and HTML5 features like canvas are becoming more mainstream (i.e. Firefox, Chrome, ...). Even webGL is already supported by bleeding edge firefox/chrome.

This is the first post in a new series about cheminformatics using javascript. Since javascript is not java, I thought it would be a good idea to introduce some features of the javascript language. More interesting cheminformatics examples will follow.

Object literals & JSON
In javascript, you can create objects using object literals. This is also called JavaScript Object Notation (JSON). To create an empty object:

var a = {};

We can also create an object with properties and functions:

var atom = { element: "C", x: 4, y: 5, bonds: [3, 4], getSomething: function(){return 42;} };

atom.element // = "C"
atom.bonds // = [3, 4] <- this is an Array atom.getSomething(); // = 42 

Javascript is a very dynamic language, so you can always add new properties and functions later.

atom.atomicNumber = 6;
atom.getAtomicNumber = function() {
 return this.atomicNumber;
}

The object literal or JSON format is also used to encode data when doing AJAX. While the X in AJAX stands for XML, the latter can be replaced by JSON. Many web API's return data in JSON (e.g. Google APIs).

Namespaces
There are no namespaces in javascript. However, to avoid name conflicts with other libraries, it is always a good idea to hide private parts of your code. This can be accomplished by using an anonymous function and directly calling it:

(function() {

 var hiddenVariable = 0;

 function hiddenFunction() {
   return 34;
 }

 window.visibleFunction = function() {
   return hiddenFunction();
 };

})();

Cross-domain AJAX
A normal AJAX request (i.e. same-domain) is done using the XMLHtmlRequest object. For security reasons, the browser doesn't allow the XMLHtmlRequest object to do cross-domain requests. To get around this, a technique called JSONP is used:

function myCallback(data) {
 ...do something with data...
}

function xAjax(url) {
 var head = document.getElementsByTagName("head")[0];
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 head.appendChild(script);
}

xAjax("http://otherdomain.com/app1?smiles=CCC&callback=myCallback");

The xAjax function creates a new script element inside the head element. The src property is set to the url to load. The callback parameter in the url is used by the server to generate valid javascript:

myCallback({ ...JSON data... });

As a result, the browser will execute the myCallback function when the new script element is loaded and we can do something with the data.

Closure
Closure is a very cool javascript feature. In the example below, the private1 function has access to the outer function variables, even after returning from the outer function. This allows private1 to access the foo property. If self.foo is replaced by this.foo, the property is not found since this refers to the private1 function. This usage of closure (i.e self = this) is often found in javascript code.

function outer() {
 this.foo = 0;
 var self = this;

 function private1() {
   return self.foo;
 }

 this.public1 = function() {
   return private1();
 };
}

Javascript libraries
As for most languages, there are many libraries for javascript. Some of the better ones for general purposes are Prototype, jQuery and Dojo. Google also released their javascript closure tools. The tools include a compiler to minify javascript code. JChemHub, a new javascript cheminformatics library uses it extensively.