typescript

I Hated JavaScript

Up to a week ago, I hated JavaScript. Working through multiple revisions of Internet Explorer, Firefox, Chrome, Safari, Opera… had made me realize that it was best to leave client side development to those that thrived on it. Over the years, I read awesome books like JavaScript: The Good Parts. And truly enjoyed the read, but it was not enough to make me like JavaScript. As you may have understood from the blog’s title, my aversion against JavaScript changed. This post, is all about the how and the why I changed my mind.

Preparing a demo for my talk titled “A Practical Overview of Actors in Service Fabric“, that was given at MSDEVMTL and that will be given at DevTeach 2016, I decided to use TypeScript to build its UI.

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

And Now … I Think It’s Awesome!

TypeScript changes everything. I have tooling, static checking, symbol-based navigation, statement completion, and code refactoring. These may not sound exciting, but they make a big difference when it comes to my productivity.

TypeScript can be written with both Visual Studio and VS Code. And both can build and debug modern web and cloud applications. VS Code is free and available on your favorite platform – Linux, Mac OSX, and Windows.You can also edit TypeScript in WebStorm, Atom, Sublime Text, and Eclipse!

Diving into TypeScript with a C# background was a breeze. Using the resources listed below, I covered a lot of ground and could build out my demo app.

Using the samples and digging through the web I learnt about npm, configuration and Type Definitions.

The Story

The demo I built for my talk at MSDEVMTL is a live Q & A platform that allows attendees to submit questions to the speakers. The UI needed to be simple and usable from any device. So I took this as an opportunity to learn ASP.NET 4.6 and TypeScript.

Using Bower to manage my JavaScript dependencies.

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else – it just installs the right versions of the packages you need and their dependencies.

By adding the following bower.json file to the root of my ASP.NET project. I was able to install JQuery to the wwwroot.

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.5",
    "jquery": "2.1.4",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.4"
  }
}

This is when I met my first challenge. I wanted to get intellisense for JQuery. So I started by installing the TypeScript Definition(TSD) manager.

TSD is a package manager to search and install TypeScript definition files directly from the community driven DefinitelyTyped repository.

Armed with npm and a command prompt I walked through the provided instructions.
If you want to use a command line tool, something like the TSD, then you want to install it globally by using npm’s -g parameter.

npm install tsd -g

Then I added the tsd.json file at the root of my ASP.NET project.

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "jquery/jquery.d.ts": {
      "commit": "627b6c158b73494c803f36fc2fe00ad75faa8fde"
    }
  }
}

Finally to get everything working, I added the tsd command to install the JQuery Type Definitions during the execution of the prepublish scripts defined in the project.json file located at the root of the projet.

"scripts": {
  "prepublish": [ "npm install",
                  "tsd install jquery --save",
                  "bower install",
                  "gulp clean", 
                  "gulp min" ]
}

At this point, I had everything aligned and was able to start playing around with TypeScript and JQuery! So I started by adding a reference to JQuery’s TypeScript Definition. This activated intellisense and definitely contributed to the happy feeling I got from writing this code.

/// <reference path="../../typings/jquery/jquery.d.ts" />

module LiveQnA {

  export class App {
    
    start() {

      $.ajax({
          method: "GET",
          url: "http://alexandrebrisebois.com/api/meeting"
      })
          .done(response => {
            $("#meetingTitle").html(response.name);
            $("#meetingHosts").html(response.hosts);
            $("#meetingParticipants").html(response.participantCount);
  
            // display updated meeting information
            $("#meeting").show();
          });
      }   
  }
}

window.onload = () => {
    var app = new LiveQnA.App();
    app.start();
};

This generated the following JavaScript:

/// <reference path="../../typings/jquery/jquery.d.ts" />
var LiveQnA;
(function (LiveQnA) {
    var App = (function () {
        function App() {
        }
        App.prototype.start = function () {
            $.ajax({
                method: "GET",
                url: "http://alexandrebrisebois.com/api/meeting"
            })
                .done(function (response) {
                $("#meetingTitle").html(response.name);
                $("#meetingHosts").html(response.hosts);
                $("#meetingParticipants").html(response.participantCount);
                // display updated meeting information
                $("#meeting").show();
            });
        };
        return App;
    })();
    LiveQnA.App = App;
})(LiveQnA || (LiveQnA = {}));
window.onload = function () {
    var app = new LiveQnA.App();
    app.start();
};

Using the App from HTML is business as usual!

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Live Questions & Answers</title>
    <link rel="stylesheet" href="css/site.min.css" type="text/css" />
</head>
<body>
<h1>Live Questions & Answers</h1>

    <div id="meeting" style="display: none">
        <div>
            <strong><span id="meetingTitle"></span></strong><br />
            Hosted by: <span id="meetingHosts"></span><br />
            <strong><span id="meetingParticipants"></span></strong> participants
        </div>
    </div>

    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="js/App.js"></script>
</body>
</html>

Thoughts

Since TypeScript (TS) generates the JavaScript file every time I hit save, it made it easy and fast to go through debug cycles. I could modify the TS file, hit CTRL + S and finally hit F5 in my browser. This is definitely faster than having to build, deploy, attach and hit a break point in server-side code…

I can’t say that TypeScript eclipsed my passion for highly scalable backend services. However, it did make me appreciate and want to build full stack apps.

4 responses to I Hated JavaScript

  1. 

    Thanks for your perspective. I would be very useful for me (a javascript hater) if you provided a download of the solution.

    Like

Trackbacks and Pingbacks:

  1. I Hated JavaScript | Coding and WordPress Tutorials / Shares / Snippets - January 28, 2016

    […] Source: I Hated JavaScript […]

    Like

  2. [js] Brisebois.Typescript | PipisCrew Official Homepage - January 29, 2016

    […] https://alexandrebrisebois.wordpress.com/2016/01/28/i-hated-javascript/ […]

    Like

  3. Les liens de la semaine – Édition #170 | French Coding - February 8, 2016

    […] Le récit d’un développeur qui a détesté JavaScript jusqu’à ce qu’il découvre TypeScript. […]

    Like

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