Getting set up for web development – part 4: JavaScript supersets

In the previous article, I talked about the different libraries I like to use in my projects. This article will talk about JavaScript supersets, with more emphasis on TypeScript.

Supersets?

By JavaScript supersets I mean a language that compiles to JavaScript but is not just JavaScript. Yes, they do exist. There is actually a lot of them, as you can see there.

I have actually never coded much native JavaScript, as I found the functionalities provided a bit “poor”. I particularly miss the lack of strong types and intellisense when using pure JavaScript. I also enjoy being able to use lambdas to write my functions (though those are available in ES6, but were not in ES5).

Supersets provide a bridge between strongly typed languages and JavaScript, and provide help and tooling to build apps.

Coming from a C# background, I enjoy TypeScript a lot, as it makes me feel in a more familiar environment.  I will introduce some of the commonly used supersets and give an overview of TypeScript hereunder.

CoffeeScript

From CoffeeScript website:

CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

That’s basically all I can say about it, never having used it. But I saw a lot of videos where people are using it. What I don’t like so much about it is that the syntax is not really the same as JavaScript. Therefore I think it is a bit harder to understand when I see it.

Dart

From Dart website:

Dart is a cohesive, scalable platform for building apps that run on the web (where you can use Polymer) or on servers (such as with Google Cloud Platform). Use the Dart language, libraries, and tools to write anything from simple scripts to full-featured apps.

Here again, I do not have much more to say, as I never used it. For what I know about it, it is very close to TypeScript. Dart was initiated and is used by Google.

AtScript

I just wanted to mention AtScript out of principle, as it is merged into TypeScript and is therefore defunct. AtScript was initiated by Google in the view of the writing of Angular 2.0. Google and Microsoft decided to join their efforts in a single product, TypeScript.

The point here is, if you consider using AtScript, don’t, go for TypeScript.

TypeScript

From TypeScript website:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

The things I like the most about TypeScript are:

  • JavaScript: TypeScript understands native JavaScript. This means that any JavaScript file can just be renamed as .ts instead of .js and you have valid TypeScript;
  • Cleanness: the compiled TypeScript is very easy to read and understand;
  • Modules: you can encapsulate your code in different modules to avoid polluting your global scope without having to deal with a lot of IIFEs. All the plumbing is handled for you;
  • Classes: you can generate classes to separate your concerns and respect the single responsibility principle. Those classes can be instantiated as in a strongly-typed language
  • Strong-typing: in TypeScript, objects can be given a type, that provides development-time type checking, and avoids calling non-existing properties or methods. No more ‘undefined is not a function or property’ error message;
  • Inheritance: TypeScript allows class to inherit from one another. I will not rattle about inheritance and the Animals>Mammals>Elephant example, just to say it can be done. Here also, prototype extension is handled for you at the JavaScript level;
  • Interfaces: as inheritance is available, interfaces are available as well. This proves useful when you get into dependency injection, and want to ensure decoupling and no dependency to actual implementation, simplifying the test of your classes. Interfaces are also a way to directly show what a class exposes as methods and properties when you open a file (referred to as ‘above the fold’ pattern by John Papa in his AngularJS Patterns: Clean Code course).

TypeScript was initially developed by Microsoft and is now augmented by Google. TypeScript is also the chosen language for the writing of Angular 2.0. It is very well integrated within Visual Studio as it was developed by Microsoft.

Being form a C# background, TypeScript fells very natural to me and provides me with the functionalities I missed in native JavaScript. Using TypeScript in web apps provides me a development and debugging experience similar to the one I have when coding C #, boosting my productivity.

Summary

JavaScript supersets provide advantages over using native JavaScript. I think using a superset, TypeScript in particular, provides an enormous gain in productivity, by simplifying the writing of code, but also by decreasing defects due to compile-time error checking. Of course, creating classes and interfaces for everything you write creates some overhead compared to just throwing objects in and appending properties as required. The good thing about TypeScript is that you can follow that path as well, i.e. setting a type to some of your objects, and not to others.

Using TypeScript provides a way to write cleaner, easier-to-maintain code, of a higher quality.

Advertisements
Leave a comment

2 Comments

  1. Getting set up for web development – part 5: CSS pre-processors | Wandering in the community
  2. Getting set up for web development – part 1: choosing an editor | Wandering in the community

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: