Blazingly Fast JavaScript Development

Blazingly Fast JavaScript Development

This article will show you how to level up your JavaScript development and see why TypeScript is so great. I have been trying to keep myself out of UI Development for years until recently with the emergence of Microsoft TypeScript.

I have been trying to keep myself out of UI Development for years until recently with the emergence of Microsoft TypeScript. Developing UI elements with TypeScript is such a breeze that I no longer hit my keyboard too hard and my colleagues are no longer afraid to approach my desk during UI development. Most importantly, I spend more time with my family rather than countless late nights in the office trying to solve an unknown mystery.

Kudos to Microsoft for understanding developer frustrations and filling the long-standing void in JavaScript.

Why TypeScript?

Here are a couple of reasons that this appeals to me.

Object-Oriented Support

One of the main goals of TypeScript is to make it as compatible as possible to ECMAScript 6, hence it supports most (if not all) of the object-oriented concepts/constructs, especially classes, interfaces, modules, generics, static typing, etc. The following code snippet demonstrates most of the concepts. It looks more natural and closer to what an object oriented developer would imagine. This is a good point about typescript in that it borrows most of the concepts and syntax from existing languages, hence the reduced learning curve.

Here is the JavaScript equivalent, showing why it's cause so much commotion among object-oriented developers (example: Java developer).

IDE Support

Most of the IDEs (Eclipse, WebStorm, and Visual Studio) have support for TypeScript, either built-in (Visual Studio) or as a plugin. All of which makes life easier since the IDE acts as the enforcer and guides developers as needed.

Build Tool Support

All major JavaScript build tools Grunt, Gulp and Brunch have TypeScript support. In fact, the example source code demonstrates how we can marry Grunt and TypeScript together very easily.

Syntactic Sugars

Most prominent is the Arrow function or Lambda expressions. Every JavaScript developer has experienced losing the this object while running functions asynchronously, especially in callbacks. Suddenly you find your this** **object changed by something unforeseen, and as a result you end up nodding your head the whole night in front of your monitor. A simple work around is to preserve the this object in some other variable, for example:

The equivalent TypeScript code would be:

External Library Integration

In the above example, you must be wondering, where is CanvasRenderingContext2D defined? This is where type definition(.d.ts) files comes into the picture. Typescript has a definition for every core JavaScript feature/functionality.

The million dollar question: What about the external libraries (jQuery, Backbone, Jasmine, AngularJS, etc.)? It can be defined based on the functionality it provides and that is why the Definitely Typed repository exists. If you explore this repository you will find the d.ts for almost everything you can think of. If for some reason it does not exist, it can be created easily.

TypeScript Alternatives

There is no shortage of languages that compile to JavaScript. CoffeeScript is perhaps the best known example of one of these languages. TypeScript is just one of the many languages that compile to JavaScript, and some of the other popular options are:

  • Google Traceur: Compiles EC6 (Syntactic niceties including class, module, arrow functions, promises, default parameters, etc.) to EC5 JavaScript.
  • Google Dart: Completely new language to address JavaScript issues, cleans up its semantics, and adds static types and class based and object oriented features without being dogmatic.
  • CoffeeScript: Neater syntax which is based on other dynamic languages, thereby making it easier to write.

    Applications Using TypeScript

  • Office365 and Visual Studio Online use TypeScript heavily.
  • hawtl.io UI is written entirely using TypeScript.

    Sample Application

This sample Typescript application is loaded with lots of features and basically demonstrates Typescript feature usage in collaboration with existing libraries and tools.

  • Generics
  • Module, Classes and Interfaces
  • Unit Testing With Mocking and Spying Using Jasmine
  • Grunt Usage
  • Project directory structure organization

Feel free to clone it and play with it. Instructions are provided in the GitHub repository.

Conclusion

We have been witnessing the proliferation of single page applications that are built using JavaScript. It would be a tedious task to maintain/write these applications with just pure JavaScript. Languages that compile to JavaScript (TypeScript, for example) provide good syntactic sugar, structures, and constructs are becoming immensely helpful.

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.