NATIONALE-NEDERLANDEN CASE STUDY

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 ROWDY RABOUW SENIOR SOFTWARE ENGINEER NATIONALE-NEDERLANDEN FREELANCE WEBDEVELOPER DOUBLE-R WEBDEVELOPMENT CURATOR NATIVESCRIPT.NL TELERIK DEVELOPER EXPERT FOR NATIVESCRIPT

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 PENSION PORTALS TEAM

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MIJN PENSIOENCOACH

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CALCULATION OBJECTS

MIJN PENSIOENCOACH • PENSION APP CALCULATION ENGINE (PACE ) • PENSION ADVISORY CALCULATION ENGINE (PEACE ) • FAMILY PENSION PLAN (FPP)

• DOELINKOMEN ADVISEUR (DIA)

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MIJN PENSIOENCOACH 2014 APPCELERATOR TITANIUM CROSS-PLATFORM JAVASCRIPT PERFORMANCE MWAH BAD ANIMATIONS NEW PLATFORM

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MIJN PENSIOENCOACH 2014 2015 APPCELERATOR TITANIUM NATIVE CROSS-PLATFORM IOS + ANDROID JAVASCRIPT OBJECTIVE-C + JAVA PERFORMANCE MWAH PERFORMANCE BAD ANIMATIONS ANIMATIONS NEW PLATFORM UNHAPPY WITH PROGRESS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 PROOF OF CONCEPT

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 ANGULAR 2 • OPINIONATED FRAMEWORK

• OBJECT ORIENTED
• CLASSES • TYPESCRIPT • FULL-FEATURED ROUTING

• DEPENDENCY INJECTION

• DATA BINDING • DOCUMENTATION • COMMUNITY

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CALCULATION OBJECTS

MIJN PENSIOENCOACH • PENSION APP CALCULATION ENGINE (PACE ) • PENSION ADVISORY CALCULATION ENGINE (PEACE ) • FAMILY PENSION PLAN (FPP)

• DOELINKOMEN ADVISEUR (DIA) • BELASTINGDIENST

• CALCULATOR • DATABASE • HELPER • LOGGER • NNVERZEKERAAR • SOCIALEVERZEKERINGSBANK

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CALCULATION OBJECTS

MIJN PENSIOENCOACH • PENSION APP CALCULATION ENGINE (3169) • PENSION ADVISORY CALCULATION ENGINE

• FAMILY PENSION PLAN (1428)

• DOELINKOMEN ADVISEUR (266) • BELASTINGDIENST (332) • CALCULATOR (286) • DATABASE (671) • HELPER (235) • LOGGER (81) • NNVERZEKERAAR (532) • SOCIALEVERZEKERINGSBANK (200)

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 DATASERVICE

SERVICES • INSTANTIATE CALCULATION OBJECTS • CALL CALCULATION OBJECTS METHODS • GET AND SET SETTINGS LIKE LANGUAGE • LOAD JSON DATABASE (TAFFYDB - JS LIBRARY WITH DATABASE FEATURES ) • ENCRYPT AND SAVE SENSITIVE USER INPUT
• GROWN TOO BIG, HAVE TO SPLIT • PACE / PEACE / FPP / DIA

• SETTINGS • USER INPUT

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 VALIDATION SERVICE

SERVICES • RANGES FOR SPINNERS • MINIMUM AND MAXIMUM VALUES FOR SLIDERS • MAXLENGTH FOR INPUTS • VALIDATE INPUT FIELDS

"SparenSaldo" : {

"type" : "number" ,

"required" : true ,

"minimum" : 0 ,

"maximum" : 5000000 ,

"maxlength" : 7

},

"SparenRentePercentage" : {

"type" : "number" ,

"minimum" : 0 ,

"maximum" : 12 ,

"steps" : 0.05 ,

"digits" : true

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NGX-TRANSLATE IS AN INTERNATIONALIZATION LIBRARY FOR ANGULAR 2+.

IT LETS YOU DEFINE TRANSLATIONS FOR YOUR CONTENT IN DIFFERENT LANGUAGES AND SWITCH BETWEEN THEM EASILY. MULTILINGUAL

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MULTILINGUAL

"KVL_SPAREN" : {

"PAGETITLE" : "Saving" ,

"TL_BTNTXT_01" : "Cancel" ,

"TR_BTNTXT_01" : "Save" ,

"TL_BTNTXT_02" : "Back" ,

"TR_BTNTXT_02" : "Next" ,

"HDRTXT" : "Question 1 of 7" ,

"QTXT_01" : "Are you currently saving for your pension?" ,

"QTXT_02" : "How much have you already saved for your pension?

            (per {{currentmonthyear}})”

,

"QTXT_03" : "How much per month do you save for your pension?" ,

"QTXT_04" : "What interest rate do you receive?"

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MULTILINGUAL < StackLayout

< Label [ text ]= "'KVL_SPAREN.QTXT_01' | translate"

</ Label

</ StackLayout

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MULTILINGUAL < StackLayout

< Label [ text ]= "'KVL_SPAREN.QTXT_01' | translate"

</ Label

< Label [ text ]= "KVL_SPAREN_QTXT_02"

</ Label

</ StackLayout

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MULTILINGUAL < StackLayout

< Label [ text ]= "'KVL_SPAREN.QTXT_01' | translate"

</ Label

< Label [ text ]= "KVL_SPAREN_QTXT_02"

</ Label

</ StackLayout

let

today : Date

new

Date ();

let

month : number

nu . getMonth () + 1 ;

let

monthstr : string

maand < 10 ? "0" + month . toString () : month . toString ();

let

domein : string

"DOMEINMAAND.MAAND_" + monthstr ;

this . dataService . translateService . get ( domein , {})

. subscribe ( res

=> {

this . dataService . translateService

. get (" KVL_SPAREN.QTXT_02" , {

currentmonthyear :

res + " " + today . getFullYear ()

  })

  .

subscribe (( res : string ) => {

this . KVL_SPAREN_QTXT_02

res ;

});

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MULTILINGUAL

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-NGX-FONTICON

NATHAN WALKER

USE ICON FONTS (FONT AWESOME) BY THE SPECIFIC CLASSNAME PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-BARCODESCANNER

EDDY VERBRUGGEN (BULK)SCAN QR OR BARCODES PLUGINS NATIVESCRIPT- TOAST TOBIAS HENNIG

CONTRIBUTIONS BY EDDY VERBRUGGEN FEEDBACK IN A SMALL POPUP

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-APPVERSION

EDDY VERBRUGGEN RETRIEVE YOUR APP'S PACKAGE ID AND CURRENT VERSION

PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-EMAIL

EDDY VERBRUGGEN CREATING DRAFT E-MAILS

PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-PLUGIN-FIREBASE

EDDY VERBRUGGEN ANALYTICS PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-TELERIK-UI

PROGRESS LISTVIEW AND SIDEDRAWER PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-IQKEYBOARDMANAGER

TJ VANTOLL

CONTRIBUTIONS BY EDDY VERBRUGGEN WRAPPER FOR THE POPULAR IQKEYBOARDMANAGER IOS FRAMEWORK PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CRYPTO-JS

EVAN VOSBERG

CRYPTOGRAPHY STANDARDS PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 LODASH

LODASH

TAKING THE HASSLE OUT OF WORKING WITH ARRAYS, OBJECTS, STRINGS, ETC PLUGINS

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MONDRIAAN

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MONDRIAAN < StackLayout ( tap )= "onTap($event)" ( pan )= “onPan($event)”

</ StackLayout

onTap () {

// do something

}

onPan () {

// do something

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MONDRIAAN

ngAfterViewInit () {

this . dragAgeKlant . nativeElement . on ( "tap,pan" , args

=> {

switch ( args . eventName ) {

case

"tap" :

this . _tapRuler ( this . AgeRulerKlant , "ageKlant" );

break ;

case

"pan" :

this . onPanAgeKlant ( args );

break ;

 }

});

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MONDRIAAN

ngAfterViewInit () {

this . dragAgeKlant . nativeElement . on ( "tap,pan,touch" , args

=> {

switch ( args . eventName ) {

case

"tap" :

this . _tapRuler ( this . AgeRulerKlant , "ageKlant" );

break ;

case

"pan" :

this . onPanAgeKlant ( args );

break ;

case

"touch" :

this . _setXandYpos ( args , this . AgeRulerKlant );

break ;

  }

});

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MONDRIAAN

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 COUCHBASE LITE

PERSISTENT DATA • NO SQL DATABASE • REPLACEMENT FOR COMMON DATABASE TECHNOLOGIES LIKE SQLITE

• EASY TO USE PLUGIN • ENCRYPTED USER INPUT • JSON DATABASE • USER PREFERENCES

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 APPLICATION SETTINGS

PERSISTENT DATA • SAVE AND RESTORE ANY KIND OF INFORMATION RELATED TO YOUR APP

• EVEN EASIER TO USE • KEY / VALUE PAIRS getString ( "settings" );

remove ( "settings" );

setString (

"paceInput" ,

this . _encryptData ( JSON . stringify ( pace . GetJson ())). toString ()

);

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-DEV-WEBPACK $ NPM INSTALL --SAVE-DEV NATIVESCRIPT-DEV-WEBPACK

$ NPM INSTALL

$ NPM RUN START-IOS-BUNDLE $ NPM RUN START-ANDROID-BUNDLE WEBPACK

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK @ Component ({

selector:

"pincode" ,

templateUrl:

"./components/pincode/pincode.component.html"

})

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK @ Component ({

moduleId:

module . id ,

selector:

"pincode" ,

templateUrl:

"pincode.component.html"

})

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK < GridLayout

columns

"2* *"

visibility

"{{ person == Klant && !ExistsPacePartner ? 'visible' : 'collapsed' }}"

</ GridLayout

export

class

ProfielComponent

implements

OnInit , OnDestroy {

private Klant : number ;

private ExistsPacePartner : boolean ;

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK < GridLayout

columns

"2* *"

visibility

"{{ person == Klant && !ExistsPacePartner ? 'visible' : 'collapsed' }}"

</ GridLayout

export

class

ProfielComponent

implements

OnInit , OnDestroy {

Klant : number ;

ExistsPacePartner : boolean ;

}

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 JUST-IN-TIME (JIT) VS AHEAD-OF-TIME (AOT) COMPILATION JIT - COMPILE TYPESCRIPT JUST IN TIME FOR EXECUTING IT

AOT - COMPILE TYPESCRIPT DURING BUILD PHASE WEBPACK

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK // Copy assets to out dir. Add your own globs as needed.

new

CopyWebpackPlugin ([

from:

mainSheet },

from:

"css/**" },

from:

"fonts/**" },

from:

"**/*.jpg" },

from:

"**/*.png" },

from:

"**/*.xml" },

], { ignore: [ "App_Resources/**" ] })

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK // Copy assets to out dir. Add your own globs as needed.

new

CopyWebpackPlugin ([

from:

mainSheet },

from:

"assets/**" },

from:

“i18n/**" },

from:

"fonts/**" },

from:

"**/*.jpg" },

from:

"**/*.png" },

from:

"**/*.xml" },

], { ignore: [ "App_Resources/**" ] })

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK @import

url ( “~/assets/css/actionbar.css" );

@import

url ( "~/assets/css/alignment.css" );

@import

url ( "~/assets/css/border.css" );

@import

url ( "~/assets/css/button.css" );

@import

url ( "~/assets/css/font-awesome.css" );

@import

url ( "~/assets/css/form.css" );

@import

url ( "~/assets/css/kassabon.css" );

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 WEBPACK @import

url ( "assets/css/actionbar.css" );

@import

url ( "assets/css/alignment.css" );

@import

url ( "assets/css/border.css" );

@import

url ( "assets/css/button.css" );

@import

url ( "assets/css/font-awesome.css" );

@import

url ( "assets/css/form.css" );

@import

url ( "assets/css/kassabon.css" );

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 UPDATES • NATIVESCRIPT CLI • TNS-CORE-MODULES

• XCODE • PLUGINS • SIBBELL.COM

• @ANGULAR /… • NATIVESCRIPT-ANGULAR

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 STANDARDS • ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) • VISUAL STUDIO CODE • SAME PLUGINS LIKE PRETTIER • SETTINGS.JSON PER PROJECT • GIT FEATURE BRANCHES • COMMIT OFTEN
• BUILT SCRIPTS • RELEASE PROCEDURE • MANUAL TESTING

@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 MIJN PENSIOENCOACH 2014 2015 2017 APPCELERATOR TITANIUM NATIVE NATIVESCRIPT CROSS-PLATFORM IOS + ANDROID CROSS-PLATFORM JAVASCRIPT OBJECTIVE-C + JAVA WEB TECHNOLOGIES PERFORMANCE MWAH PERFORMANCE NATIVE PERFORMANCE BAD ANIMATIONS ANIMATIONS HAPPY WITH NEW PLATFORM UNHAPPY WITH THE PROGRESS

Case Study: Nationale Nederlanden

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

today : Date

month : number

monthstr : string

domein : string

this . KVL_SPAREN_QTXT_02

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

columns

visibility

Slide 63

columns

visibility

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70