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

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

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

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

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

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

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

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

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

@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 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

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

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

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

@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

@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 MONDRIAAN

@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

@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