Progress Innovation Day: Customer story - Nationale-Nederlanden

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.

Transcript

1. MIJN INKOMEN LATER 1/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
2. CUSTOMER STORY: NATIONALE-NEDERLANDEN 2/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
3. 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
4. NATIVESCRIPT 4/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
5. 5/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
6. 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
7. NOT LIKE PHONEGAP/CORDOVA WITH IONIC 7/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
8. 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
9. NOT LIKE XAMARIN 9/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
10. 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
11. NOT LIKE REACT NATIVE 11/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
12. 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
13. HOW DOES NATIVESCRIPT WORK? 13/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
14. HOW DOES NATIVESCRIPT WORK? 14/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
15. APPLICATION CODE > JavaScript code > Page layouts in markup > CSS for styling 15/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
16. 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
17. 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
18. JAVASCRIPT 18/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
19. JAVASCRIPT 19/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
20. JAVASCRIPT 20/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
21. JAVASCRIPT 21/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
22. JAVASCRIPT 22/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
23. MIJN.PENSIOEN 23/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
24. 24/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
25. MIJN PENSIOENCOACH 25/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
26. 26/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
27. 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
28. 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
29. PROOF OF CONCEPT 29/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
30. 30/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
31. 31/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
33. 33/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. 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. 41/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
42. MONDRIAAN ? PIEKENPIJP ? 42/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
43. 43/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
44. 44/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
45. 45/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
46. 46/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
47. 47/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
48. 48/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
49. 49/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
51. 51/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
52. 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
53. 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" } }
54. 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" } }
55. NOT ALL ROSES 55/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
56. 56/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
57. 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
58. 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
59. 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
60. 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
61. 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. 62/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
63. 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
64. UPDATES 64/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
65. UPDATES > Nativescript CLI > NativeScript core modules > Xcode > Plugins 65/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw
66. 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
67. 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
68. 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
69. 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
70. 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
71. THANK YOU 2XR.NL/NN 71/71 — Customer story: Nationale-Nederlanden - Rowdy Rabouw - Progress Innovation Day - @rowdyrabouw