phonegap day eu 2016

M BILEbanking apps .nl

# 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

Triodos BankMedium-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..

This is when I left

come on, man!

• 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

RabobankLarge Dutch cooperative bank

index.html is the Cordova starter template..

config.xml

non-native alerts

longpress link popup

longpress text selection

• 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?

INGLargest bank in NL

htmlcssjs

plugin

Hybrid (client rendered)

REST API

htmlcssjs

Web (server rendered)*

HTTP GET/POST

*) recently they added a native logon page

htmlcssjs

native

plugin

REST API

Native/Web (client rendered)

1.Tip

// index.html <style src=“styles.css” /> <style src=“fonts.css” />

1.Reuse native fontsFor a consistent look

/* Android */ @font-face { font-family: "ING"; src: url('../fonts/ING.ttf'); }

/* iOS */ @font-face { font-family: “ING"; /* .plist refers to src */ }

2.Tip

2.

Async: fetch lang through plugin Sync: as param: /route?lang=en

i18n done rightPropagate the active language synchronously

3.Tip

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 timeBecause you don’t have a splashscreen to hide it

4.Tip

4.

myPlugin.updateNavbar(..) myPlugin.close(..)

Talk to native from webRoll your own Cordova plugin

5.Tip

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 devsBecause they’re not