NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store...

30
NativeScript & Angular 2 You know Angular. Now you know mobile. Start your installation at http://docs.nativescript.org/ tutorial/chapter-1

Transcript of NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store...

Page 1: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

NativeScript & Angular 2You know Angular. Now you know mobile.

Start your installation at http://docs.nativescript.org/tutorial/chapter-1

Page 2: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Jen Looper@jenlooper

TJ VanToll@tjvantoll

Page 3: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Agenda• What is NativeScript?

• ~30 minutes

• Installation?• ~10 minutes

• Hands-on guide• ~1 hour

• Final Q&A• ~10 minutes

Page 4: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Created and supported by Telerik

Page 5: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Delivering on the overdue promise of

“hybrid.”

Page 6: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Hybrid Promise

100% Web

100% NativeHybrid

ReachCode/Skill Reuse

RichnessPremium experience

Device APIs

Best of both?

Page 7: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”
Page 8: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

2013 2014 2015 2016 2017

Early prototypes

“Core” engineering

Public launch

Adoption ramp-up

Mass adoption

Project Timeline

Page 9: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

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 10: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

The {N} difference…

Page 11: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

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 12: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Maximum code and skill reusability

2

Video credit: Nathan Walker, {N} community member

Page 13: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

First-class Angular and TypeScript support3

+ =

Page 14: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Android iOS

Web

Page 15: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

100% access to Android and iOS APIs

4

Page 16: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Runs on V8 JavaScript VM

Runs on JavaScriptCore VM

More details at http://bit.ly/how-nativescript-works

Page 17: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”
Page 18: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Example: NativeScript file module

Page 19: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

The same approach works for the UI

Page 20: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

NativeScript Modules—There are a lot

Page 21: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Carlos Rubio@crubio_zgz

Page 22: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Our vision Flexible Teams

Code Reuse

Reducedevelopmentcycles

Easier to addnew channels

SimplifyMaintenance

Unified UserExperience

Benefits

Page 23: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

How we started?

Angular Camp

January 2016NativeScript 1.5

Page 24: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Why to use NativeScript vs Webview?

We picked two main reasons

March 2016NativeScript 1.7

Page 25: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Our first business focused appEasy Trading concept App for our Digital Banking Laboratory

May 2016Nativescript 2.0

Page 26: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Join the growing NativeScript

community on Slack

bit.ly/nativescript-slack

Page 27: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

{Hands on}

Page 28: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

Hands-on workshop• Visit https://www.nativescript.org/ and click Get

Started.

Page 29: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”

https://twitter.com/nativescript

Page 30: NativeScript& Angular 2 - TJ VanToll · Search for “Examples NativeScript” in the iOS App Store or Google Play to try this out for yourself. Rich, animated, “no compromise”