Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile. Lohith G N
Technical Evangelist [email protected]
The first entry from the Google docs Angular 2 meets NativeScript
Platform Agnostic Platform Specific
Dom Proto NativeScript NativeVisual MarkupHTML Parse5 CompilerCompiler Renderer Adapter Views Renderer VisualTree Tree NativeScript Checkbox with Angular 2 NativeScript is… 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. The {N} difference… 1
Search for Rich, animated, “Examples NativeScript” “no compromise” in the iOS App Store or Google Play to try this out for yourself. native UI (with shared UI code) 2
Maximum code and skill reusability
Video credit: Nathan Walker, {N} community member 3 First-class Angular and TypeScript support
+ = Android iOS
Web 4
100% access to Android and iOS APIs 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 modules Code Modules Platform API One UI syntax for all Example: NativeScript file module NativeScript Modules—There are a lot HTTP module example The big picture
Destination Implementation Abstraction Layer iOS iOS Native App call XMLHttpRequest
Destination Implementation Abstraction Layer iOS iOS Native App call XMLHttpRequest
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 Layouts Absolute Dock Grid Stack Wrap DEMO Early “Core” Public Adoption Mass prototypes engineering launch ramp-up adoption
2013 2014 2015 2016 2017
Project Timeline Join the growing NativeScript community on Slack
bit.ly/nativescript-slack https://twitter.com/nativescript Q & A