PhoneGap Day EU 2016
-
Upload
eddy-verbruggen -
Category
Technology
-
view
338 -
download
0
Transcript of 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