Build Your First Mobile App With The NativeScript and Angular2 - Part 3

Published on July 5, 2016

In previous posts we have seen, What is the difference between Hybrid Apps and Native Apps? How to build Mobile Applications using Angular2 and Typescript is here.

How to setup environment, Which tools we should use to build applications with NativeScript is here.

In this post, We will see few coding concepts and technologies you need to understand before you can build applications using nativescript.

As I mentioned before in Part 1 of the series, we will build our application with Angular2 and Typescript.

Angular2 and NativeScript 2.0 is built with the support of Typescript.

Let’s see few concepts.

##ES5/ES6/ES7

As we all know ES5 is the current Javascript which supports in all browsers.

ES6 is already released but it is not yet supported in all browsers but we can use transpilers to write code in ES6 and convert it back to ES5.

We have transpilers like Babel or traceur by google to compile our ES6 code to ES5.

ES7 is not yet finalized but Angular2 is using one if it’s key feature Decorators. In fact, Angular2 used Decorators everywhere across its framework. Let’s see an example of a simple Angular 2 applicaion.

import {Component} from '@angular/core';

@Component({
    selector: 'hellow-world',
    template: '<h1>Hellow World</h1>'
})
export class HelloWorld {

    constructor() {
        console.log('Hellow World application initilized...');
    }
}

Here @Component is decorator which will do the magic for us so we can use the tag <hellow-world></hellow-world> in our HTML markup.

Don’t worry about the code much. We will see more soon.

Typescript

TypeScript is a super set of ES5 and ES6 JavaScript. Angular2 itself build on top of Typescript.

The key feature Typescript is that we can have a specific data type which is very useful to catch errors, IntelliSense while we code. Besides that we can also use Typescript as a transpiler so that our ES6, ES7 code will be converted to ES5 or ES6 (based on tsconfig.json).

In features when all browsers ready to have ES6 code we simply change one config file in our typescript application. The code will be ES6 JavaScrpit.

Besides these, typescript has so many other features.

You can check a few important features of typescript at Cooking Typescript.

The Cooking Typescript tutorial will only have the main features in typescripts.

So, We need to learn three more ES6 concepts to get going further.

Arrow functions

There was big confusion about using this keyword in ES5 JavaScript.

ES6/typscript made it very easy via Arrow functions. So, basically, arrow functions are a short and sweet way of writing anonymous functions. If you use this inside that context is belong to parent. Let’s see an example.

ES5 example.

    var self= this;
    self.time = new Date();
    setInterval(function () {
        return self.time = new Date();
    }, 1000);

ES6 example.

    var time = new Date();
    setInterval(() => {
        return this.time = new Date();
    }, 1000);

Classes

Class is a new feature in ES6. Classes useful to related code together. When classes are combined with ES6’s modules system it became so powerful tool to write moduler code.

Since Typescript is the superset of ES6 typescript can have classes.

Let’s see an example.

class LoginComponent {
    name: string;

    constructor(name: string) {
        this.name = name
    }

    build() {
        console.log('Building '+ this.name + " component");
    }
}

var loginWidget = new LoginComponent('login');
loginWidget.build();

When you compile this code using tsc typescript compiler you will get ES5 code as below.

var LoginComponent = (function () {
    function LoginComponent(name) {
        this.name = name;
    }
    LoginComponent.prototype.build = function () {
        console.log('Building ' + this.name + " component");
    };
    return LoginComponent;
}());
var loginWidget = new LoginComponent('login');
loginWidget.build();

Template Strings

In ES5, If you want to assign a long string to a variable we would write our code as

var html = '<div class="panel panel-default">'+
              '<div class="panel-heading">Panel Heading</div>'+
              '<div class="panel-body">Panel Content</div>'+
           '</div>';

But in ES6/TypeScript same will be

var html = `<div class="panel panel-default">
              <div class="panel-heading">Panel Heading</div>
              <div class="panel-body">Panel Content</div>
           </div>`;

Easy right?

Also, If you want to have variables inside the string.

var heading = 'Panel Heading',
    body    = 'Panel Content',
    html    = `<div class="panel panel-default">
                 <div class="panel-heading">${heading}</div>
                 <div class="panel-body">${body}</div>
               </div>`;

This is quite a useful feature and we will use it a lot in Angular 2 whenever we have inline templates for directives.

So far we covered a few ES6/Typescript features to build our NativeScirpt application.

In next post, we will see how to create an application, build it, run it and watch for file changes.