TypeScript: Dojo Without The Awkwardness

Humanity has been relentlessly trying to remove Javascript from the face of web-development world for almost as long as Javascript itself. Aside from GWT and ScriptSharp, they also make languages like CoffeeScript and Dart because they are sexier and more fun to write than Javascript. But to me they are just it: a sexier language to write. Nothing of particular interest to me, beyond academic curiosity.  Sure, terser syntax and type safety are all good and well, but Javascript has never been painful enough for me to throw everything good about it and its ecosystem out of the bath. Javascript may be ugly, but the fact is: UI programming is ugly. And that’s what tools like jQuery, Dojo, and Knockout have done a lot to make the experience bearable. To me these tools offer more practical values than switching to a different language altogether. Suffice to say, my attitude toward Javascript-replacement languages has so far been a little more than indifference.

Now where were we? Ah yes, Microsoft announced TypeScript. Great, another Javascript alternative language, because we just can’t have enough. It was certainly very tempting to be quick and dismiss it as another solution looking for a problem. But this time I actually feel excited. Reason?

Well simply put, TypeScript is driven by very practical motives. It doesn’t arbitrarily try to replace Javascript to cater those who dislike Javascript, instead it has a very specific aim: make Javascript fit for large-scale applications. In case you’ve missed the gigantic subtext printed on its homepage: “TypeScript is a language for application-scale JavaScript development.” It’s a language specifically designed to scale well to accommodate large applications with massive Javascript codebase. Sounded like a generic marketing hype, but then I looked at their example code and it became immediately clear what they’re onto. I’ll let the following couple of snippets paint the 1000 words.

So this is an example of an AMD code written on TypeScript:

import geometry = module("./geometry");
import drawing = module("./drawing");
import Math = module("./Math");

export class Circle extends geometry.Shape {
   radius: number;
   center: drawing.Point;

   constructor(x: number, y: number, radius: number) {
      radius = radius;
      center = new drawing.Point(x, y);
   }
   getArea(): number {
      return Math.PI * Math.pow(this._radius, 2);
   }
   getCircumference(): number {
      return 2 * Math.PI * radius;
   }
   scale(factor: number): void {
      this.radius *= factor;
   }
}

That looks somewhat familiar. Here’s the exact same code I rewrite on plain Javascript using Dojo:

define([
   "dojo/_base/declare",
   "./geometry",
   "./drawing"
   "./Math"],
   function(declare, geometry, drawing, Math){
      return declare("Circle", geometry.Shape, {
         _radius: null,
         _center: null,

         constructor: function(x, y, radius){
            this._radius = radius;
            this._center = new drawing.Point(x, y);
         },
         getArea: function() {
            return Math.PI * Math.pow(this._radius, 2);
         },
         getCircumference: function() {
            return 2 * Math.PI * radius;
         },
         scale: function(factor){
            this._radius *= factor;
         }
      });
   });

Now I don’t know if it’s just me, but the two look refreshingly alike. And probably no coincidence. When TypeScript claims itself to be “Javascript for large-scale apps”, they actually mean it.

One can hardly talk about large-scale Javascript apps without mentioning Dojo in the same breath. Dojo has been one of the most powerful frameworks to build non-trivial Javascript applications, and has become the well accepted pattern in structuring and modularising huge Javascript codebase. It is the gold standard of large-scale rich application development.

But there’s just one problem with Dojo: it’s ugly. It’s verbose. It’s repetitive, when it’s not noisy. It’s error prone. Hard to refactor. Poor IDE support. It’s definitely not terribly fun to write. To be clear, unlike jQuery, Dojo’s syntax is conservative by concious choice as it puts consistent syntax and good design patterns ahead of slick syntactic hotness you get from other Javascript libraries. Nonetheless it feels awkward. I love Dojo, but I want Dojo that is less of a pain in my rear end. To me this is the one aching spot where Javascript clearly shows its sheer ugliness.

And that’s the sweet spot that TypeScript hits! It does not try to reinvent Javascript or introduce new design patterns or paradigms. Rather, it has a very specific aim: keep the good old Javascript and the familiar dojo-style pattern, but make it a bit more appetizing to write. And throw in refactorablity and full intellisense while we’re at it. To me the value is real and immediate: TypeScript is dojo without the awkwardness.
It may not be as revolutionary or ambitious as CoffeeScript or Dart, but TypeScript does hit the nail and give a quick effective remedy to the pain that I actually care about. The idea is simple: building a large-scale application on Javascript doesn’t have to be a long ritual of ceremonial chores.

And of course, being a supertype, TypeScript is to Javascript what Less is to CSS. So just like Less (that we all love and cherish), TypeScript has left me very little excuse not to start adopting it sooner, rather than later.