Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of the Mobile Browser

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
April 25, 2013
Programming
3
170

State of the Mobile Browser

What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.

B590f0fb3aba34aee093cfa1406eac0b?s=128

Paul Kinlan

April 25, 2013
Tweet

More Decks by Paul Kinlan

See All by Paul Kinlan
[this.javascript] State of Chrome
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
0
72
Progressive Web Apps in 10 minutes - Google for India
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
2
190
Be instant and engaging on the mobile web - Google Mobile for India
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
4
210
The future of the web on mobile? - Coldfront conf
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
5
53k
This is the Web Platform
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
5
59k
The Next Evolution of Chrome Apps - Devoxx 2012
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
3
360
Building Web Apps of the future. Tomorrow, today and yesterday.
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
32
6.8k

Other Decks in Programming

See All in Programming
IE Graduation Certificate
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
6
4.8k
IE Graduation (IE の功績を讃える)
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
20
12k
ES2022の新機能
A3efba75cfbb0b7d5248eb74d1d29d79?s=48 smt7174
0
250
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか？
70be36c6f5871b4f2d238f96587ffeb3?s=48 miiiki
0
120
LINE Messaging APIの概要 - LINE API総復習シリーズ
01cca15e7d324831bd63b7e1e6213f7a?s=48 uezo
1
180
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
GDG Seoul IO Extended 2022 - Android Compose
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
0
320
Let's keep Commodore 64 alive for the next 40 years
85977ebfe59c2ee669f2196930f1a701?s=48 mehowte
1
110
クックパッドマートの失敗したデータ設計 Before / After 大放出
0be62f7ac4cc32f37f02a98aaeb86f5f?s=48 mokuzon
0
150
模組化的Swift架構(二) DDD速成
A3d3b179955bdea9fc05b3251f1b1f10?s=48 haifengkao
0
390
#JJUG_CCC 「サポート」は製品開発？　- JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
244963b5eab1dd775692490daea81a7f?s=48 cdataj
0
420
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120

Featured

See All Featured
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
265
21k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k

Transcript

  1. State of the Mobile Browser google.com/+PaulKinlan goo.gl/3LyMW

  2. Overview

  3. > 1 Billion users have a modern browser.

  4. Every device has to have a "decent" browser.

  5. The browser is still the most used application.

  6. None

  7. Rounded Corners

  8. Naive Look

  9. What is your mobile traffic?

  10. None
  11. None
  12. None

  13. > 50% "We now have more users engaging with Google+

    from mobile than desktop." - IO 2012

  14. Mobile The important bits

  15. 2 THINGS

  16. Performance Where do you look?

  17. Developers look at the .... Network (time to glass)

  18. I also think UI Jank (time to frustration)

  19. Lumpiness = Less Engagement

  20. None

  21. They have to hack it up like crazy Its no

    longer your father's HTML. • Just a <body /> • Busting DOM Trees into iframes to create layers http://goo.gl/P90PK

  22. Where are the bottlenecks? • Javascript? • DOM manipulation? •

    Paint?

  23. It's not just the JS + Re-Layouts. + Re-paints +

    Decode time X X
  24. None
  25. None

  26. Go home and measure paulkinlan@google.com

  27. Inconsistencies

  28. Wot Consistent Platform?

  29. 100% Support Mostly boring stuff

  30. Media Queries 100% onmobile.iwanttouse.com/#css-mediaqueries

  31. Geolocation 86% http://onmobile.iwanttouse.com/#geolocation

  32. Offline http://onmobile.iwanttouse.com/#offline-apps 86%

  33. Native developers build online in

  34. Web developers build offline in

  35. Adding offline is a lot harder than online

  36. Camera Access <input type=file accept=image/jpeg capture> Demo http://jsbin.com/avawaj/1 86%

  37. SVG 80% It would be 100% if not for Android

    < 3

  38. Flex Box It would be 100% if not for Android

    < 3 80%

  39. WebSQL Database 86%

  40. IndexedDB 3% Reaching 3% of the web you might as

    well use any API you want....

  41. Thinking about storage in terms of API's is wrong

  42. WebSockets 86% On mobile use wss (secure sockets)

  43. None

  44. Device Orientation onmobile.iwanttouse.com/#deviceorientation 67% window.ondeviceorientation = function(event) { // process

    event.alpha, event.beta and event.gamma }; jsbin.com/ofeces/1

  45. FileReader 66%

  46. requestAnimationFrame 44%

  47. Web Audio onmobile.iwanttouse.com/#audio-api 40%

  48. The following might look depressing

  49. But it's really exciting

  50. Shadow DOM onmobile.iwanttouse.com/#shadowdom 3%

  51. getUserMedia onmobile.iwanttouse.com/#stream 2% jsbin.com/iyekuc/3/quiet navigator.getUserMedia( {audio:true, video: true}, function(stream) {

    videoEl.src = URL.createObjectURL(stream); });

  52. WebRTC onmobile.iwanttouse.com/#streams 1% apprtc-m.appspot.com

  53. WebGL http://onmobile.iwanttouse.com/#webgl 1% Demo: dungeonfury.playcanvas.com

  54. CSS Filters http://onmobile.iwanttouse.com/#css-filters 43%? <style> img { -webkit-filter: blur(30px); }

    </style> http://jsbin.com/orekeb/2/

  55. CSS Custom Shaders 0%

  56. The mobile web is a rich platform

  57. Go and do moar Awesome