A presentation at Progress: The Longest Day 2019 in in Breda, Netherlands by Rowdy Rabouw
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
Nationale-Nederlanden lanceerde enkele jaren geleden de native app Mijn Pensioencoach. In deze sessie zal Rowdy uitleggen waarom ze deze eind 2016 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.
Here’s what was said about this presentation on social media.
for free. You
can too.