A presentation at Progress Innovation Day in in Amsterdam, Netherlands by Rowdy Rabouw
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
Nationale-Nederlanden lanceerde enkele jaren geleden de native app Mijn Pensioencoach. In deze sessie zal Rowdy uitleggen waarom ze deze eind vorige jaar vervangen hebben door de - met NativeScript en Angular gerealiseerde - Mijn Inkomen Later app. Tevens deelt hij zijn ervaringen, worstelingen, uitdagingen en overwinningen tijdens dit traject.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.