SlideShare a Scribd company logo

You Know Angular 2, You Know Native Mobile App Development

•Download as PPTX, PDF•
•
Lohith Goudagere Nagaraj
Lohith Goudagere Nagaraj

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

Related slideshows

A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
 
Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
 
Flutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessFlutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for business
 
1 of 38
Building native mobile apps with Angular 2.0 and NativeScript You know Angular. Now you know mobile.
Lohith G N Nagaraj@progress.com
You Know Angular 2, You Know Native Mobile App Development
The first entry from the Google docs
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
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 modules Code Modules Platform API
One UI syntax for all
Example: NativeScript file module
NativeScript Modules—There are a lot
HTTP module example
DestinationImplementationAbstraction Layer The big picture XMLHttpRequest <NS Module> Native iOS call Native Android call iOS App Android App
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>
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 Layouts Absolute 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
You Know Angular 2, You Know Native Mobile App Development

More Related Content

You Know Angular 2, You Know Native Mobile App Development