Featured post

Angular 2 – Part I

This article is a quick refresher of all the ingredients we need to know before jumping to Angular 2. In this article you will get a high level understanding about Typescript, TSD, SystemJS, Transpilers, Module Systems (CommonJS, AMD and ES 6).

With some simple examples we will cover the core aspects of all of above that will form building blocks for our Angular 2 application. This will also help in seeing these ingredients in isolation before we mix them up to create a spicy Angular 2 application.

Lets build a simple Hello World application with SystemJS. This application just prints “Hello Front End Engineers” in the browser. The code is self explanatory so we will not go in detail of it.

You can download the full source code from here.

Using ES5 Modules – AMD and CommonJS

index.html

<!DOCTYPE HTML5>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
</head>

<body>

<script src="https://jspm.io/system@0.18.js"></script> 
<script>
 
 System.config({
 "paths": {
 "*": "*.js"
 }
 });
 System.import('app');
 
</script>

</body>
 
</html>

app.js

define(["require", "person"], function (require, personModule) {
 var person = new personModule.Person("Front End ", "Engineers");
 document.body.innerHTML = person.greet();
});

 person.js

define(["require", "exports"], function (require, exports) {
 var Person = (function () {
 function Person(fname, lname) {
 this.fullname = fname + " " + lname;
 }
 Person.prototype.greet = function () {
 return "Hello " + this.fullname;
 };
 return Person;
 })();
 exports.Person = Person;
});

This is fairly simple example of using a AMD type module. The statement below loads the app.js and then detects the type of module system it has at runtime using RegEx.

 System.import('app');

Lets say if we want to use CommonJS module system instead of AMD in example above. The new app.js and Person.js will look like this:

app.js

var Person = require("person").Person; 
var objPerson = new Person("Front End ", "Engineers"); 
document.body.innerHTML = objPerson.greet();

person.js

var Person = (function () {
 function Person(fname, lname) {
 this.fullname = fname + " " + lname;
 }
 Person.prototype.greet = function () {
 return "Hello " + this.fullname;
 };
 return Person;
})();
exports.Person = Person;

The ES6 way

app.js

import {Person} from 'module-es6-person';
var person = new Person("Front End ", "Engineers");
document.body.innerHTML = person.greet();

module-es6-person.js

var Person = (function () {
 function Person(fname, lname) {
 this.fullname = fname + " " + lname;
 }
 Person.prototype.greet = function () {
 return "Hello " + this.fullname;
 };
 return Person;
})();
exports.Person = Person;

Notice ES6 syntax import, class, constructor etc.

If your browser doesn’t support ES6 which will likely be the case the SystemJS will load transpiler automatically and will transpile (runtime compilation from ES6 to ES5) app.js and person.js. You can see the transpiled version in you browser. Chrome Dev Tools > Sources.

Screen Shot 2015-09-29 at 2.59.23 PM

You can also additionally specify which transpiler to use through System.config object.

As we see in above examples that SystemJS is a Universal Module loader and it loads ES6 modules, AMD, CommonJS. It can also load global scripts in the browser and NodeJS. Works with both Traceur and Babel (Transpilers).

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

  • Align with ECMAScript current and future standards.
  • It helps in statically identifying constructs that are likely to be error.
  • Added support for Angular 2 features like Annotation
  • No runtime overhead as it provides typescript compiler to precompile all typescript files to ES5 or ES6 format.

Typescript = ES5 + ES6 + Types + Additional Language Feature (e.g. Angular 2 Annotation)

To install typescript compiler using node:

npm install -g typescript

To run the compiler:

tsc yourfile.ts

Lets build above example suing typescript.

Since we said that typescript is superset of ES6. The above ES6 code is a valid typescript code. The only change is in file extensions app.ts and person.ts. To the root folder we will add another file tsconfig.json which has configuration for compiler.

  {
 "compilerOptions": {
 "module": "commonjs",
 "target":"es5"
 },
 "files": [
 "app.ts"
 ]
 }

Notice “module” option. It can be either commonjs or amd and “target” to es5. In files “app.ts” will suffice as compiler will automatically compile the dependencies as well.

Now in command line you need to point to the root folder and run

tsc --watch

This will generate “.js” files for all “.ts” files which will have ES5 compliant code.

You can download the full source code from here.

Finally, about TSD. TSD is a package manager to search and install TypeScript definition files directly from the community driven DefinitelyTyped repository. It provide intellisense to the code editor by exposing the APIs through “d.ts” files which are typescript files with API declarations of the library. As an example if you want to use jQuery in your typescript (.ts) file the editor may not understand it and will show it as an error or incorrect keyword.

But through TSD package manager you can include typings to your project  ( e.g jQuery.d.ts file) and reference it in your code as

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

then not only the editor errors will go away it will also enable intenseness for that library.

To install TSD

$ npm install tsd -g

To install a definition library simply do

tsd query jquery --save --action install

–save will create/update the tsd.json for configuration management.

Join Angular 2 community.