A presentation at NativeScript Developer Day Europe in in Rotterdam, Netherlands by Rowdy Rabouw
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
new
Date ();
let
nu . getMonth () + 1 ;
let
maand < 10 ? "0" + month . toString () : month . toString ();
let
"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 ) => {
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
"2* *"
"{{ 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
"2* *"
"{{ 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
Nationale-Nederlanden Pensions launched the native app Mijn Pensioencoach a few years ago. In this session Rowdy will explain why they switched to NativeScript with Angular this year and share his experiences, struggles, challenges and victories.
You'll get a look behind the scenes of a complex app build by a small team and because it's a dev day, a lot of code is involved!
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.