B2C Mobile App Dev

A presentation at Progress: The Longest Day 2019 in June 2019 in Breda, Netherlands by Rowdy Rabouw

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

Slide 20

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

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

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

Slide 39

Slide 40

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

Slide 41

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

Slide 42

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” } }

Slide 43

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” } }

Slide 44

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

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

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

Slide 49

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

Slide 50

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

Slide 51

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

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

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

Slide 64

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