building native mobile apps with angular 2.0 and ... · building native mobile apps with angular...
TRANSCRIPT
![Page 1: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/1.jpg)
Building native mobile apps with Angular 2.0 and NativeScriptYou know Angular. Now you know mobile.
![Page 3: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/3.jpg)
![Page 4: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/4.jpg)
The first entry from the Google docs
![Page 5: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/5.jpg)
Platform SpecificPlatform Agnostic
MarkupDom
AdapterCompiler
Proto Views
RendererVisual Tree
Angular 2 meets NativeScript
HTML Parse5 CompilerProto
Views
NativeScript Renderer
Native
Visual Tree
![Page 6: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/6.jpg)
NativeScript Checkbox with Angular 2
![Page 7: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/7.jpg)
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…
![Page 8: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/8.jpg)
The {N} difference…
![Page 9: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/9.jpg)
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
![Page 10: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/10.jpg)
Maximum code
and skill
reusability
2
Video credit: Nathan Walker, {N} community member
![Page 11: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/11.jpg)
First-class Angular and TypeScript support3
+ =
![Page 12: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/12.jpg)
Android iOS
Web
![Page 13: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/13.jpg)
100% access to
Android and
iOS APIs
4
![Page 14: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/14.jpg)
Runs on V8 JavaScript VM
Runs on JavaScriptCore VM
More details at http://bit.ly/how-nativescript-works
![Page 15: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/15.jpg)
Calling Android API
![Page 16: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/16.jpg)
Calling Android API
![Page 17: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/17.jpg)
Calling Android API
![Page 18: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/18.jpg)
Calling Android API
![Page 19: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/19.jpg)
Calling Android API
![Page 20: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/20.jpg)
Metadata Generating Process
M
G
P
=
![Page 21: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/21.jpg)
NativeScript modulesCode Modules Platform API
![Page 22: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/22.jpg)
One UI syntax for all
![Page 23: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/23.jpg)
Example: NativeScript file module
![Page 24: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/24.jpg)
NativeScript Modules—There are a lot
![Page 25: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/25.jpg)
HTTP module example
![Page 26: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/26.jpg)
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
![Page 27: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/27.jpg)
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>
![Page 28: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/28.jpg)
One syntax for all
Attribute Binding: [attribute]
Event Binding: (event)
Intercepting input: #idhandler
Conditions: *ngIf="expression"
Loops: *ngFor="expression"
Styling: [class.style1]="expression"
![Page 29: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/29.jpg)
CSS
![Page 30: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/30.jpg)
http://docs.nativescript.org/styling#supported-
properties
![Page 31: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/31.jpg)
The difference is in the UI
Web UI != Mobile UI
![Page 32: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/32.jpg)
Native LayoutsAbsolute Dock Grid Stack Wrap
![Page 33: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/33.jpg)
DEMO
![Page 34: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/34.jpg)
2013 2014 2015 2016 2017
Early
prototypes
“Core”
engineering
Public
launch
Adoption
ramp-up
Mass
adoption
Project Timeline
![Page 35: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/35.jpg)
Join the growing
NativeScript
community on Slack
bit.ly/nativescript-slack
![Page 36: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/36.jpg)
https://twitter.com/nativescript
![Page 37: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/37.jpg)
Q & A
![Page 38: Building native mobile apps with Angular 2.0 and ... · Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N Technical Evangelist](https://reader035.vdocuments.net/reader035/viewer/2022062920/5f020f1f7e708231d4025f4a/html5/thumbnails/38.jpg)