Slide deck used for Jul 21 2016 webinar titled "You Know Angular 2, You Know Native Mobile App Development"

1. Building native mobile apps with
Angular 2.0 and NativeScript
You know Angular. Now you know mobile.

2. Lohith G N
Nagaraj@progress.com

4. The first entry from the Google docs

5. Platform SpecificPlatform Agnostic
Markup
Dom
Adapter
Compiler
Proto
Views
Renderer
Visual
Tree
Angular 2 meets NativeScript
HTML Parse5 Compiler
Proto
Views
NativeScript
Renderer
Native
Visual Tree

6. NativeScript Checkbox with Angular 2

7. 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…

8. The {N} difference…

9. 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

10. Maximum code
and skill
reusability
2
Video credit: Nathan Walker, {N} community member

11. First-class Angular and TypeScript support3
+ =

12. Android iOS
Web

13. 100% access to
Android and
iOS APIs
4

14. Runs on V8 JavaScript VM
Runs on JavaScriptCore VM
More details at http://bit.ly/how-nativescript-works

15. Calling Android API

16. Calling Android API

17. Calling Android API

18. Calling Android API

19. Calling Android API

20. Metadata Generating Process
M
G
P
=

21. NativeScript modules
Code Modules Platform API

22. One UI syntax for all

23. Example: NativeScript file module

24. NativeScript Modules—There are a lot

25. HTTP module example

26. DestinationImplementationAbstraction
Layer
The big picture
XMLHttpRequest
<NS Module>
Native
iOS call
Native
Android call
iOS App Android App

27. DestinationImplementationAbstraction
Layer
The bigger picture
HTTP
<Angular Component>
XMLHttpRequest
<NS Module>
Native
iOS call
Native
Android call
Ajax call
iOS App Android App Web App
XMLHttpRequest
<Browser>

28. One syntax for all
Attribute Binding: [attribute]
Event Binding: (event)
Intercepting input: #idhandler
Conditions: *ngIf="expression"
Loops: *ngFor="expression"
Styling: [class.style1]="expression"

29. CSS

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

31. The difference is in the UI
Web UI != Mobile UI

32. Native Layouts
Absolute Dock Grid Stack Wrap

33. DEMO

34. 2013 2014 2015 2016 2017
Early
prototypes
“Core”
engineering
Public
launch
Adoption
ramp-up
Mass
adoption
Project Timeline

35. Join the growing
NativeScript
community on Slack
bit.ly/nativescript-slack

36. https://twitter.com/nativescript

37. Q & A