Make Mobile Apps Great Again: NativeScript and Angular

Nick Branstein

About Me

My Dog Riven

About Me

Senior Consultant @ KiZAN Technologies

Video game lover and enthusiast

Cleveland sports fan

Twitter: @nickbranstein

Blog: brosteins.com

Everyone loves bad jokes right?

Story Time

Why Angular?

Widely used

Opinionated and structured

Skills I know (HTML, CSS, JS/TS)

Well supported

Jokes-Ng

What?

I thought we were making mobile apps...

How?

NativeScript

Differences

Mobile App Type	Framework
native	Android, iOS
hybrid	PhoneGap/Cordova
cross compiled	Xamarin
JIT compiled	NativeScript

Why?

Skills you may know

Access to native APIs

Angular Integration!

Goals

Easy to convert an existing Angular app to NativeScript with Angular

Converting the Angular App

NativeScript Project Setup


npm install -g nativescript


tns create jokes-tns 
    --template nativescript-template-ng-tutorial

Checkpoint

Building the Angular Components

Reusable Pieces

NativeScript UI Overview

HTML	NativeScript
div, span	layouts: stack, grid, wrap, absolute + more
label, p / h / other text	label
button, input	button, textfield
	datepicker, listview, listpicker + more

Home Component

Angular


<div class="row">
<div class="col-md-12 center">
    <button class="btn btn-primary">Random Joke</button>

NativeScript with Angular


<StackLayout orientation="vertical">
    <Label text="Welcome to Jokes NS!"></Label>
    <StackLayout orientation="horizontal">
        <Button text="Random Joke"></Button>

Routing

Angular


import { RouterModule } from '@angular/router';

NativeScript with Angular


import { NativeScriptRouterModule } from "nativescript-angular/router";

Home Component Checkpoint

Home Component Bindings

Angular


<div class="row">
<div class="col-md-12 center">
    <button class="btn btn-primary" (click)="randomClick()">Random Joke</button>

NativeScript with Angular


<StackLayout orientation="vertical">
    <Label text="Welcome to Jokes NS!"></Label>
    <StackLayout orientation="horizontal">
        <Button text="Random Joke" (tip)="randomClick()"></Button>

Finished Home Component

Putting It All Together

List Component

Angular directives such as ngFor


<div class="row" *ngFor="let joke of allJokes()"

NativeScript with Angular


<StackLayout *ngFor="let item of allJokes()"

The Finished Product

In Closing

No better time to make a mobile app then now

Angular + NativeScript lower the barrier to entry for mobile apps

Converting an Angular app to a mobile app is an easy process

play.nativescript.org

The NativeScript Book

https://www.nativescript.org/book

Available now!

Thanks!

@nickbranstein

brosteins.com

https://github.com/NickBranstein/Presentations