Hi everyone, today I would like to share some interesting experiences to you regarding my journey through the javascript frameworks. The first javascript framework I had been using is prototype. For some reason the prototype couldn’t get popular maybe due to the complexity of the code implementation.

I have been using the Jquery for more than 7 years, I have to say Jquery is almost dump proof for everyone to use. On the other hand Jquery is also able to handle complex task such as asynchronous requests, manipulate content dynamically on the client browser.

How easily a beginner can install a Fancy Jquery Plugins ?

Jquery getting popular and widely used thanks to the idea of plugins. For instance, a beginner can easily get some fancy lightbox plugin installed by just include the
library and declare the element class for the lightbox, without actually knowing how things work behind it. Pretty Cool ?

When it comes to Advanced Development, still using Jquery?

Eventually, a beginner becomes a senior, he/she have to work on more complex development where he can’t simply grab and use the free plugins out there, he has to code
and comes out their own classes and functions for the project. At starting, we didn’t find any hassle to use Jquery on our development
When it comes to collaboration, we realized that not all the developers can read and understand the Jquery code and sometime  there were a mixture of Jquery and some native javascript code as well.

For example, we are developing a Netsuite shopping cart using native javascript and suite script. some Jquery function has been mixed into the function and of cause it will works:

window.callBackend = function (datastring, callback) {
 $.ajax({
 type: "POST",
 url: "backend/service.ss",
 contentType: "application/json",
 data: datastring,
 dataType: "json",
 success: function (response) {
 callback(response);
 }
 });
}

Yes, it’s a hybrid of native javascript, suite script and Jquery! We have discussed to get rid of Jquery in our development and we even thinking of going back to the native javascipt scripting. We decided not to do that since native javascript is hard to read and understand.

And We found Typescript!

Different from Jquery, Typescript is a javascript compiler that compile the javascript that you don’t feel like to read them, or you can’t.

TypeScript has a .ts extension and it will generate the native javascript in .js extension upon compile. TypeScript enforce a “Type” for any variable being use such as number or string. It improves the readabiliy of the code and also debugging.

Look at the TypeScript below, I believe anyone can understand what the code does:

class Animal {
constructor(public name: string) { }
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}

class Snake extends Animal {
constructor(name: string) { super(name); }
move() {
alert("Slithering...");
super.move(5);
}
}

class Horse extends Animal {
constructor(name: string) { super(name); }
move() {
alert("Galloping...");
super.move(45);
}
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

and this is the  native javascript generated, can anyone read that? I will not

var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var Animal = (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function (meters) {
alert(this.name + " moved " + meters + "m.");
};
return Animal;
})();

var Snake = (function (_super) {
__extends(Snake, _super);
function Snake(name) {
_super.call(this, name);
}
Snake.prototype.move = function () {
alert("Slithering...");
_super.prototype.move.call(this, 5);
};
return Snake;
})(Animal);

var Horse = (function (_super) {
__extends(Horse, _super);
function Horse(name) {
_super.call(this, name);
}
Horse.prototype.move = function () {
alert("Galloping...");
_super.prototype.move.call(this, 45);
};
return Horse;
})(Animal);

var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

Conclusion

We are not criticizing or comparing the advantages of using Typescript over Jquery here, and we actually can’t since Jquery is a javascript framework while TypeScript is
a javascript compiler that makes the code much more readable.

There is nothing wrong to use Jquery in your project as we also do sometime. If you are going to involve in a bigger development that involve multiple developers and collaboration, you might ran into the same problem as what we did. Perhaps by reading this article you would realized that TypeScript is a good solution for you as well.