"this" in JavaScript/TypeScript

I have been struggling with using "this" in JavaScript, ever since I got into that area of programming.

There are lots of warnings on the web, where programmers who are used to a certain behaviour regarding "this" (Like me) can fall into this trap.

I recently found some really good resources that explain it.

There's one¹ that explains it a little regarding "this" in JavaScript.

But as I have been writing in TypeScript, I was looking for an explanation that focuses on TypeScript and helps me find the best solution to deal with this. I found that one in [2].

For example

So I've got some code that could use a bit of a look-over.

Here's the troublesome bit.

TypeScript has an excellent Tutorial, which I've used time and again to write my things. One of the pages I've used is the explanation regarding HTTP which you can find at [3].

In it they mention a "handleError" method, which can handle HTTP errors of the PlayerService. Convenient, so I used it. It works.

Next, I wished for the handleError method in the PlayerService that takes care of HTTP connections to notify the ErrorsService. So naturally, I inject the ErrorsService into the PlayerService.

Unfortunately, in the handleError, the ErrorsService is 'undefined'. (See line 30 in the gist below)

It is explained in reference [2] why this is, but I like the following quote:

“The biggest red flag you can keep in mind is the use of a class method without immediately invoking it. Any time you see a class method being referenced without being invoked as part of that same expression, this might be incorrect.”

Now there are several solutions for this described in [2].

The solution below is what I came up with on my own, and I don't really like it, but it works.

Local Fat Arrow

I prefer the solution called the "Local Fat Arrow", which looks like this:
I love it!

References

[1] Mozilla Developer Network - javascript:this

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

[2] Github/Microsoft/TypeScript - 'this'in TypeScript

https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript

[3] ts GUIDE - HTTP CLIENT

https://angular.io/docs/ts/latest/guide/server-communication.html

Final project for DEV201x Introduction to TypeScript on edX.org

I have just now completed the course on typescript¹ available at edX².

The good part about the course is that it is a decent introduction into TypeScript, and also provides information on why typescript was invented in the first place. However, that is basically all it is. To become adept at TypeScript, besides knowing TypeScript, it is essential to have a pretty good grasp of JavaScript.

It was a good course, and helped me a lot, but it is a small course indeed.

edX vs. Coursera

This is also the first time that I got to try edX² as I previously only had experience with Coursera³. I don't think it is fair to compare the two, as it very much depends on which course you take. I do think the web interface of edX, in total, could use a little more polishing up, as some of the user interface quirks were hard to understand.

Coursera, I think, is a bit more polished and provides a better experience.

Final Project

The Final Project consisted of a small web application that displays information regarding Painters. I basically did the bare minimum, as I find it hard to find the time to do anything constructive after working hours. (What with life and everything).

What helps is the little IDE provided for free by Microsoft called Visual Studio Code⁴.

The animated gif below shows the user interface of the little web application written in TypeScript⁵.

Click on it for a bigger and better view.

References

1. Microsoft: DEV201x Introduction to TypeScript

https://courses.edx.org/courses/course-v1:Microsoft+DEV201x+1T2016/info

2. edX | Free online courses from the world's best universities

https://courses.edx.org/

3. Coursera : Online Courses From Top Universities

https://www.coursera.org/

4. Microsoft - Visual Studio Code

http://code.visualstudio.com/

5. Typescript Language

http://www.typescriptlang.org/

Typescript

Our architect recently let us know that there is an Introduction to TypeScript¹ available on the edX Website².

Naturally, given that the TypeScript I am using at work is still very hard for me to understand, and given the fact that I wish to start using Angular 2 (which uses Typescript extensively) at home, I found this to be fascinating.

It was only a matter of minutes for me to enroll.

The course starts on May the 16th and is given by Microsoft experts and apparently the inventor of the TypeScript language.

I am quite looking forward to it and will let you know my thoughts at the end of the course.

References

[1] edX - Introduction to TypeScript

https://www.edx.org/course/introduction-typescript-microsoft-dev201x-1

[2] edX - Free online courses from the world's best universities

https://www.edx.org/

Microsoft Virtual Academy

https://mva.microsoft.com/

Typescript Tutorial - Quick Start

http://www.typescriptlang.org/Tutorial

Front end update: Angular 2.0 & HTTP/2

I have taken up learning Angular, yet it seems that a new angular is being prepared, Angular 2¹. Angular 2 seems to be a complete rewrite, and has a very different architecture. For one thing, it can work with ECMAScript 6 and TypeScript.

Luckily, I managed to be at a small session regarding Angular 2 at Quintor, today, Thursday the 18th of February 2016.².

As a matter of fact, I am writing this blog in the train home.

HTTP/2

The speaker was Martijn van Campenhout of Quintor. The first presentation was regarding the new HTTP/2 protocol (officially released in May 2015), which is rapidly replacing the old HTTP/1.1 version (released in 1996). It is based on the SPDY implementation developed by Google in 2010 and officially submitted for standardisation.

Statistics shown by Mozilla indicate that an decrease of pageload times of 2.2 seconds, results in an increase of Downloads by about 15%.^{3 4}

Old tips and tricks

The old tips and tricks that are used to deal with the defficiencies of HTTP/1.1 and the lack of bandwith and troubles with latency were:

• combining files as much as possible
• inlining everything
• minifying everything
• domain sharding
• using sprite files
• define critical CSS and JS files
• using GZIP

These different tactics are used to make sure the Webbrowser has to do a minimum number of requests and does not need to get a lot of data to the user.

It seems the Chrome browser development tools has excellent support for simulating bad connections or large latency, using a variety of set network connection types.

Another common tactic was to display/render only those parts of the web page that are visible to the user. Once the user starts scrolling, the parts that scroll into the viewscreen of the user are downloaded and rendered. This is called "the Fold"⁵, and is a common DTP term.

There was a most impressive demonstration, where a picture consisting of about 100 smaller pictures was being shown, with a one second delay (latency) between the request and the response for a smaller picture. The difference between HTTP/1.1 and HTTP/2 was very big. Where the Browser only allows 8 concurrent connections with HTTP/1.1 causing a severe bottleneck, a single connection using HTTP/2 was more than enough to show the entire picture in about a second.

The tactics used for HTTP/2 can be summed up as follows:

Multiplexing

different Streams of data (files, css, images, html, javascript) across the same HTTP connection

Priority

allowing a setting of priority based on content. For example that the big logo should be loaded first, and the little icons at the bottom of the page last.

Binary Headers

easier and quicker to parse, fixed length, unambiguous

HPACK

In the past headers were not compressed, this has now changed.

Server push

server remembers the combination of files requested. One file request will trigger the others automatically.

This is also the first time that I heard the term CRIME, "Compression Ratio Info-leak Made Easy". Basically it boils down to a man-in-the-middle-attack, adding stuff to a message to see if it increased the compressed file. If it does not, the item added already was part of the file, and he has learned something valuable regarding the message.

The HTTP/2 is already incorporated in Apache server, NGINX. Servlet specification 4.0 of Java EE 8 will have support for it (JSR-369).

Criticisms

There were some criticisms regarding HTTP/2, though.

It seems the HTTP/2 might just be available only using HTTPS. The configuring of priority and server push needs to be done on the backend right now and cannot be controlled by the webdeveloper. This causes a tight coupling between front end and back end, which most people (including me) might not like.

All these optimalisations mean absolutely nothing, if your resources (html files, images, etc) are retrieved from many different servers.

Note: the effect of HTTP/2 is also that the old tips and tricks are not only useless, but can actually hamper the responsiveness of the website. An example of this is caching.

Angular 2

The speaker, Rachèl Heimbach, went quite fast through his presentation, which means we had time for two presentations in stead of one. On the other hand, it did require an inordinate amount of attention and knowledge of Angular/JavaScript/TypeScript to follow.

Angular 2 uses both ECMAScript 6 and TypeScript.

Some of the most important features⁶ of ECMAScript 6 that will return when you are attempting Angular 2:

• class
• import
• export
• private namespaces (without export and import, everything is by default off limits)
• default values (used when parameters are omitted in the function call)
• lambdas (no longer do we require the use of "var self = this;".

Benefits of using TypeScript in angular 2 are as follows:

• safe typing, makes refactoring and debugging a whole lot easier
• @Decorators, makes injection and adding behaviour generically a whole lot easier

Instead of the familiar services, factories and controllers of Angular 1, Angular 2 has simplified this a bit. Angular 2 basically consists of only Web components (that make up your pages/views/etc) and singleton injectors (that can take the place of your controllers, factories and services.) As you can see there is no longer a distinction necessary.

Some more enhancements:

• ChangeDetection
• ViewEncapsulation (with a shadow dom)
• Provide function
• ngUpgrade thing

It is possible to upgrade an Angular 1 application piece-by-piece or add Angular 2 components to it. The other way around is also possible.

Notes

HTTP/2 seems to be more and more widely supported. Angular 2 is still in the beta phase, however, it seems to be fairly stable. Unfortunately, it is currently not recommended for production use. However, the presentation did point out that in order to make the task of porting your application from Angular 1 to Angular 2 less onerous, it might be a good bet to start by designing the new parts of your Angular 1 application according to the Angular 2 style.

A question was raised on whether or not you should use Angular 2 at all. It seems Google will support Angular 1 for as long as there is a market for it. I heard that they measure the traffic to the two websites (Angular 1 and Angular 2) to determine interest. I got the impression from the presentation that Angular 1 has slowly been moving towards the new Angular 2 way of doing things.

Performance wise, Angular 2 is a step in the right direction. Keeping new Angular 2 in mind, whilst working on an Angular 1 application seems to be a very safe bet. If the need will arise in the future that a port is required, at least it will not be as herculean a task as first thought.

References

[1] Angular 2

https://angular.io/

[2] Quintor - Front end update: Angular 2.0 & HTTP/2

https://www.quintor.nl/sessie-front-end-update/

[3] Webpage testing

http://www.webpagetest.org

[4] Can I use?

http://www.caniuse.com

[5] Wikipedia - Above the fold

https://en.wikipedia.org/wiki/Above_the_fold

[6] ES6 Features

http://www.es6-features.org