Angular2 & Native Script GDG DevFest 2016

Roma 2016Google DevFest

Code Once Run Everywhere

Antonino OrlandoLuciano Murrunie il Team del GDG Roma L-Ab

Roma DevFest 2016

Antonino Orlando

Luciano Murruni

it.linkedin.com/in/lucianomurruni

[email protected]/jimilucio

[email protected]/in/orlandoantoninoplus.google.com/+AntoninoOrlando

Roma DevFest 2014

http://angular.io

2.1.0

Final release! FINALLY!!

Roma DevFest 2014What's next?

Roma DevFest 2016Why Angular2?

Roma DevFest 2016Performance

Roma DevFest 2016Multi Device

Roma DevFest 2016Community

Roma DevFest 2016

https://octoverse.github.com/

Contributors

Roma DevFest 2016Components

Roma DevFest 2016Languages

Roma DevFest 2016AngularJS Architecture

Module

Config

Routes

ViewDirectivesFactoriesServices

Providers

Controller

Roma DevFest 2016Angular2 Architecture

Roma DevFest 2016Component Lifecycle

Component content has been Initialized

The component was Created

Component content has been Destroyed

TypeScript

Roma DevFest 2016TypeScript

● Superset of JavaScript

● Annotations

● Types

● Interfaces

● Productivity booster

● Compiles ES3/ES5

Roma DevFest 2016How I can use it

$ npm install -g typescript

$ tsc --init --target es5 --sourceMap

--experimentalDecorators --emitDecoratorMetadata

Roma DevFest 2016Interface

interface Person {

firstName: string;

lastName: string;

}

function greeter(person: Person) {

return "Ciao, " + person.firstName + " " + person.lastName;

}

var user = { firstName: "Luciano", lastName: "Murruni" };

document.body.innerHTML = greeter(user);

Roma DevFest 2016Class

class StrangeFruit{

type: string;

constructor(type: string){

this.type = type;

}

}

Roma DevFest 2016Extending Classes

class ApplePen extends StrangeFruit{

name: string;

quantity: number;

constructor(type: string, quantity: number){

super(type);

this.quantity = quantity;

}

}

Roma DevFest 2016TypeScript - Template

let template: '<h1>My First Angular App</h1>';

let template: `

<h1>My First title</h1>

<h2>My Second Title</h2>

`;

Roma DevFest 2016Angular2 Component

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

export class PersonComponent implements OnInit {

constructor() {}

ngOnInit() {}

}

// Annotation section

@Component({

selector: 'my-app',

template: '<h1>Hello {{ name }}</h1>'

})

https://cli.angular.io/

Roma DevFest 2016Get Started

$ npm install -g angular-cli

$ ng serve

$ ng new MY_PROJECT_NAME

$ cd MY_PROJECT_NAME

Roma DevFest 2016Get Started

http://localhost:4200/

Roma DevFest 2016File Structure

Test fileDependencies

App source

Configuration

Roma DevFest 2016File Structure in depth

App ComponentsAssets stuff

Build params

Project IndexMain

Compiler configurationProject Index

Roma DevFest 2016Available command

Component $ ng g component my-new-component

Directive $ ng g directive my-new-directive

Pipe $ ng g pipe my-new-pipe

Service $ ng g service my-new-service

Class $ ng g class my-new-class

Interface $ ng g interface my-new-interface

Enum $ ng g enum my-new-enum

Module $ ng g module my-module

Roma DevFest 2016Build and test

$ ng build //development release

$ ng test

$ ng e2e

$ ng build --prod //production release

Roma DevFest 2016More about performance

Development

4.0K index.html8.0K inline.js8.0K inline.map2.7M main.bundle.js2.8M main.map 12K styles.bundle.js 16K styles.map

Production

4.0K index.html4.0K inline.js896K main.xxxx.bundle.js204K main.xxxx.bundle.js.gz8.0K styles.xxxx.bundle.js

{Let’s Code!}

https://goo.gl/YMlNSp

Roma DevFest 2016

{Resources}

Roma DevFest 2016ANGULAR DOCS

https://angular.io/docs/

Roma DevFest 2016ANGULAR CLI

https://cli.angular.io/

Roma DevFest 2016TypeScript

https://www.typescriptlang.org/docs/

Roma DevFest 2016NG Migrate

http://ngmigrate.telerik.com/

Roma DevFest 2016Angular Material Design

https://material.angularjs.org/latest/

Roma DevFest 2016UI Bootstrap

http://valor-software.com/ng2-bootstrap

http://meetup.com/ng-rome

Roma DevFest 2016

Angular Developer Italiani

Roma DevFest 2016

YAHF

“you need to know at least two different programming languagesfor an independent or hobbyist developer, this could be time-consumingfor an enterprise, hiring for the multi-platform skill sets could get expensive supporting only one mobile platform is no longer a good idea.

This is where hybrid mobile applications come into play”

Roma DevFest 2016

Hybrid matter

“Different platforms have different ways they expect you to use them that alter the entire experience design”

[Martin Fowler]

The problem with most of these hybrid frameworks is that they rely heavily on the web view of the device.

Not all web views are equal, application performing unpredictably on the thousands of devices that exist

Roma DevFest 2016

What is NativeScript?

An open source framework for building and running native iOS, Android, and Windows Phone apps with a single, JavaScript, XML,

CSS code base

Roma DevFest 2016

Cross platform

Roma DevFest 2016

Other players

Roma DevFest 2016

Javascript framework free choice

Write your application using plain Javascript

Use TypeScript to get Object Oriented

features and compile time error checking

Use Angular to architect application

Roma DevFest 2016

How it works?

Everything starts with JavaScript virtual machines, as they’re what NativeScript uses to execute JavaScript commands.

NativeScript uses V8 on Android and JavaScriptCore on iOS

Because NativeScript uses JavaScript VMs, all native-API-accessing code you write, still needs to use JavaScript constructs and syntaxes that V8

and JavaScript Core understand.

Roma DevFest 2016

Architecture

Android

iOS

var time = new android.text.format.Time();

time.set( 1, 0, 2015 );

console.log( time.format( "%D" ) );

var alert = new UIAlertView();

alert.message = "Hello world!";

alert.addButtonWithTitle( "OK" );

alert.show();

Roma DevFest 2016

Architecture

NativeScript uses reflection to build the list of the APIs that are available on the platform they run on

generating this data is non-trivial from a performance perspective, NativeScript does it ahead of time, and embeds the pre-generated metadata

during the Android/iOS build step

Roma DevFest 2016

Architecture

The NativeScript runtime’s C++ code cannot directly access Java APIs -> JNI On iOS this extra bridge is unnecessary as C++ code can directly invoke Objective-C APIs

1) The V8 function callback runs.2) The NativeScript runtime uses its metadata to know that Time()

means it needs to instantiate an android.text.format.Time object.3) The NativeScript runtime uses the JNI to instantiate a

android.text.format.Time object and keeps a reference to it.4) The NativeScript runtime returns a JavaScript object that proxies

the Java Time object.5) Control returns to JavaScript where the proxy object gets stored

as a local time variable.

Roma DevFest 2016

Architecture

NativeScript run JavaScript on the UI thread

provide high performance access to 100% of native platform APIs through JavaScript. Period. No

trade-offs. No limits

Roma DevFest 2016

Get started

• Android 4.2 or a later stable official release• iOS 7.0 or later stable official release• git, java 8• android SDK, XCode • nodejs 4.5 + npm• optional: VirtualBox + Genymotion

sudo npm install -g nativescriptRoma DevFest 2016

Get started

tns create my-app-name --ng

tns platform add iostns platform add android

tns run android --emulatortns livesync android --emulator --watch

Roma DevFest 2016

Get started

Roma DevFest 2016

UI = XML + CSS

Roma DevFest 2016

JS

Roma DevFest 2016

resources

http://nsimage.brosteins.com/Home/UploadIcon

http -> allow insecure request on iOS 9!

docs.nativescript.org

developer.telerik.com

Roma DevFest 2016

{Let’s Code!}

Roma DevFest 2016

https://goo.gl/FGSZhu

Roma DevFest 2016

Thank You

Antonino Orlando

Luciano Murruni

it.linkedin.com/in/lucianomurruni

[email protected]

twitter.com/jimilucio

[email protected]

it.linkedin.com/in/orlandoantoninoplus.google.com/+AntoninoOrlando

Roma DevFest 2016