Angular2-for-all-platforms.md

Building mobile apps with Angular 2

Angular is the most popular framework for building client side web applications (for more info see Stack Overflow). Over the last few years it enabled over 1 million developers to build great Single Page Web Applications. However the framework was always limited to the web only, which meant that you would have to use totally different tools/languages/frameworks if you needed to target desktop and mobile applications as well.

Platform agnostic architecture

This is where Angular 2 comes into play. The new version is completely platform agnostic, which means that it is designed to be used with various different platforms (be it web, mobile or desktop). In simple terms the architecture is split into two parts:

• Platform agnostic - where your markup (HTML) is parsed by a Dom Adapter and then compiled into a set of Proto Views. This process is not specific to any platforms and most of its pieces can be shared between platforms.
• Platform specific - here is where the magic happens. To target each platform you need a Platform Specific Renderer, which based on the Proto Views generates a Visual Tree (used to display the UI). The Renderer is also responsible for propagating the changes and events between the Proto Views and the Visual Tree.

With this architecture in place it was a matter of creating the necessary extensions to target different platforms.

Adding mobile to the picture

This opened up the doors to NativeScript, an Open Source framework for building iOS, Android and (soon) Windows Universal apps with 100% Native UI. Since the middle of 2015 both the Angular and the NativeScript teams have been working on bringing the two together. This resulted in the creation of NativeScript 2.0 (news).

As a result NativeScript uses HTML as the markup to define the UI structure and Parse 5 as the DOM adapter. The biggest work was in implementing the NativeScript Renderer, which provides communication between the Proto Views and the Native UI components.

Here is how this fits in the Angular 2 architecture.

Why NativeScript

It works with Angular 2

You can use all of the Angular 2 syntax and get a mobile app as a result:

@Component({
  selector: "my-app",
  template: `
  <Page>
    <StackLayout>
      <Button text="Tap Me" (tap)="onTap()"></Button>
      <Label [text]="counter"></Label>
      <Label *ngIf="counter>10" text="WOW!!! you are really good"></Label>
    </StackLayout>
  </Page>
  `
})
export class MyComponent {
  counter: number = 0;
  onTap() {
    this.counter++;
  }
}

Abstraction Layer

NativeScript comes with an extensive abstraction layer, which allows you to build mobile apps with the single code for all supported platforms. This applies to the UI Abstraction layer, where each UI Component has an underlying native implementation. For example the below code will give us a Native UI with a set of Native components.

@Component({
  selector: "my-app",
  template: `
  <Page>
    <StackLayout>
      <Button text="GO" (tap)="onTap()" height="50" width="100"></Button>
      <Label [text]="selectedIndex" height="50" width="100"></Label>
      <ListPicker [selectedIndex]="selectedIndex" [items]="items"></ListPicker>
      <DatePicker [day]="day" [month]="month" [year]="year"></DatePicker>
      <TimePicker [hour]="hour" [minute]="minute"></TimePicker>
    </StackLayout>
  </Page>
  `
})

Also you get access to a rich set of core modules that abstract out the native functionality. For example if you want to take a picture just use the camera module.

Just require the necessary module and call it. The module will take care of the platform specific details.

import {Image} from "ui/image";
import cameraModule = require("camera");

cameraModule.takePicture().then(picture => {
    console.log("Result is an image source instance");
    var image = new Image();
    image.imageSource = picture;
});

And if you are curious what happens on Android (github) or iOS (github) when you call takePicture or any of the modules, just check the github repo with all of the core components.

Direct access to the Native API

Obviously no abstraction layer can cover all the possible functions available on each supported platform. However that doesn't necessarily needs to be a problem, as NativeScript gives you a direct access to the Native API. This means that if you want you could make a direct call to Android or iOS APIs.

For example if you run the below JavaScript code on Android, you will get a new instance of a file object.

function openFile(url) {
  var myFile = new java.io.File("filePath.txt");
  return myFile;
}

Want to learn more?

There will be a couple of talks about NativeScript at DWX, which are really worth attending.

• Introduction to NativeScript on Monday 20-June at 17:00 - in this talk you will learn what NativeScript is made of, how it works inside and you will see some JavaScript examples on how to build mobile apps with it.
• Native Mobile Apps mit NativeScript und Angular 2.0 on Wednesday 22-June at 9:00 - in this talk you will learn how we built the NativeScript 2.0, how does it work with Angular 2 and how to aim for a shared code base between mobile and web apps.

There is a great Getting Started guide, which you can follow to build a Native iOS and Android mobile app with Angular2 and NativeScript.