Aug 26, 2015

Minimize the price (not the benefit) of type in Typescript

I watched Anders Hejlsberg introducing typescript in 2012. Then I thought I don't have the problem it tries to solve. Type in Javascript has not yet caused any problem for me, as I have unit test, renaming and intellisense is also not a problem for me, because I have webstorm. Then, I found that Douglas Crockford said something in google plus

Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to generate the most attractive code. And I think it should take pressure off of the ECMAScript Standard for new features like type declarations and classes. Anders has shown that these can be provided nicely by a preprocessor, so there is no need to change the underlying language.

I think that JavaScript's loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to pay.

I was kind of thinking the same way. So I didn't use Typescript in my all my projects until 4 months ago, when I joined a angularjs project where typescript is designated to be used. Now I feel that, type can be just a ceremony if it is not used properly, but it can be good enhancement of Javascript if used in the right way. In the following, I will list some of bad and good example of using typescript. The good examples can reduce the cost of using type without losing its benefit.

Don't annotate type for variable with value of built-in type, use inference.

//bad
var n: number = 7;
var s: string = 's';
var re: RegExp = /\s+/;
var itemsOfString: string[] = ['one', 'two', 'three'];

var callbacks: ((input: string) => number)[] = [
  function (a: string) {
    return Number(a);
  },
  function (b: string) {
    return Number(b);
  }];


//good, typescript can inference the type from value
var n = 7;
var s = 's';
var re = /\s+/;
var itemsOfString = ['one', 'two', 'three'];

var callbacks = [
  function (a: string) {
    return Number(a);
  },
  function (b: string) {
    return Number(b);
  }];

Use type annotation sparingly for custom type.

interface IPerson {
   firstName: string,
   lastName: string
}

function printPerson(person:IPerson) {
  console.log(person.firstName + ',' + person.lastName);
 }

//bad, this annotation is unnecessary
printPerson(<IPerson>{
 firstName: 'John',
  lastName: 'Doe'
});

//good, because the annotation can give you intellisense
var john: IPerson = {
  firstName: 'John',
  lastName: 'Doe'
};

printPerson(john);

//good, intellisense is available from inference
printPerson({
 firstName: 'John',
  lastName: 'Doe'
});

Don't create unnecessary interface or class if it is one-off thing, use inference

//bad, you need to duplicate type information from the object
interface Customer {
    firstName: string,
    lastName: string    
}
function createCustomer():Customer {
  return {
     firstName: 'John',
     lastName: 'Doe'
   };
}

//good, typescript compiler can infer the return type
function createCustomer(){
  return {
     firstName: 'John',
     lastName: 'Doe'
   };
}

Don't create interface if "named anonymous type" is available

//bad, you need to duplicate the type information from the object
namespace demo {
     
    export interface Settings {
          svcUrl: string
    }

    angular.module("demo").value("settings", {
         svcUrl: 'http://foo.com'
    });
}
//good
namespace demo {
    var settings = {
         svcUrl: 'http://foo.com'
    };

    export type Settings = typeof settings;
    angular.module("demo").value("settings", settings);
}
//
namespace demo {
    //use settings with type annotation 
    angular.module('demo').controller('main', function (settings: Settings) {
       console.log(settings.svcUrl);
    });
}

Don't create class if all you need is an interface, because typescript is using duck typing

//bad
class Customer {
    firstName: string;
    lastName: string ;
}

//good
interface Customer {
    firstName: string;
    lastName: string ;
}

function logCustomer(cust: Customer) {
   console.log(cust.firstName + ', ' + cust.lastName);
}

Don't use multiple assignment to define an object, use object literal expression

//bad, because typescript cannot infer the type of return object
function createCustomer () {
   var rtn : any = {};
   rtn.firstName = 'John';
   rtn.lastName = 'Doe';
   return rtn;
}

//good, because typescript can infer the literal object
function createCustomer () {
    return {
        firstName: 'John',
        lastName: 'Doe'
    }
}

Don't use module if it is internal module, use namespace

//bad 
module demo {

}

//good
namespace demo {

}

Don't use complicated construct, if simple construct is good enough

namespace demo {
    //bad
    export class Data {
        public static get key1(): string { return "value1"; }
        public static get key2(): string { return "value2"; }
    }

    //good
    export var data = {
        key1: 'value1',
        key2: 'value2',
    }
}

Aug 24, 2015

TypeScript is duck typing.

When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.

Typescript a superset of typescript, since Javascript is a duck typing language, typescript is also a duck typing language. In strong type languages the signature of an object is important and type is the signature of an object, they care about whether the signature are compatible. Typescript does not care about signature and type, cares about whether objects are replaceable because of what they can actually do.

Typescript interface is not a signature but semantics

Type compatibility in TypeScript is based on structural subtyping, it relates types based solely on their members. In the following example, variable foo and bar are declare of different interface type. The literal object can be assigned the variable foo, because typescript compiler can infer the ability of the literal object(this is called type inference), and typescript compiler think that literal object can do what interface is expected to do. And foo can be assigned to bar, because foo can do what interface Bar is expected to do. The name of interface (Foo and Bar) does not matter, what is matter is semantics of the interface.

//--interface is semantics
interface Foo {
  quack();
}

interface Bar {
  quack();
}

var foo : Foo;
var bar: Bar;

foo = {
   quack: function () {}
};

bar = foo;

Typescript class is just an interface with implementation

One of the reason that people use Typescript is that it support class. However, typescript class is different from C# and Java class. The following are similar to Java class. You can create an instance of a class by using the keyword "new", you can inherit a class by using keyword "extends".

//--class as implementation
class Duck {
    constructor(public name: string) {
    }
    quack() {
        console.log('Duck quack ' + this.name);
    }
}

class Swan extends Duck {
    fly() {
        console.log('Swan fly ' + this.name);
    }
}

var duck = new Duck('duck1');
duck.quack();
//
var swan = new Swan('swan1');
swan.quack();
swan.fly();

But a less well-known fact is that typescript class can be used as an interface, like the following code

//---class as interface----
var objectOfAnounymousType = {
    name: 'Daisy',
    quack: function () {
        console.log('quack quack ' + this.name);
    }
};
var daisy: Duck = objectOfAnounymousType;
daisy.quack();

class Person implements Duck {
    name = "Person"
    quack() {
        console.log('Person quack ' + this.name);
    }
}

var john = new Person();
john.quack();

daisy = john;
daisy.quack();

When typescript compiler see the a literal object, it can infer an anonymous type from the object. When the object is assigned to a variable of Duck class, typescript compiler find that the anonymous type is compatible to Duck class(interface) because the anonymous type has all the members that Duck class has. The class Person does not extend (inherit) Duck class, instead it treat Duck class as an interface, and implements it.

The difference between interface and class is that interface does not has implementation but class has implementation. Because of this, class can implement interface, but interface can not implement interface.

interface IDuck {
    name: string,
    quack: () => void
}

interface ISwan extends IDuck {
    fly(): void
    
}

class Duckling implements IDuck {
   constructor(public name: string) {
    }
    quack() {
        console.log('Duckling quack ' + this.name);
    }
}

Thanks for taking the time to read this. Feedback, critiques and suggestions are welcomed.

Aug 20, 2015

Leave $rootScope alone, use AngularJs Dependency Injection.

AngularJs brings dependency injection into UI development. It works very well until it is misused. Recently, I was working on an AngularJs project. One interesting thing is that some application settings is attached to $rootScope for convenient consumption. When I saw it, I felt this was so Déjà vu. The $rootScope has essentially become the new "window" object in the browser, where all global variables can be attached to. So I Googled about this and wanted to know whether other people have similar problem, and I found this question in StackOverflow, Global variables in AngularJS. It seems that this is a quite a common problem out there. So I wanted dig into it more.

In the article Global Variables Are Bad, a few bad reasons were listed for using global variables.

  1. "What's a 'local variable'?"
  2. "What's a 'data member'?"
  3. "I'm a slow typist. Globals save me keystrokes."
  4. "I don't want to pass it around all the time."
  5. "I'm not sure in what class this data belongs, so I'll make it global."

I think the the reason we want to attach variables to $rootScope is because of #3 and #4 of the reason above. I don't need to argue why Global variables are bad, because the article has very good coverage. But in case of AngularJs, by changing the dependency on "setting" to "$rootScope.setting", the dependencies of "setting" become implicit. This is bad for communication, documentation, and maintenance. And it will encourage dumping more dependencies into $rootScope. The advantage of AngularJs dependency injection is completely gone. Explicit dependencies become exploring dependencies in the dark world of $rootScope.

One more possible reason in using $rootScope is that it makes the databinding easier, because all child scopes will inherit $rootScope's properties. But this only works when the child scope is not isolated scope. This practice will discourage the use of isolated scope, which is a great way to improve reusability of your directive.

Using inheritance from parent scope and $rootScope is very fragile and heavy coupling. A better way is to use dependency injection. Let's see an example, which is over-simplified. It may violate the best practice of AngularJs you have learned from somewhere else. But the point is to demonstrate the difference between using global variable and dependencies injection.

So the demo app wants to show a user a login screen if the user is not logged in, otherwise a welcome screen. Simple enough. The following is the implementation using global variable. You can see the code at http://output.jsbin.com/monozu. This implementation creates a global variable attached to $rootScope, which is visible to child scopes.

  <div ng-controller="login">
    <div  ng-if='!user.isAuthenticated'>
      You are not logged in yet.
      <button ng-click="user.login()">
        Log in
      </button>
    </div>
  </div>
  
  <div ng-controller="welcome" >
   <div ng-if='user.isAuthenticated'>
      Hello, {{user.firstName + ',' +  user.lastName}}
    </div>
  </div>
  var app = angular.module('app', []);
  
  app.run(function ($rootScope) {
    $rootScope.user = {
      isAuthenitcated: false,
      login: function () {
        this.firstName = 'John';
        this.lastName = 'Doe';
        this.isAuthenticated = true;
      }
    };
  });

app.controller('login', function ($scope) {

  });
  
  
  app.controller('welcome', function ($scope) {

  });

The following is the implementation using dependency injection. You can see the code at http://output.jsbin.com/senuti. The html template is still the same, but in JavaScript, the user global variable is removed from $rootScope, and become a service, which is injected into to each controller.

  app.factory('user', function () {
    return {
      isAuthenticated: false,
      login: function () {
        this.firstName = 'John';
        this.lastName = 'Doe';
        this.isAuthenticated = true;
      }
    };
  });
  

  app.controller('login', function ($scope, user) {
    $scope.user = user;
  });
  
  
  app.controller('welcome', function ($scope, user) {
    $scope.user = user;
  });

The implementation using dependency injection may use a little more code, but is more testable, maintainable and scalable. Please comment and let know what you think.

Jul 8, 2015

Class in ES6, Typescript, Angular2 and Angular1

ES6 class

Class was proposed in ECMAScript 4, which was abandoned, and ES5 does not have Class. Now ES6 is finalized and it has class.

So what is the big deal of it? Should I use it? Will it change the nature of JavaScript? Here is an excerpt from ECMAScript 2015 specification

Although ECMAScript objects are not inherently class-based, it is often convenient to define class-like abstractions based upon a common pattern of constructor functions, prototype objects, and methods. The ECMAScript built-in objects themselves follow such a class-like pattern. Beginning with ECMAScript 2015, the ECMAScript language includes syntactic class definitions that permit programmers to concisely define objects that conform to the same class-like abstraction pattern used by the built-in objects.

It turns out, ES6 class is essentially a constructor function (which should be called with "new" keyword), it still uses prototype inheritance Here is some test case which is used in ES6 compatibility table, which also confirms this.

 class C {}
 return typeof C === "function";

return typeof class C {} === "function";

return typeof class {} === "function";

The question of "Should I use ES6 class or closure function?" is essentially "Should I use constructor/prototype or closure function". If you google constructor/prototype vs closure function, you can find lots of discussion about this, such as Efficiently creating JavaScript objects: closures versus prototypes, Some Javascript constructor patterns, and when to use them and of course Douglas Crockford's Private Members in JavaScript.

Developers of classical language tend to love ES6 class, maybe because class is the familiar way to create object. It is true that ES6 class(prototype) use less memory when you create thousands of instance of one class with shared methods (which can be factored out prototype object), but most of the time, I just need to create one instance adhocly. Also JavaScript runtime like V8 will create hidden class anyway when it finds that two objects has the same shape, and also memory is really cheap nowadays, so memory efficiency is not really important here.

Another advantage of ES6 class is that it simplify inheritance, if you really need to use inheritance as reusability vehicle like EmberJs or BackboneJs, this is really a good reason to use ES6 class. But the bigger problem is that inheritance is really bad idea.

Closure is confusing to classical language developer, but Douglas Crockford claim it is the best idea in the history of programming language. To me, closure is more flexible, readable, powerful and it supports encapsulation and does not require to use the "this" variable. I really like Douglas Crockford's class-free object-oriented programming.

Class in TypeScript and Angular 2.0

Angular team is now building Angular2 with Typescript. In Angular2, we can write application using ES6 class with typescript . If you follow the quick start guide of Angular2, you will find some code like the following.

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

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>My first Angular 2 App</h1>'
})
class AppComponent {

}
bootstrap(AppComponent);

In Angular1, we use closure to create service, controller, directive. In angular2, angular team seems to use class extensively. Why? In the Keynote on AtScript at ng-europe 2014, Misko (the creator of Angular) described the problem in angular1 is that angular1 API is too complicated to use. They want to have a better abstraction and simpler API. Angular team decided to use lots ES6 features such as class, module. But these features are not enought. So they want to extend the language by creating AtScript. The following is relationship between AtScript, TypeScript, ES6, and ES5. The feature they really want are "Annotation" and "Introspection", these features allow you declaratively add functionality to your class.

Later, Angular team communicate to typescript team their needs in typescript. Since typescript 1.5 start to support class with decorator ( which is essentially the annotation in AtScript), Angular team cancel AtScript and use typescript to write Angular2.

How can class with decorator simplify the Angular2 api? In the above code, the class is annotated with decorator, which is pretty neat. This code is transpiled to the following javascript (ES5)

var __decorate = //omit some implementation

var angular2_1 = require('angular2/angular2');
var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app'
        }),
        angular2_1.View({
            template: '<h1>My first Angular 2 App</h1>'
        })
    ], AppComponent);
    return AppComponent;
})();
angular2_1.bootstrap(AppComponent);

We can see that the decorator can modify the class definition declaratively. So class with decorator in typescript is good. Actually decorator is already proposed in ES2016, so we may see decorator get standardized very soon.

Class in Angular1

So how about class in Angular1 ? Can we use class to simplify our code or improve performance in Angular1? After "Angular 2: Built on TypeScript" announced, people are thinking of future-proof way to write code with angular1. Obviously Angular2 is using class, a lot, should we use class now in Angular1. From the very beginning, we use closure to create Angular1 component, now some Angular1 projects switch to use class exclusively to replace closure. Suddenly, it seems that closure is obsolete in Angular1, is it?

First, angular1's architecture has not changed and will keep the same in the future, the change will be in Angular2. Angular1 is still using closure internally to create service, directive, controller. If you use class in Angular1, it will not simplify our code, it may even add some complexities to your code. Secondly, angular1 does not use class or class with decorator internally, there is no advantage in that sense.

In the following, I will implement a service, a controller and a directive using class and closure and compare them side by side. And the code is written in typescript, because it support ES6 class and optional type. The source code above can be found https://github.com/fredyang/class-or-closure-angular1, the demo page can be found here.

First let's see take a look on service. If we want to use class to define service in angular1, we should use module.service method, because I want to use the class directly. If we use closure, we should use module.factory.

// common interface of Backend service
// implementing it seems to be good idea, it is used by
//both ClassBackend and closureBackend
interface IBackend {
    login(userName: string, password: string) : ng.IPromise
}

///-------service implemented by class---
class ClassBackend implements IBackend {
    //save $q for reference
    constructor(private $q) {
    }
    login(userName: string, password: string) {
        //access $q via 'this' reference
        return this.$q.when(password === '123');
    }
}

//use module.service method, as it will use 'new' to call class ClassBackend
// which it is essentially a constructor function
angular.module('app').service('classBackend', ClassBackend);


///------service implemented by closure----
angular.module('app').factory('closureBackend', function ($q): IBackend {

    return {
        login: function(userName: string, password: string) {
            //access $q via closure
            return $q.when(password === '123')
        }
    };

});

Now let's implement controller. Here, we can use class to define controller directly, because angular1 treat controller as constructor.

///common interface of controller
//implementing IUser is optional, seems the expression
//in html view is not strong typed yet.
interface IUser {
    isAuthenticated: boolean;
    userName: string;
    password: string;
    login(): ng.IPromise
}

///------controller implemented by class-----------
class ClassController implements IUser{
    constructor(private classBackend:IBackend) {
    }

    isAuthenticated = false;
    userName = 'Fred Yang';
    password = '123';

    login() {
        return this.classBackend.login(this.userName, this.password)
            .then((isAuthenticated) => {
                //need to arrow function to access 'this'
                this.isAuthenticated = isAuthenticated;
                return isAuthenticated;
            });
    }
}

angular.module('app').controller('ClassController', ClassController);

/////---------controller implemented by closure--------------
angular.module('app').controller('ClosureController',
    function (closureBackend:IBackend) : IUser {

    //here I want to avoid to use "this.xxx = yyy"
    // and explicitly return an object instead implicitly return this
    // so that I can use closure
    var rtn = {
        isAuthenticated: false,
        userName: 'Fred Yang',
        password: '123',
        login: function () {
            return closureBackend.login(this.userName, this.password)
                .then(function (isAuthenticated) {
                    //access isAuthenticated via closure variable,
                    //without using arrow function
                    rtn.isAuthenticated = isAuthenticated;
                    return isAuthenticated
                });
        }
    };

    return rtn;
});

Now let's implement directive. I can not use the class directly to define directive here, I still use closure function, inside which I new an instance of the class.

///------------ directive "implemented" by class --------
//implementing ng.IDirective is optional
class CounterWidget implements ng.IDirective {

    constructor(private $timeout) {
        //all the dependencies have to be attached to
        // instance "this"
        //
        // "private" just make the compiler think it is 'private'
        // but it still accessible externally in the generated
        //javascript
    }

    restrict = "EAC";

    template = "<div>counter-widget-class:{{count}}</div>";

    scope = {
        delay: "="
    };

    link = (scope, $elem, attrs) => {
        //access dependencies via "this"
        var $timeout = this.$timeout;
        //
        var delay = scope.delay || 1000;
        scope.count = 1;
        (function repeat() {
            $timeout(function () {
                scope.count++;
                repeat();
            }, delay);
        })();
    }
}


angular.module('app').directive("counterWidgetClass", function ($timeout) {
    //directive is still created using closure under the hood
    return new CounterWidget($timeout);
});


//---- directive implemented by closure ---------
//implementing ng.IDirective is optional
angular.module('app').directive('counterWidgetClosure',
    function ($timeout):ng.IDirective {
        //$timeout is closured and it is accessible to inner function
        return {
            restrict: "EAC",

            template: "<div>counter-widget-closure:{{count}}</div>",

            scope: {
                delay: "="
            },

            link: (scope:any, $elem, attrs) => {
                //
                var delay = scope.delay || 1000;
                scope.count = 1;
                (function repeat() {
                    $timeout(function () {
                        scope.count++;
                        repeat();
                    }, delay);
                })();
            }
        };
    });

From the above samples, I find that

  • The implementation in class is more complicated, verbose, rigid, it does not really encapsulate private data, but the syntax may be more friendly to java or c# developer.
  • The implementation in class is more simple, terse, flexible, and it can encapsulate private data, but it feels wired to classical developer.

Because angular2 use lots class, it does not mean that you have to use class exclusively in Angular1. Using class will not put you better place in migrating to Angular2, because Angular2 is whole new architecture. Whatever you write today in Angular1, you need to rewrite in Angular2. Until I write code in Angular2, I should still keep writing components using closure function in angular1.

Thanks for taking the time to read this. Feedback, critiques and suggestions are welcomed.