State of the Mobile Web - slides.yowconference.com€¦ · android.webkit.WebView UIWebView So what...

46
State of the Mobile Web Ben Teese, Shine Technologies

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.

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.

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

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.

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

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.

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

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

Thank you

@benteese