@souders

stevesouders.com/docs/svmwameetup-webviews-20140930.pptx

do u webview?

flickr.com/photos/dullhunk/3930915541/

flickr.com/photos/29022619@N03/798025115

Scott Jenson

designmind.frogdesign.com/blog/mobile-apps-must-die.html

native

^ too much trouble

high hurdle

JIT interaction

discoverability

?

webview

hybrids are greatmore code reuse across web &

hybrid

more design reuse across web & hybrid

support more devices more quickly

avoid app store re-approval process

signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content

today.com/pets/baby-geep-cross-between-goat-sheep-stealing-hearts-everywhere-1D80007977

"geep"

do u webview? YES!we all do

webview

webview

flickr.com/photos/53780686@N04/5052368839

WebView Traffic

• hard to track – UA varies

• Chrome: ~6% of iOS traffic*

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/37.0.2062.60

Mobile/11D257 Safari/9537.53

• Facebook app: ~5% of iOS traffic*

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201

[FBAN/FBIOS;FBAV/12.1.0.24.20;FBBV/3214247;FBDV/iPhone6,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/7.1.1;FBSS/2;

FBCR/AT&T;FBID/phone;FBLC/en_US;FBOP/5]

You don't need a hybrid app to get webview traffic

* wurfl.io/MOVR/

guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

"Their testing is flawed. They didn't actually test the Safari browser on the

iPhone. Instead they only tested their own proprietary app, which uses an

embedded Web viewer that doesn't actually take advantage of Safari's Web

performance optimizations"

- Apple

guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

flickr.com/photos/airflore/4779420939

"Their testing is flawed. They didn't actually test the Safari browser on the

iPhone. Instead they only tested their own proprietary app, which uses an

embedded Web viewer that doesn't actually take advantage of Safari's Web

performance optimizations"

- Apple

guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

UIWebView iOS4.3• Nitro JS engine (JIT, 2.5x faster)• application cache• async script loading

hybrid apps & home screen apps

performed slowerflickr.com/photos/jorislouwes/8097404205/

iOS 7 UIWebView

iOS 7 UIWebView

iOS 8 WKWebView

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓html5test.com 410 440 278 434

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

SPDY ✓ ✓

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

SPDY ✓ ✓

WebP ✓

srcset ✓ ?

WebGL ✓ ?

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

SPDY ✓ ✓

WebP ✓

srcset ✓ ?

WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓

Chromium

WebKit

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

SPDY ✓ ✓

WebP ✓

srcset ✓ ?

WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓

Nav Timing ✓ ✓ ✓Resource Timing ✓

Chromium

WebKit

Legacy Webviewshybrid apps have to be rebuilt

Android webview is pinned at Chromium 30; requires OS upgrade to update

Android hybrid apps can bundle other webviews: Crosswalk, Geckoview

flickr.com/photos/telstar/4572243525

legacy webviews are here for

awhile

iOS 7 UIWebView

iOS 8 WKWebView

Android 4.3 Webview

Android 4.4 Webview

Nitro/V8 ✓ ✓

html5test.com 410 440 278 434

localStorage ✓ ✓ ✓ ✓

app cache ✓ ✓ ✓ ✓

indexedDB ✓ ✓

SPDY ✓ ✓

WebP ✓

srcset ✓ ?

WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓

Nav Timing ✓ ✓ ✓Resource Timing ✓

Chromium

WebKit

docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present

docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present

speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

web & hybrid apps are good

browser & webview perf differs

you DO have webview traffic

old webviews here for awhile

measure perf on all webviews

optimize for mobile

takeaways

Brian LeRoux

Guy Podjarny

Max Firtman

Tim Kadlec

Steve Souders

@souders

stevesouders.com/docs/svmwameetup-webviews-20140930.pptx