PhoneGap Day EU 2016
-
Upload
eddy-verbruggen -
Category
Technology
-
view
338 -
download
0
Transcript of PhoneGap Day EU 2016
![Page 1: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/1.jpg)
M BILEbanking apps .nl
![Page 2: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/2.jpg)
# 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
![Page 3: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/3.jpg)
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..
![Page 4: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/4.jpg)
This is when I left
![Page 5: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/5.jpg)
come on, man!
![Page 6: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/6.jpg)
• 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
![Page 7: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/7.jpg)
index.html is the Cordova starter template..
![Page 8: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/8.jpg)
config.xml
![Page 9: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/9.jpg)
non-native alerts
longpress link popup
longpress text selection
![Page 10: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/10.jpg)
• 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
![Page 11: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/11.jpg)
htmlcssjs
plugin
Hybrid (client rendered)
REST API
![Page 12: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/12.jpg)
htmlcssjs
Web (server rendered)*
HTTP GET/POST
*) recently they added a native logon page
![Page 13: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/13.jpg)
htmlcssjs
native
plugin
REST API
Native/Web (client rendered)
![Page 14: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/14.jpg)
![Page 15: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/15.jpg)
1.Tip
![Page 16: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/16.jpg)
// 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 */ }
![Page 17: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/17.jpg)
2.Tip
![Page 18: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/18.jpg)
2.
Async: fetch lang through plugin Sync: as param: /route?lang=en
i18n done rightPropagate the active language synchronously
![Page 19: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/19.jpg)
3.Tip
![Page 20: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/20.jpg)
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
![Page 21: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/21.jpg)
4.Tip
![Page 22: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/22.jpg)
4.
myPlugin.updateNavbar(..) myPlugin.close(..)
Talk to native from webRoll your own Cordova plugin
![Page 23: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/23.jpg)
5.Tip
![Page 24: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/24.jpg)
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
![Page 25: PhoneGap Day EU 2016](https://reader033.fdocuments.in/reader033/viewer/2022052709/58aaff7f1a28abd35e8b58f3/html5/thumbnails/25.jpg)