Mobile app development: Going hybrid
-
Upload
martin-naumann -
Category
Technology
-
view
1.396 -
download
0
description
Transcript of Mobile app development: Going hybrid
![Page 1: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/1.jpg)
Going hybridMobile apps with web technologies
![Page 2: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/2.jpg)
What’s hybrid?
![Page 3: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/3.jpg)
How do you do that?
PhoneGap
SenchaTitanium
Calatrava
Trigger.ioRhoMobileM Project
MoSync
AppFramework
![Page 4: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/4.jpg)
How do you do that?
PhoneGap
SenchaTitanium
Calatrava
Trigger.ioRhoMobileM Project
MoSync
AppFramework
![Page 5: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/5.jpg)
Woah! Wait - what?http://avgp.github.io/hybrid-strategy-picker/
![Page 6: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/6.jpg)
The 3 big secrets1. The uncanny valley
![Page 7: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/7.jpg)
The 3 big secrets2. Hybrid is different from everything
![Page 8: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/8.jpg)
The 3 big secrets3.
![Page 9: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/9.jpg)
The hitchhiker’s guideto PhoneGap
![Page 10: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/10.jpg)
TestTest often & test in Phonegap!
![Page 11: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/11.jpg)
OptimizeCaching, Minification, LocalStorage
![Page 12: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/12.jpg)
Use the forceConnection API, Battery API, Accelerometer
![Page 13: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/13.jpg)
If it’s native......there’s a PhoneGap plugin for it.
![Page 14: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/14.jpg)
War stories
![Page 15: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/15.jpg)
iOS and the iframes
<iframe src="http://example.com"></iframe><a href="http://somesite.com" target="_blank">Open</a>
Android: iframe is embedded, link opens a browseriOS - round 1: iframe opens a new browser on start.iOS - round 2: "stay-in-webview=true"
iframe is embedded, link opens in the app
![Page 16: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/16.jpg)
Android and the datepicker
The browser on Android
![Page 17: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/17.jpg)
Android and the datepicker
PhoneGap on iOS
![Page 18: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/18.jpg)
Android and the datepicker
PhoneGap on Android
![Page 19: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/19.jpg)
Android and the datepicker
What the ..??
![Page 20: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/20.jpg)
The dark side of the browser
● “Relayout” & Repaint events● HW-acceleration is magic● Bitmap grouping (webkit-transform: translateZ(0))● Compositing● Be really careful with AppCache
![Page 21: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/21.jpg)
Links
● http://engine.centralway.com● http://docs.cordova.io● http://aerotwist.com/blog/making-a-60fps-
mobile-app● https://wiki.mozilla.org/WebAPI● http://www.w3.org/2002/mmi/● http://www.w3.org/Mobile/mobile-web-app-
state/
![Page 22: Mobile app development: Going hybrid](https://reader033.fdocuments.us/reader033/viewer/2022051816/54708c57b4af9f9d0a8b47cc/html5/thumbnails/22.jpg)
Thank you! Questions?