Post on 27-Nov-2014
description
transcript
@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