Customer story: Nationale-Nederlanden

MIJN INKOMEN LATER 1/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

CUSTOMER STORY: NATIONALE-NEDERLANDEN 2/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

ROWDY RABOUW

Lead developer Nationale-Nederlanden Pension App

Freelance web and app developer

Progress Developer Expert for Nativescript

International speaker

Organizer NativeScript Developer Day Europe

Curator nativescript.nl 3/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NATIVESCRIPT 4/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

5/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NATIVESCRIPT

Open source framework

building truly native mobile apps with JavaScript

together with markup (XML/HTML) and CSS

and native code if you want and dare

Cross Platform : one codebase for iOS and Android 6/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE PHONEGAP/CORDOVA WITH IONIC 7/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE PHONEGAP/CORDOVA WITH IONIC

No Webview

No DOM to manipulate

No HTML elements styled like native components

Real native components 8/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE XAMARIN 9/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE XAMARIN

No Cross Compiling

100% access to native APIs without writing bindings

No .NET or C# 10/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE REACT NATIVE 11/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT LIKE REACT NATIVE

Not bound to a specific framework

No need writing Objective-C, Swift or Java

{ N } JavaScript has 100% access to native APIs

Maturity: 0.52 vs 3.4 12/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

HOW DOES NATIVESCRIPT WORK? 13/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

HOW DOES NATIVESCRIPT WORK? 14/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

APPLICATION CODE

JavaScript code

Page layouts in markup

CSS for styling 15/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NATIVESCRIPT MODULES

NativeScript Core

UI components

File system access

Platform information

NativeScript Plugins

Camera

Bluetooth

Fingerprint Authentication 16/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NATIVESCRIPT RUNTIME

Runs on JavaScript Virtual Machines

V8 (Android)

JavaScriptCore (iOS)

Executes C++ code to invoke native code

Uses reflection to generate metadata

Examines, introspects, and modifies its own structure and behavior at runtime

No separate binding layers between { N } and each mobile platform API

New features are available immediately 17/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

JAVASCRIPT 18/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

JAVASCRIPT 19/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

JAVASCRIPT 20/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

JAVASCRIPT 21/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

JAVASCRIPT 22/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

MIJN.PENSIOEN 23/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

24/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

MIJN PENSIOENCOACH 25/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

26/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

CALCULATION OBJECTS

Pension App Calculation Engine (PACE)

PEnsion Advisory Calculation Engine (PEACE)

Family Pension Plan (FPP)

DoelInkomen Adviseur (DIA) 27/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

2015 External partner Native iOS + Android Objective-C + Java Native performance Unhappy with the progress 28/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

PROOF OF CONCEPT 29/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

30/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

31/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

33/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

ANGULAR

Opinionated framework

Object oriented

Typescript

Full-featured routing

dependency injection

Data binding 34/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

CALCULATION OBJECTS -> TYPESCRIPT

Pension App Calculation Engine (PACE)

PEnsion Advisory Calculation Engine (PEACE)

Family Pension Plan (FPP)

DoelInkomen Adviseur (DIA) 35/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

CALCULATION OBJECTS -> TYPESCRIPT

Belastingdienst

Calculator

Database (JSON ipv SQLite)

Helper / Logger

NNverzekeraar

Socialeverzekeringsbank 36/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

DATASERVICE

Instantiate calculation objects

Call calculation objects methods

Get and set Settings like language

Load JSON database (taffydb)

Encrypt and save sensitive user input 37/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

VALIDATION SERVICE

Ranges for spinners

maximum length for inputs

Validate input fields

Minimum and maximum values for sliders 38/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

VALIDATION SERVICE "BeleggenRendementPercentage": { "type": "number", "required": true, "minimum": 0, "maximum": 15, "steps": 0.05, "digits": true }, "WerkurenHuidig": { "type": "number", "minimum": 0, "maximum": 48 } 39/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NATIVESCRIPT PLUGINS

nativescript-barcodescanner

nativescript-carousel

nativescript-toast

nativescript-telerik-ui

nativescript-email

nativescript-plugin-firebase 40/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

41/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

MONDRIAAN ?

PIEKENPIJP ? 42/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

43/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

44/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

45/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

46/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

47/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

48/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

49/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

51/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

MULTILINGUAL WITH 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 52/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NL.JSON { "GRAPH": { "PAGETITLE": "Inkomen later", "HDRTXT": "Gewenste pensioenleeftijd", "BTN_01": "Salaris / inkomen", "BTN_02": "NN Pensioenen", "BTN_03": "Pensioenen", "BTN_04": "Keuzes voor later", "BTN_05": "AOW", "BTN_06": "Pensioen situatie" } }

EN.JSON { "GRAPH": { "PAGETITLE": "Income later", "HDRTXT": "Desired retirement age", "BTN_01": "Salary / income", "BTN_02": "NN Pensions", "BTN_03": "Pensions", "BTN_04": "Choices for later", "BTN_05": "AOW", "BTN_06": "Pension situation" } }

NOT ALL ROSES 55/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

56/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider minValue="0" maxValue="100" value="40" (valueChange)="onSliderValueChange($event)"> </Slider> 57/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider minValue="{{minSliderSparen}}" maxValue="{{maxSliderSparen}}" [(ngModel)]="extraSparenInlegPerMaand" (valueChange)="onSparenSliderValueChange($event)"> </Slider> 58/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider #sparenSlider minValue="{{minSliderSparen}}" maxValue="{{maxSliderSparen}}" [(ngModel)]="extraSparenInlegPerMaand"> </Slider> 59/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: SLIDERS @ViewChild("sparenSlider") sparenSlider: ElementRef; ngOnInit() { this.sparenSlider.nativeElement.addEventListener("valueChange", (args: PropertyChangeData) => { this.debouncerSparen.next(args); }); this.debouncerSparen.debounceTime(150).subscribe(args => { this.sparenSliderChanged(args); }); } 60/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: SLIDERS sparenSliderChanged(args: PropertyChangeData) { this.extraSparenInlegPerMaand = Math.round(args.value); this.removeAllEventListeners(); .... // calculate and set all values for 5 sliders .... this._changeDetectorRef.detectChanges(); this.addAllEventListeners(); } 61/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

62/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

NOT ALL ROSES: ANGULAR & PERFORMANCE

lazy loading

webpack & uglify

faster start-up time (12 seconds -> 3 seconds)

smaller app bundle (iOS 114 MB -> 42 MB) 63/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

UPDATES 64/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

UPDATES

Nativescript CLI

NativeScript core modules

Xcode

Plugins 65/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

UPDATES: PLUGINS package.json "dependencies": { "nativescript-angular": "~4.4.1", "nativescript-barcodescanner": "^2.7.0" } Semantic Versioning: major.minor.patch 66/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

UPDATES: PLUGINS tilde vs ! ~4.4.1 >= 4.4.1 < 4.5.0 ^2.7.0 >= 2.7.0 < 3.0.0 67/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

UPDATES: PLUGINS package.json "dependencies": { "nativescript-angular": "4.4.1", "nativescript-barcodescanner": "2.7.0" } sibbell.com 68/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

2015 2018 External partner In-house team Native NativeScript iOS + Android Cross-platform Objective-C + Java Web technologies Native performance Native performance Unhappy with the progress 69/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

2015 2018 External partner In-house team Native NativeScript iOS + Android Cross-platform Objective-C + Java Web technologies Native performance Native performance Unhappy with the progress Happy with

Progress 70/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw

THANK YOU

2XR.NL/NN 71/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw