This presentation by Eddy Verbruggen was given at PhoneGap Day EU 2016 in Amsterdam. It's about how three Dutch banks have used Cordova to add web content to their apps. There's quite a few video's in the slides which show as images here, so if you want to see the video's please (also) watch this: http://www.x-services.nl/PGDayEU16-Eddy-720p.m4v (note that PhoneGap will also upload the actual presentation to their YouTube channel at https://www.youtube.com/user/PhoneGap

1. M BILE
banking apps .nl

2. # employees 1.100 50.000 60.000
# net result 2015 40 mln 2 bln 3 bln
# app users 40.000 2.000.000 2.400.000
avg app rating
these are guesstimates!
Triodos Bank Rabobank ING

3. Triodos Bank
Medium-sized ethical bank
• “We want responsive internet banking”
• Just change the CSS!
• What about easy PIN access, low bandwidth usage,
offline usage, etc? Let’s make a mobile app!
• Uhh, OK, go for it :)
• Problem: the ICT dept is 100% Java devs
• With Cordova it took 3 guys 3 months to launch on iOS
and Android!
• Adding Windows Universal took another month
• Since then Triodos thinks it’s done..

4. This is when I left

5. come on,
man!

6. • Used to have a native app
• Then decided to share code between web and mobile
• So they used Cordova as a wrapper
• But cut too many corners
Rabobank
Large Dutch cooperative bank

7. index.html is the Cordova starter template..

8. config.xml

9. non-native alerts
longpress link popup
longpress text selection

10. • NL’s best app 2015
• Very proud mobile department
• But the business wants more, faster
• But skilled native devs are scarce
• While ING has many web devs
• So what about adding a webview?
• But what about security?
• And performance?
• And a consistent look & feel?
ING
Largest bank in NL

11. html
css
js
plugin
Hybrid (client rendered)
REST API

12. html
css
js
Web (server rendered)*
HTTP GET/POST
*) recently they added a native logon page

13. html
css
js
native
plugin
REST API
Native/Web (client rendered)

15. 1.
Tip

16. // index.html
<style src=“styles.css” />
<style src=“fonts.css” />
1.Reuse native fonts
For a consistent look
/* Android */
@font-face {
font-family: "ING";
src: url('../fonts/ING.ttf');
}
/* iOS */
@font-face {
font-family: “ING";
/* .plist refers to src */
}

17. 2.
Tip

18. 2.
Async: fetch lang through plugin Sync: as param: /route?lang=en
i18n done right
Propagate the active language synchronously

19. 3.
Tip

20. 3.
• iOS is fine (a few 100 ms)
• Android can take seconds
• Minimize your JS (and CSS) payload
• Angular is a beast - minify helps
• also for cordova.js
• only ~25 ms
• but still
• Preload webview content
• Allowed? Load a blank route
• Not allowed? Use a spinner:
Optimise bootstrap time
Because you don’t have a splashscreen to hide it

21. 4.
Tip

22. 4.
myPlugin.updateNavbar(..) myPlugin.close(..)
Talk to native from web
Roll your own Cordova plugin

23. 5.
Tip

24. 5.
• Explain what you’re going to do
• Show that you know your sh*
• Be humble
• Unless you’re a rockstar
• The kind with a guitar!
• Be honest about limitations
• They will help you find solutions or
accept them
• Walk them through your code
• Pair program with them
• Give lots of demo’s showing x-platform
goodness
Onboard the native devs
Because they’re not