MIJN INKOMEN LATER 1/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

2/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

B2C MOBILE APP DEV NATIONALE-NEDERLANDEN 3/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

4/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

ROWDY RABOUW > Senior engineer Nationale-Nederlanden > Lead developer NN Pension App: Mijn Inkomen Later > Progress Developer Expert for Nativescript > Co-organizer NativeScript Developer Day Europe 5/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

6/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

MIJN.PENSIOEN 7/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

8/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

9/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

MIJN PENSIOENCOACH 10/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

11/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

CALCULATION OBJECTS > Pension App Calculation Engine (PACE) > PEnsion Advisory Calculation Engine (PEACE) > Family Pension Plan (FPP) > DoelInkomen Adviseur (DIA) 12/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

2015 External partner Native iOS + Android Objective-C + Java Native performance progress . . ? 13/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

2015 External partner Native iOS + Android Objective-C + Java Native performance Unhappy with the progress 14/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

15/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

PROOF OF CONCEPT 16/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

17/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

18/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

20/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

ANGULAR > Opinionated framework > Object oriented > Typescript > Full-featured routing > dependency injection > Data binding 21/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

CALCULATION OBJECTS -> TYPESCRIPT > Pension App Calculation Engine (PACE) > PEnsion Advisory Calculation Engine (PEACE) > Family Pension Plan (FPP) > DoelInkomen Adviseur (DIA) 22/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

CALCULATION OBJECTS -> TYPESCRIPT > Belastingdienst > Calculator > Database (JSON ipv SQLite) > Helper / Logger > NNverzekeraar > Socialeverzekeringsbank 23/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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 24/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

VALIDATION SERVICE > Ranges for spinners > maximum length for inputs > Validate input fields > Minimum and maximum values for sliders 25/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

VALIDATION SERVICE “BeleggenRendementPercentage”: { “type”: “number”, “required”: true, “minimum”: 0, “maximum”: 15, “steps”: 0.05, “digits”: true }, “WerkurenHuidig”: { “type”: “number”, “minimum”: 0, “maximum”: 48 } 26/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

27/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

NATIVESCRIPT PLUGINS > nativescript-barcodescanner > nativescript-carousel > nativescript-toast > nnativescript-ui-sidedrawer > nativescript-plugin-firebase 28/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

29/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

30/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

MONDRIAAN ? PIEKENPIJP ? 31/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

32/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

33/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

34/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

35/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

36/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

37/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

38/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

40/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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 41/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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” } }

44/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

NOT ALL ROSES 45/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

46/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider minValue=”0” maxValue=”100” value=”40” (valueChange)=”onSliderValueChange($event)”> </Slider> 47/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider minValue=”{{minSliderSparen}}” maxValue=”{{maxSliderSparen}}” [(ngModel)]=”extraSparenInlegPerMaand” (valueChange)=”onSparenSliderValueChange($event)”> </Slider> 48/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

NOT ALL ROSES: SLIDERS <Slider #sparenSlider minValue=”{{minSliderSparen}}” maxValue=”{{maxSliderSparen}}” [(ngModel)]=”extraSparenInlegPerMaand”> </Slider> 49/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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); }); } 50/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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(); } 51/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

52/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @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) 53/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

54/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

UPDATES 55/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

UPDATES > Nativescript CLI > NativeScript core modules > Xcode > Plugins 56/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

UPDATES: PLUGINS package.json “dependencies”: { “nativescript-angular”: “~4.4.1”, “nativescript-barcodescanner”: “^2.7.0” } Semantic Versioning: major.minor.patch 57/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

UPDATES: PLUGINS tilde vs ~8.0.1

= 8.0.1 < 8.1.0 ^3.2.0 = 3.2.0 < 4.0.0 58/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

UPDATES: PLUGINS package.json “dependencies”: { “nativescript-angular”: “8.0.1”, “nativescript-barcodescanner”: “3.2.0” } CodeRelease.io 59/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

2015 2016 - 2019 External partner In-house team Native NativeScript iOS + Android Cross-platform Objective-C + Java Web technologies Native performance Native performance Unhappy with the progress 60/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

2015 2016 - 2019 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 61/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

62/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

63/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw

THANK YOU AND ENJOY YOUR LUNCH! 64/64 — Nationale-Nederlanden - Rowdy Rabouw - The Longest Day 2019 - @rowdyrabouw