State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what...
Transcript of State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what...
![Page 1: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/1.jpg)
State of the Mobile WebBen Teese, Shine Technologies
![Page 2: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/2.jpg)
What this talk is about
Why mobile web apps? Best practices Hybrid apps
![Page 3: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/3.jpg)
![Page 4: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/4.jpg)
![Page 5: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/5.jpg)
2007 2014
![Page 6: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/6.jpg)
Evergreen browsers
![Page 7: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/7.jpg)
![Page 8: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/8.jpg)
Distribution
![Page 9: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/9.jpg)
Cross-platform
![Page 10: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/10.jpg)
![Page 11: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/11.jpg)
![Page 12: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/12.jpg)
![Page 13: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/13.jpg)
![Page 14: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/14.jpg)
![Page 15: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/15.jpg)
![Page 16: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/16.jpg)
Best Practices
![Page 17: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/17.jpg)
![Page 18: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/18.jpg)
It’s all about performance
![Page 19: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/19.jpg)
Tip #1: Latency
![Page 20: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/20.jpg)
Network Latency
![Page 21: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/21.jpg)
![Page 22: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/22.jpg)
![Page 23: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/23.jpg)
Mitigations
Combine your assets 1 call per user interaction Give the user feedback Do it early
![Page 24: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/24.jpg)
Tip #2: Latency (again)
![Page 25: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/25.jpg)
Touch Latency
![Page 26: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/26.jpg)
With delay Without delay
![Page 27: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/27.jpg)
Mitigation
github.com/ftlabs/fastclick!
ngTouch!
Do it early
![Page 28: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/28.jpg)
Tip #3: Not all animations are
created equal
![Page 29: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/29.jpg)
The Humble Accordion
![Page 30: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/30.jpg)
iPhone 5s Samsung S4
![Page 31: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/31.jpg)
Avoid JQuery animations Test on real devices Leverage hardware-acceleration
Mitigations
![Page 32: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/32.jpg)
Tip #4: Don't put too much
stuff in the DOM
![Page 33: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/33.jpg)
![Page 34: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/34.jpg)
![Page 35: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/35.jpg)
Review your UX Test on real devices Just don’t do it
Mitigations
![Page 36: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/36.jpg)
Hybrids
![Page 37: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/37.jpg)
android.webkit.WebView
UIWebView
So what is a hybrid?
Titanium
![Page 38: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/38.jpg)
![Page 39: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/39.jpg)
![Page 40: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/40.jpg)
Get me into the app store
![Page 41: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/41.jpg)
Access native phone features
![Page 42: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/42.jpg)
Write once, run anywhere
![Page 43: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/43.jpg)
I want to use my existing web skillz
![Page 44: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/44.jpg)
![Page 45: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/45.jpg)
Let’s wrap this up
Mobile web apps can work Factor in performance Consider hybrid apps
![Page 46: State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what is a hybrid? Titanium. Get me into the app store. Access native phone features.](https://reader036.fdocuments.us/reader036/viewer/2022070914/5fb50b3a2402752ba244d81e/html5/thumbnails/46.jpg)
Thank you
@benteese