State of the Mobile WebBen Teese, Shine Technologies

What this talk is about

Why mobile web apps? Best practices Hybrid apps

2007 2014

Evergreen browsers

Distribution

Cross-platform

Best Practices

It’s all about performance

Tip #1: Latency

Network Latency

Mitigations

Combine your assets 1 call per user interaction Give the user feedback Do it early

Tip #2: Latency (again)

Touch Latency

With delay Without delay

Mitigation

github.com/ftlabs/fastclick!

ngTouch!

Do it early

Tip #3: Not all animations are

created equal

The Humble Accordion

iPhone 5s Samsung S4

Avoid JQuery animations Test on real devices Leverage hardware-acceleration

Mitigations

Tip #4: Don't put too much

stuff in the DOM

Review your UX Test on real devices Just don’t do it

Mitigations

Hybrids

android.webkit.WebView

UIWebView

So what is a hybrid?

Titanium

Get me into the app store

Access native phone features

Write once, run anywhere

I want to use my existing web skillz

Let’s wrap this up

Mobile web apps can work Factor in performance Consider hybrid apps

Thank you

@benteese