Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular...

Building native mobile apps with Angular 2.0 and NativeScriptYou know Angular. Now you know mobile.

Lohith G N

Technical Evangelist

Nagaraj@progress.com

The first entry from the Google docs

Platform SpecificPlatform Agnostic

MarkupDom

AdapterCompiler

Proto Views

RendererVisual Tree

Angular 2 meets NativeScript

HTML Parse5 CompilerProto

Views

NativeScript Renderer

Native

Visual Tree

NativeScript Checkbox with Angular 2

an open source framework for building truly

native mobile apps with JavaScript. Use web

skills, like TypeScript, Angular and CSS, and get

native UI and performance on iOS and Android.

NativeScript is…

The {N} difference…

Search for

“Examples NativeScript”

in the iOS App Store or Google

Play to try this out for yourself.

Rich, animated,

“no compromise”

native UI(with shared UI code)

1

Maximum code

and skill

reusability

2

Video credit: Nathan Walker, {N} community member

First-class Angular and TypeScript support3

+ =

Android iOS

Web

100% access to

Android and

iOS APIs

4

Runs on V8 JavaScript VM

Runs on JavaScriptCore VM

More details at http://bit.ly/how-nativescript-works

Calling Android API

Calling Android API

Calling Android API

Calling Android API

Calling Android API

Metadata Generating Process

M

G

P

=

NativeScript modulesCode Modules Platform API

One UI syntax for all

Example: NativeScript file module

NativeScript Modules—There are a lot

HTTP module example

De

sti

nati

on

Imp

lem

en

tati

on

Ab

str

ac

tio

n

La

ye

r

The big picture

XMLHttpRequest

<NS Module>

Native

iOS call

Native

Android call

iOS App Android App

De

sti

nati

on

Imp

lem

en

tati

on

Ab

str

ac

tio

n

La

ye

r

The bigger picture

HTTP

<Angular Component>

XMLHttpRequest

<NS Module>

Native

iOS call

Native

Android callAjax call

iOS App Android App Web App

XMLHttpRequest

<Browser>

One syntax for all

Attribute Binding: [attribute]

Event Binding: (event)

Intercepting input: #idhandler

Conditions: *ngIf="expression"

Loops: *ngFor="expression"

Styling: [class.style1]="expression"

CSS

http://docs.nativescript.org/styling#supported-

properties

The difference is in the UI

Web UI != Mobile UI

Native LayoutsAbsolute Dock Grid Stack Wrap

DEMO

2013 2014 2015 2016 2017

Early

prototypes

“Core”

engineering

Public

launch

Adoption

ramp-up

Mass

adoption

Project Timeline

Join the growing

NativeScript

community on Slack

bit.ly/nativescript-slack

https://twitter.com/nativescript

Q & A