Embed Size (px)
Citation preview
Building native mobile apps with Angular 2.0 and NativeScriptYou know Angular. Now you know mobile.
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
