A presentation at Web Developer Conference in in Munich, Germany by Rowdy Rabouw
Awesome native apps with NativeScript and Angular!
Web developer mood coaster
web developer in natural habitat
web developer • HTML • CSS • JavaScript • Sass • Node Package Manager Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 7/145
web developer on native iOS / Android
web developer & native • App stores • Provisioning files • Java or Kotlin for Android • Objective-C or Swift for iOS Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 10/145
web developer with nativescript
web developer & nativescript • App stores • Provisioning files • NativeScript • HTML • CSS • JavaScript • Sass • Node Package Manager Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 13/145
web developer ❤ nativescript
who?
Rowdy Rabouw @rowdyrabouw Gouda, The Netherlands I ❤ superhero movies Freelance web and app developer Lead developer Nationale-Nederlanden Pension App Progress Developer Expert for Nativescript Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 17/145
Mobile App framework decision guide
Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 20/145
Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Yes Phonegap / Cordova with Ionic • WebView • DOM to manipulate • HTML styled like native Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 21/145
Mobile App framework decision guide Do you want/need a native User Interface and native performance? No Phonegap / Cordova with Ionic Yes continue • WebView • DOM to manipulate • HTML styled like native Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 22/145
Mobile App framework decision guide Do you have too much money and time? Yes Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw No 23/145
Mobile App framework decision guide Do you have too much money and time? Yes No Native iOS and Android • Twice the work Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 24/145
Mobile App framework decision guide Do you have too much money and time? Yes Native iOS and Android No continue • Twice the work Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 25/145
Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 26/145
Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Yes Xamarin • .NET or C# • Cross compiling • Bindings to access native APIs Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 27/145
Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Yes Flutter • Dart • Cross compiling • Beta Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 28/145
Mobile App framework decision guide Do you potentially want/need to share code with the web? Or do you want/need to use web technologies? No Flutter Yes continue • Dart • Cross compiling • Beta Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 29/145
Mobile App framework decision guide Do you want to use modern JavaScript? No Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw Yes 30/145
Mobile App framework decision guide Do you want to use modern JavaScript? No Yes Titanium • No ES6+/ES2015+ support • Can't use NPM • Old MVC framework (Alloy) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 31/145
Mobile App framework decision guide Do you want to use modern JavaScript? No Titanium Yes continue • No ES6+/ES2015+ support • Can't use NPM • Old MVC framework (Alloy) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 32/145
Mobile App framework decision guide Do you know and like React? Yes Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw No 33/145
Mobile App framework decision guide Do you know and like React? Yes No React Native • React • Native code to access APIs • Version 0.57 Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 34/145
Mobile App framework decision guide Do you know and like React? Yes React Native No continue • React • Native code to access APIs • Version 0.57 Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 35/145
NATIVESCRIPT
NATIVESCRIPT
What is NativeScript? • Open source framework for building truly native mobile apps • JavaScript, markup (XML/HTML) and CSS • Native code inside your JavaScript if you want and dare • Cross Platform: one codebase for iOS and Android • Backed by software company Progress • Android 4.2 or a later stable official release • iOS 7.0 or later stable official release Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 39/145
How to start?
docs.nativescript.org
nativescript.org/get-the-nativescript-book
nativescriptcommunity.slack.com
nativescript.org/nativescript-sidekick
play.nativescript.org
nativescripting.com
markup like on the web
Markup http://2xr.nl/markup https://docs.nativescript.org/ui/components <ActionBar title="Native elements"/> <StackLayout> <Button text="Button" tap="{{ onButtonTap }}"/> <Switch checked="false"/> <SegmentedBar items="{{ segmentedBarItems }}"/> <Progress value="0" maxValue="100"/> <Slider value="0" minValue="0" maxValue="100"/> <DatePicker year="2018" month="1" day="1" minDate="1970-01-01" maxDate="2100-12-31"/> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 50/145
TextField https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField/> <TextField text=""/> <TextField hint="Enter your name"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 52/145
TextField: autocapitalization https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocapitalizationType="allCharacters"/> <TextField autocapitalizationType="sentences"/> <TextField autocapitalizationType="words"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 53/145
TextField: autocapitalization https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocapitalizationType="allCharacters"/> <TextField autocapitalizationType="sentences"/> <TextField autocapitalizationType="words"/> <TextField autocapitalizationType="none"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 54/145
TextField: autocorrect https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField autocorrect="true"/> <TextField autocorrect="false"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 55/145
TextField: keyboardType http://2xr.nl/keyboardType https://docs.nativescript.org/api-reference/modules/ui_enums.keyboardtype <TextField keyboardType="number"/> <TextField keyboardType="datetime"/> <TextField keyboardType="phone"/> <TextField keyboardType="email"/> <TextField keyboardType="url"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 56/145
TextField: more attributes https://docs.nativescript.org/api-reference/modules/ui_text_field.textfield <TextField textAlignment=""/> <TextField visibility=""/> <TextField width=""/> <TextField maxLength=""/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 58/145
Layouts https://docs.nativescript.org/ui/layouts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 59/145
Layouts https://docs.nativescript.org/ui/layouts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 60/145
DockLayout https://docs.nativescript.org/ui/layouts <DockLayout height="100%" stretchLastChild="true"> <Label <Label <Label <Label text="1" text="2" text="3" text="4" dock="top"/> dock="bottom"/> dock="right"/> dock="left"/> </DockLayout> <!-1 + 2 have fixed height 3 has fixed width 4 will get all remaining space --> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 61/145
GridLayout https://docs.nativescript.org/ui/layouts <GridLayout rows="100, auto, *" columns="100, auto, *"> <Label text="1" row="0" <Label text="2" row="0" colSpan="2"/> <Label text="3" row="1" rowSpan="2"/> <Label text="4" row="1" <Label text="5" row="1" <Label text="6" row="2" <Label text="7" row="2" </GridLayout> col="0"> col="1" col="0" col="1"/> col="2"/> col="1"/> col="2"/> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 62/145
Cascading Style Sheets
Cascading Style Sheets https://docs.nativescript.org/ui/styling • a large subset of CSS properties is supported • device-independent pixels • application-wide, page-specific or inline • platform-specific possible • animations • SASS Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 65/145
{N} Core Themes https://docs.nativescript.org/ui/theme • ready to use color schemes • tailored for iOS and Android Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw
NativeScript Theme Builder https://www.nativescriptthemebuilder.com Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 67/145
TabView <TabView height="100%"> <StackLayout *tabItem="{title: 'Rocket Raccoon'}" class="full rocket"/> <StackLayout *tabItem="{title: 'Harley Quinn'}" class="full harley"/> <StackLayout *tabItem="{title: 'Hulk'}" class="full hulk"/> </TabView> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 68/145
TabView .full { background-size: cover; background-position: center; background-repeat: no-repeat; } .rocket { background-image: url("~/images/rocket-raccoon.jpg"); } .harley { background-image: url("~/images/harley-quinn.jpg"); } .hulk { background-image: url("~/images/hulk.jpg"); } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 69/145
4 Fantastic Choices
JavaScript
TypeScript
Vue.js
Angular
Angular • Opinionated JavaScript framework • Typescript • Full-featured routing • Dependency injection • Data binding • Seperate core team for Angular • nativescript-schematics for easy code sharing Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 77/145
Angular import { NgModule } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { Routes } from "@angular/router"; const routes: Routes = [ { path: "", redirectTo: "/start", pathMatch: "full" }, { path: "start", loadChildren: "./components/startseite/startseite.module#StartSeiteModule" }, { path: "super", loadChildren: "./components/superhelden/superhelden.module#SuperHeldenModule" } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class AppRoutingModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 78/145
Angular import { NgModule } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { Routes } from "@angular/router"; const routes: Routes = [ { path: "", redirectTo: "/start", pathMatch: "full" }, { path: "start", loadChildren: "./components/startseite/startseite.module#StartSeiteModule" }, { path: "super", loadChildren: "./components/superhelden/superhelden.module#SuperHeldenModule" } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class AppRoutingModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 79/145
Angular import { SprachDienst } from "./dienste/sprach.dienst"; export class StartSeiteComponent { constructor(private sprachDienst: SprachDienst) {} spracheAndern(sprache: string) { this.sprachDienst.SpracheEinstellen(sprache); } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 80/145
Angular one-way data binding <Label [text]="text"></Label> <Label text="{{text}}"></Label> text: string = "Hallo München!"; Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 81/145
Angular two-way data binding <TextField keyboardType="number" (focus)="OnInputFocus($event)" (blur)="OnInputBlur($event)" [maxLength]="maxLengthSalary" [(ngModel)]="salary"> </TextField> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 82/145
Angular two-way data binding: ! ! " <TextField keyboardType="number" (focus)="OnInputFocus($event)" (blur)="OnInputBlur($event)" [maxLength]="maxLengthSalary" [(ngModel)]="salary"> </TextField> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 83/145
Angular links <!-- Angular --> <a routerLink="/next">Next</a> <!-- NativeScript Angular --> <Button text="Next" [nsRouterLink]="['/next']"></Button> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 84/145
Angular checkbox / switch <!-- Angular --> <input type="checkbox"> <input type="checkbox" /> <!-- NativeScript Angular: no self-closing tags allowed --> <Switch></Switch> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 85/145
Bad Performance
Catwoman “ I want to thank Warner Bros. for casting me in this piece-of-sh*t, godawful movie. ” Halle Berry
Angular: Performance • Uglify • code minification • reduces names of local variables • Webpack • traverses your source tree via module imports • only include modules that are used Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 90/145
Angular: Performance • Ahead-of-Time compilation • pre-compiles application components and templates • Angular compiler not included in bundle • Lazy-Load modules • not all modules are needed at startup • pre-load in background Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 91/145
Native Code
{N} Angular directory structure app/components/slider/ slider.component.html slider.component.ts slider.component.css slider-routing.module.ts slider-module.ts Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 94/145
slider.component.html <ActionBar title="Slider"></ActionBar> <StackLayout> <Slider value="70"></Slider> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 95/145
slider.component.ts import { Component } from "@angular/core"; @Component({ selector: "app-slider", moduleId: module.id, templateUrl: "slider.component.html", styleUrls: ["slider.component.css"] }) export class SliderComponent { constructor() {} } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 96/145
slider.component.css ActionBar { color: white; background-color: red; } StackLayout { padding: 50; } Slider { background-color: red; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 97/145
Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 98/145
slider.component.html <ActionBar title="Slider"></ActionBar> <StackLayout> <Slider slider-icon value="70"></Slider> </StackLayout> • attribute directive • changes the appearance or behavior of an element Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 99/145
slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 100/145
slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 101/145
slider.directive.ts import { Directive, ElementRef } from "@angular/core"; import { isIOS } from "platform"; @Directive({ selector: "[slider-icon]" }) export class SliderIconDirective { constructor(private el: ElementRef) { if (isIOS) { let uiSlider = this.el.nativeElement.ios; uiSlider.setThumbImageForState( UIImage.imageNamed("image.png"), UIControlState.Normal); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 102/145
slider.module.ts import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { SliderIconDirective } from "./slider.directive"; import { SliderRoutingModule } from "./slider-routing.module"; import { SliderComponent } from "./slider.component"; @NgModule({ imports: [NativeScriptModule, SliderRoutingModule], declarations: [SliderComponent, SliderIconDirective], schemas: [NO_ERRORS_SCHEMA] }) export class SliderModule {} Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 103/145
104/145
slider.component.html <StackLayout> <AbsoluteLayout> <StackLayout #background class="captain" top="0" left="0"></StackLayout> <FlexboxLayout class="flexcontainer" top="0" left="0"> <Slider slider-icon (valueChange)="onSliderChange($event)"></Slider> </FlexboxLayout> </AbsoluteLayout> </StackLayout> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 105/145
slider.component.css .captain { background-image: url("~/assets/images/captain-america.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; width: 100%; opacity: 0; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 106/145
slider.component.css .flexcontainer { justify-content: center; align-items: center; height: 100%; width: 100%; } Slider { width: 80%; background-color: #BC1A0F; } ActionBar { background-color: #FFFFFF; } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 107/145
slider.component.ts import import import import import { { { { { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; Page } from "ui/page"; Slider } from "ui/slider"; StackLayout } from "ui/layouts/stack-layout"; TNSPlayer } from "nativescript-audio"; @Component({ selector: "app-slider", moduleId: module.id, templateUrl: "slider.component.html", styleUrls: ["slider.component.css"] }) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 108/145
slider.component.ts export class SliderComponent implements OnInit { @ViewChild("background") background: ElementRef; private viewStack: StackLayout; private player: TNSPlayer; constructor(private page: Page) {} ngOnInit() { this.page.actionBarHidden = true; this.viewStack = this.background.nativeElement; this.player = new TNSPlayer(); this.player.initFromFile({ audioFile: "~/assets/audio/captain.mp3", loop: false }); } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 109/145
slider.component.ts onSliderValueChange(args) { let slider = <Slider>args.object; // opacity and volume range is 0 - 1 let sliderValue = slider.value / 100; this.viewStack.opacity = sliderValue; if (Math.round(slider.value) > 0) { this.player.play(); this.player.volume = sliderValue; } else { this.player.seekTo(0); this.player.pause(); } } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 110/145
Packages & Libraries
Node Package Manager • commonly known as npm • ready to use JavaScript modules • about 650.000 packages of free, reusable code Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 113/145
Android Arsenal • libraries for Android (Java / Kotlin) Cocoapods • libraries for iOS (Objective-C / Swift) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 114/145
Multilingual: ngx-translate
Multilingual: ngx-translate • Matthias Drescher: Lokalisierung in Angular (mit ngx-translate) • internationalization library for Angular 2+ • define translations in different languages • switch between them easily • no hardcoded text/labels, all in one place • start directly, even with one language Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 117/145
Multilingual: ngx-translate { "HOME": { "TITLE": "Hello WDC Munich!", "TEXT": "It's great to be here and introduce NativeScript to you.", "SLIDER": "Slider", "ENGLISH": "English", "FOREIGN": "German", "MIP": "WowWee MiP", "SPEECH_RECOGNITION": "Speech recognition!" } } Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 118/145
Multilingual: ngx-translate <ActionBar [title]="'HOME.TITLE' | translate"> </ActionBar> <Button [text]="'HOME.FOREIGN' | translate" (tap)="changeLanguage('de')"> </Button> [] = one way data binding in Angular | = display-value transformations Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 119/145
120/145
NativeScript Plugins
What are {N} plugins? When the NativeScript core modules do not provide the native device or platform capability that you need, you can use plugins. • usually for both iOS and Android • JavaScript interface to native platform code Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 123/145
Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 124/145
Nativescript plugins • nativescript-bluetooth • nativescript-accelerometer • nativescript-speech-recognition Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 125/145
Nativescript plugins • nativescript-texttospeech • nativescript-directions • nativescript-videoplayer Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 126/145
{N} Plugins (live) demo
Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 128/145
WowWee Mip Robot 129/145
nativescript-bluetooth import * as bluetooth from "nativescript-bluetooth"; bluetooth.startScanning({ seconds: 4, onDiscovered: peripheral => { if (peripheral.UUID == "CA9F644C-1920-4572-8833-1D137A6T2A05") { bluetooth.connect({ UUID: peripheral.UUID, onConnected: peripheral => { bluetooth.stopScanning(); // do stuff } }); } } }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 130/145
nativescript-accelerometer import { startAccelerometerUpdates } from "nativescript-accelerometer"; startAccelerometerUpdates(data => { // lean left (0 to -1) / right (0 to 1) let leftOrRight = data.x; // lean forward (0 to -1) / back (0 to 1) let forwardOrBack = data.y; // do stuff }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 131/145
Introduction 132/145
nativescript-speech-recognition import { SpeechRecognition, SpeechRecognitionTranscription } from "nativescript-speech-recognition"; private speechRecognition = new SpeechRecognition(); this.speechRecognition.available().then( (available: boolean) => console.log(available ? "YES!" : "NO"), (err: string) => console.log(err) ); this.speechRecognition.requestPermission().then((granted: boolean) => { console.log("Granted? " + granted); }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 133/145
nativescript-speech-recognition this.speechRecognition.startListening({ locale: "en-US", returnPartialResults: true, onResult: (transcription: SpeechRecognitionTranscription) => { console.log(User said: ${transcription.text}); } }); this.speechRecognition.stopListening().then(() => { // do something with the recognized text });
Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw
134/145
nativescript-texttospeech import { TNSTextToSpeech, SpeakOptions } from "nativescript-texttospeech"; let textToSpeech = new TNSTextToSpeech(); let speakOptions: SpeakOptions = { text: "Hello world!", locale: "en-US", speakRate: 0.5, pitch: 0.8 }; textToSpeech.speak(speakOptions); . Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 135/145
Weather 136/145
Angular httpClient const apiUrl = "https://api.darksky.net/forecast/...../"; const city = { name: "Gouda", country: "The Netherlands", latitude: 52.0115205, longitude: 4.7104633 }; let params = city.latitude + "," + city.longitude; this.httpClient.get(apiUrl + params).subscribe(res => { // do something with the json data }); Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 137/145
Directions 138/145
nativescript-directions import { Directions } from "nativescript-directions"; let directions = new Directions(); directions.navigate({ // optional, default "current location" from: { lat: 48.1294915, lng: 11.5886514 }, // if an Array is passed, the last item is the destination, // the addresses in between are "waypoints" to: [{ address: "Frauenplatz 12, 80331 München, Germany", // Frauenkirche }, { address: "Marienplatz 1, 80331 München, Germany" }], ios: { preferGoogleMaps: true, allowGoogleMapsWeb: true } }) Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 139/145
Movie trailer 140/145
nativescript-videoplayer <VideoPlayer src="video.mp4" controls="true" loop="true" autoplay="false"> </VideoPlayer> Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 141/145
2xr.nl/wdc Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw
Danke schön Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw
Links Native elements playground: http://2xr.nl/markup keyboardType playground: http://2xr.nl/keyboardType TabView playground: http://2xr.nl/TabView Plugin demo app: https://github.com/rowdyrabouw/NativeScriptTalk/tree/WDC Awesome native apps with NativeScript and Angular! - Rowdy Rabouw - WDC Munich 2018 - @rowdyrabouw 145/145
Did you how you can use your knowledge of Angular to build truly native apps for iOS and Android with NativeScript?
I’ll explain what NativeScript is, how it compares to other frameworks and demo how easy and fun it is to get started and how to make use of native capabilities.
Do you want to build your own personal assistant like Siri? I'll show you how!
Here’s what was said about this presentation on social media.
for free. You
can too.