Review of JavaScript Promises Essentials

Promises are an old pattern in concurrent programming. In the computer science literature, promises date back to the papers by Friendman and Wise from mid 1970s. Many programming languages have promise - and futures as in Java are a similar idea. A promise is a variable or an object which value is initially unknown and is the result of another task. Modern JavaScript development is highly asynchronous by design: the UI (in the web browser) is updated by calls to the backend using HTTP requests.

JavaScript (ECMAScript to be correct) will soon have promises build into the core of the runtime environment, and promises already exist in many libraries and frameworks. If you haven’t worked with promises in a JavaScript context before, now is a good time to begin. In order to ease the use of promises in JavaScript development, the Promises/A+ standard has emerged.

The book is short and divided in six chapters. The first chapter is an introduction to the state of front-end JavaScript development in general and the asynchronous model in particular. The chapter sets the scene for the rest of the book, and discuss how promises fit well into JavaScript.

The second chapter is written in a very dense format using many bullet lists. You are probably going to read the chapter more than once to get all the information. The good news is that is a lot of information. Chapters 2-4 are a presentation of how to use promises, include error handling.

Chapter 5 is devoted to WinJS - the open source library for development of Windows 8 and Windows mobile applications in  JavaScript. Personally, I don’t develop for any of the Microsoft stacks, but the chapter is still useful as it shows how a widely used library is applying the promise concepts.

The final chapter explains how to implement your own promise library. I guess that there exist many in-house JavaScript libraries. If you have such a library, you will find this chapter useful.

In general, the book is well-written. The usage of bullet list many place (and chapter 2 in particular) can make it hard to read the book. Still, any JavaScript developer should read the book and get ready to the great promise of promises. You can find more information about the book here.

Review: Instant ExtJS Starter

Recently, Packt Publishing published a book by N. Bhava on ExtJS. It's a fairly short book, about 60 pages long. The idea is to get you started with ExtJS. If you don't know what ExtJS, it is a framework to develop the front-end of web applications. Today, users except web applications to behave must like desktop applications, and a typical web developer is much more like a GUI programmer just a few years ago. In order to get started with ExtJS, the book is an excellent introduction. By reading the book, it quickly becomes obvious that today's web developers just have a great deal of knowledge of JavaScript, object-oriented programming, HTML and CSS. JavaScript is a class-less object-oriented programming language. But ExtJS is based on the notion of classes, and they are somehow emulated by plain JavaScript. The author does not go into details - probably due to the limited length of the book. A book of less than 60 pages cannot scratch the surface no matter how great the author is. Indeed, the book is quite well written, and the flow of the book is fine. But I must be honest, I have tried ExtJS ever before, and the book is too short for my taste. I do like the cook-book like steps in how to install ExtJS. And I like the usage of the browsers' debugger to inspect code and DOM. The proof-reading of the book could be better. On page 9, the different edition of ExtJS is mentioned twice, and the example of page 35 has an extra </tpl> tag. If you have another web framework (jQuery UI, YUI, etc.), you will find the book useful. It will give you a clear idea of what ExtJS is all about in a short time. The author emphases early that the strength of ExtJS is it's components. The major components (layout, containers, data, templates, and forms) are discussed. In particular, the layout and data components are nicely explained. You can find the book here.

Review: Learning JavaScriptMVC

I haven't been developing front-end code in JavaScript for some time. Well, to be more precise: years. Most of my JavaScript code these days is unit tests for a node.js extension, I'm maintaining at work. Recently, a book on JavaScriptMVC by Wojceich Bednanski was published by Packt. I was curious to see how contemporary web applications are written so I picked up the book. It is a short book - only 124 pages. In the preface, the author sets the requirement of the reader but I think he underestimate what it takes to read the book. In my opinion, the reader is an experience software developer with a sound knowledge of JavaScript, jQuery, and HTML. If the reader hasn't read "the good parts", I would recommend her to do so before reading this book. Furthermore, the reader should not be afraid of the Linux command line. Today, most software developers are trained in object-oriented modeling and design, and the author does assume so. Through-out most of the book, the reader sees how to develop a simple TODO manager. As TODO managers generally work with dates, the book has a number of assuming dates. On page 21, one sees a task due 1st December 1012. The approach of the book is to begin by the basic elements and gradually move to more advanced components. If the book has been much longer, I believe that many readers will be lost by this approach. To be fair, a complete example is introduced in the beginning of the book but explanations are coming in later chapters, the reader is left a bit frustrated. Chapter 2 and 3 are about topics which are invisible to the user of an application: documentation and testing. I agree with the author that these topics are important but I would have preferred them later in the book. Chapter 4 is about how to organize an application. It seems strange that large portion of the example code is commented out on page 51. Moreover, some of the plugins are discussed so briefly that the reader has no clue if there are useful or when to use them. One of the toughest part of a JavaScript application is to load the required libraries - and in the right order. In my dark past as front-end developer, I wrote a small library for loading libraries. Actually, it is just an excuse to write a graph class in JavaScript. Chapter 5 shows how to do load depending library using JavaScriptMVC. Unfortunately, the author does not explain in details how it works, and the examples are so simple that they have limited value. I like that the author introduces a complex framework like JavaScriptMVC is a very short book. But I was at times a little confused: does the author only show me the simple solution or best practises? If the publisher has asked for more pages, the author might have had a chance to get deeper into the subject. You can find the book here.

Playing with TypeScript

Taking TypeScript out for a spin

Microsoft announced a new programming language by the name TypeScript this week. The driving philosophy behind the language is to extend JavaScript. Since I have done my shared of JavaScript programming - and given talks,taught classes, and written articles and a book on the topic - I decided to take TypeScript out for a spin.
The language comes with a specification (97 pages) and a compiler. The compiler is compiling TypeScript to JavaScript. In this way, Microsoft can support virtually any platform in the world. The big trend at the moment is that JavaScript is used as a server-side programming language - node.js is popular. In my day-work, I have recently worked on an extension (in C++) for node.js for employer's database.

Open Source

One of the interesting developments of TypeScript is that Microsoft has released everything as free or open source software. According to Microsoft, they are an operating systems company and not focusing on development tools. Today, developers are used to open source software, and in order to succeed within the developer community, you are forced to released under these terms.
The TypeScript compiler has a command-line interface. Basically, it is simply a node.js application. I have tested the compiler on my laptop which is currently running Fedora 17.
As an Emacs user, I am happy to see that Microsoft has released a TypeScript mode for Emacs. It is a simple mode as it primarily does syntax highlightning and indention. I have briefly looked at the elisp source code, and it seems to pretty well organized. If TypeScript becomes popular, I do hope that we will see a more advanced mode like js2.

Classes and strongly typing

As you might know, JavaScript is an object-oriented programming language. But is does not have classes. Over the years, various techniques for encapsulating data and emulating classes have been developed. For example, you can use a function as constructor. TypeScript introduces classes, and it is possible to inherit from a class. This implies that common design patterns can probably be implemented easily in TypeScript.
JavaScript is a dynamical typed languages, and TypeScript brings strongly typing to JavaScript. You must declare variables - with associated types. It is possible for the TypeScript compiler to infer types in many cases, and an any type gives you the flexibility of weak typing.

An example

I am fond of graph theory, and I have written a simple graph class in TypeScript.I implemented typological sorting in JavaScript a few years ago as a non-trivial example for a course I was teaching.
The TypeScript example uses two classes. The MyNode class is actually just a convenient way to store collection of data items. For a C programmer, it is just a struct. The Graph class is somewhat longer. As you can see, a TypeScript class has attributes, a constructor and methods. It is different from JavaScript where you do not have classes and objects do not have methods (but properties can be anonymous functions).

class MyNode {
    id: string;
    visited: bool;
    edges: number[];
    payload: string;

    constructor(id : string, payload : string) {
        this.id = id;
        this.payload = payload;
        this.visited = false;
        this.edges = [];
    }
};
   

class Graph {
    name: string;
    nodes: MyNode[];
   
    constructor(name : string) {
        this.name = name;
        this.nodes = [];
    }

    find_node(id : string) : number {
        var i;
        var found;

        if (this.nodes.length == 0) {
            return -1;
        }

        i = 0;
        found = false;
        while (i<this.nodes.length) {
            if (this.nodes[i].id == id) {
                found = true;
            }
            if (found) {
                break;
            }
            i++;
        }
        if (found) {
            return i;
        } else {
            return -1;
        }
    }

    // add nodes - id is a unique string for identification
    add_node(id : string, payload : string) {
        if (this.find_node(id) < 0) {
            var edges = [];
            var n = new MyNode(id, payload);
            this.nodes.push(n);
        }
    }

    // add edge - work well for DAGs
    // if you don't work with DAGs, then use
    // add_edge(i, j) ; add_edge(j, i);
    add_edge(src : string, dst : string) {
        var n;
        var i = this.find_node(src);
        var j = this.find_node(dst);
        if (i>=0 && j>=0) {
            n = this.nodes[i].edges.push(j);
        }
    }

    // topological sorting - return array of IDs
    // see http://en.wikipedia.org/wiki/Topological_sort
    // (alternative algorithm)
    sort() : number[] {
        var i, j, m;
        var L = [], Lid = [];
        var that = this;

        for (i in this.nodes) {
            this.nodes[i].visited = false;
        }

        function _visit(n) {
            var j;
            if (!that.nodes[n].visited) {
                that.nodes[n].visited = true;
                for (j in that.nodes[n].edges) {
                    m = that.nodes[n].edges[j];
                    _visit(m);
                }
                L.push(n);
            }
        }
        for (i in this.nodes) {
            _visit(i);
        }

        for (i in L) {
            j = L[i];
            Lid.push(this.nodes[j].id);
        }
        return Lid;
    }
}

// Test case
var g = new Graph("Software");
g.add_node('Emacs', '23.1');
g.add_node('GTK',   '2.18.3');
g.add_node('Cairo', '1.8.8');
g.add_node('glib',  '2.22.3');
g.add_node('libc',  '2.10.1');
g.add_edge('Emacs', 'libc');
g.add_edge('Emacs', 'GTK');
g.add_edge('GTK',   'glib');
g.add_edge('GTK',   'Cairo');
g.add_edge('Cairo', 'libc');
g.add_edge('glib',  'libc');
var list = g.sort();
console.log('Topological sort: '+list.join('->'));


The TypeScript language is an interesting development as it offers (web) programmers a more mainstream approach. To be honest, when I have been teaching JavaScript for seasoned programmers, they have often been puzzled by the odd object system behind JavaScript. The scope rules of JavaScript are always regarded as being odd. I have not yet examined rules in TypeScript, but I hope to return to the topic in the near future.

Open Source Days 2012

I'm going to the Open Source Days 2012 conference this weekend. This year's program is really interesting, and I'm looking forward to spend two days listening to geeky talks. The organizers have ask me to take the role as chairman. Saturday I will chair the session of web programming, but I'm not sure about Sunday.

Actually, for me the conference began yesterday. I gave a full day course on JavaScript programming. It was really great to explains the language in details for a group of experience software developers. You can find my slides at slide share.