Download as PDF, PPTX
Uploaded byMaximiliano Firtman
Breaking HTML5 limits with Mobile JavaScript
This document contains the slides and notes from a workshop on breaking HTML5 limits on mobile JavaScript presented by Max Firtman on May 29, 2012 in San Francisco. The workshop covered various challenges in mobile web development including differences between platforms, native vs web applications, inconsistent standards support, lack of documentation from vendors, and user experience fragmentation across devices. It provided examples of these issues and discussed strategies for addressing limitations and problems in the mobile space.
More Related Content
Similar to Breaking HTML5 limits with Mobile JavaScript
![[T3CON12CA] TYPO3 Phoenix - The Current State](https://cdn.slidesharecdn.com/ss_thumbnails/currentstate-phoenix-120628083148-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Breaking HTML5 limits with Mobile JavaScript
- 1. May, 29th, 2012 San Francisco, CA Max Firtman @firt BREAKING HTML5 LIMITS ON MOBILE JAVASCRIPT Tuesday, May 29, 12
- 2. who am I? @firt mobile+web developer mobilexweb.com Tuesday, May 29, 12
- 3.
- 4. where? buenos aires ~ argentina Tuesday, May 29, 12
- 5. where? buenos aires ~ argentina patagonia soccer meat & wine tango Tuesday, May 29, 12
- 6.
- 7. books Image from my house Tuesday, May 29, 12
- 8.
- 9.
- 10. the answer isno Tuesday, May 29, 12
- 11.
- 12.
- 13.
- 14. About this workshop Tuesday, May 29, 12
- 15. About... Introduction Live examples & labs Live coding, how? Tuesday, May 29, 12
- 16. Logistics 9am: start ~11.00am: break 30 min ~11.30am: second part ~12.15pm: end, Q&A 1pm: lunch :) Tuesday, May 29, 12
- 17. Logistics Please: - Mobile phones in vibration mode (ironic, I know) - Participate and ask! Tuesday, May 29, 12
- 18. Let’s start Tuesday, May29, 12
- 19.
- 20.
- 21. mobile ‣ absolutely personal Tuesday, May 29, 12
- 22. mobile ‣ absolutely personal ‣ +5 billions Tuesday, May 29, 12
- 23. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Tuesday, May 29, 12
- 24. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Tuesday, May 29, 12
- 25. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Tuesday, May 29, 12
- 26. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Tuesday, May 29, 12
- 27.
- 28. mobile web appears Tuesday,May 29, 12
- 29. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Tuesday, May 29, 12
- 30. lots of questions Photo by wayneandwax (Flickr) Tuesday, May 29, 12
- 31. we need tolearn lots of questions Tuesday, May 29, 12
- 32. lots of platforms Tuesday,May 29, 12
- 33. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 34. it’s different Slower networks Tuesday, May 29, 12
- 35. it’s different Different browsing Tuesday, May 29, 12
- 36. it’s different Different behavior Tuesday, May 29, 12
- 37. it’s different Proxy-based browsers aka Where is my JavaScript? Tuesday, May 29, 12
- 38.
- 39. mobile browsers ‣ too many Tuesday, May 29, 12
- 40. mobile browsers ‣ too many ‣ (some) too limited Tuesday, May 29, 12
- 41. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Tuesday, May 29, 12
- 42. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation Tuesday, May 29, 12
- 43. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation ‣ (most) without a name Tuesday, May 29, 12
- 44. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools Tuesday, May 29, 12
- 45. statistics gs.statcounter.com - Apr 12 Tuesday, May 29, 12
- 46. some are known Tuesday,May 29, 12
- 47. some are known ‣ Safari (on iOS) ‣ Opera Mobile (on Android & Symbian) ‣ Firefox (on Android) ‣ Chrome (on Android) ‣ Internet Explorer (on Windows Phone) Tuesday, May 29, 12
- 48. some are unknown Tuesday,May 29, 12
- 49. some are unknown ‣ Nokia Browser (on Symbian, S40 & Meego 1.2) ‣ BlackBerry Browser ‣ Android Browser ‣ webOS Browser ‣ UCWeb ‣ Amazon Silk ‣ Bada Browser ‣ Opera Mini ‣ NetFront ‣ Phantom ‣ ... Tuesday, May 29, 12
- 50. and with different versions... Tuesday, May 29, 12
- 51. with different engines Tuesday,May 29, 12
- 52. with different engines ‣ Rendering engines ‣ WebKit ‣ Gecko ‣ Presto ‣ Trident ‣ Modern execution engines ‣ V8 ‣ JagerMonkey ‣ SquirrelFish (aka Nitro) ‣ Carakan ‣ Chakra Tuesday, May 29, 12
- 53. and there’s more! Tuesday,May 29, 12
- 54. web views Tuesday, May29, 12
- 55. web views Tuesday, May29, 12
- 56. web views ‣ on iOS, different execution engine Tuesday, May 29, 12
- 57. web views ‣ on iOS, different execution engine ‣ differences on HTML5 APIs Tuesday, May 29, 12
- 58. apps with browsers inside Tuesday, May 29, 12
- 59.
- 60.
- 61. pseudobrowsers ‣ mostly on iOS and Android Tuesday, May 29, 12
- 62. pseudobrowsers ‣ mostly on iOS and Android ‣ use the web view Tuesday, May 29, 12
- 63. and we canalso create native apps -such as phonegap- Tuesday, May 29, 12
- 64. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 65. native vs web Tuesday, May 29, 12
- 66. native code vs javascript Tuesday, May 29, 12
- 67. browser vs installed apps & stores Tuesday, May 29, 12
- 68. what is native? Tuesday,May 29, 12
- 69. what is awebapp? Tuesday, May 29, 12
- 70. no taxonomy p p p p b a iv e r id 5 a e a t y b l w n h h tm Tuesday, May 29, 12
- 71. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 72.
- 73. Photo by BenMillett (Flickr) Tuesday, May 29, 12
- 74.
- 75. Are you sure? Photo by Ricky David (Flickr) Tuesday, May 29, 12
- 76. What is ? Tuesday, May 29, 12
- 77.
- 78. html5 ‣ w3c standards (all in draft) Tuesday, May 29, 12
- 79. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards Tuesday, May 29, 12
- 80. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards Tuesday, May 29, 12
- 81. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards Tuesday, May 29, 12
- 82. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the web Tuesday, May 29, 12
- 83. html version 5? Tuesday,May 29, 12
- 84. why mobile html5? Tuesday,May 29, 12
- 85. typeof html5 !=boolean Tuesday, May 29, 12
- 86. some features safe Tuesday,May 29, 12
- 87. some features onlyon few platforms Tuesday, May 29, 12
- 88. some features experimental Tuesday, May 29, 12
- 89. some features with prefixes Tuesday, May 29, 12
- 90. and what about capabilities today? Tuesday, May 29, 12
- 91.
- 92. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 93. why? fragmentation info, docs & tools Tuesday, May 29, 12
- 94. second class developers Tuesday,May 29, 12
- 95. second class developers ‣ vague, non-existent or outdated documentation Tuesday, May 29, 12
- 96. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Tuesday, May 29, 12
- 97. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Tuesday, May 29, 12
- 98. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Tuesday, May 29, 12
- 99.
- 100.
- 101. fragmentation ‣ screen sizes Tuesday, May 29, 12
- 102. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” Tuesday, May 29, 12
- 103. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio Tuesday, May 29, 12
- 104. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) Tuesday, May 29, 12
- 105. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density Tuesday, May 29, 12
- 106. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi Tuesday, May 29, 12
- 107. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi Tuesday, May 29, 12
- 108. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi ‣ High density: 180 - 270 dpi Tuesday, May 29, 12
- 109. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi ‣ High density: 180 - 270 dpi ‣ Ultra high density: 270 - 350 dpi Tuesday, May 29, 12
- 110. fragmentation QQVGA QVGA WQVGA FWQVGA ‣ screen sizes LQVGA HVGA ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” nHD ‣ screen aspect ratio WVGA FWVGA ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) VGA ‣ screen pixel density DVGA QHD ‣ Low density: 100 - 130 dpi WSVGA ‣ Medium density: 130 - 180 dpi HD XGA ‣ High density: 180 - 270 dpi WXGA ‣ Ultra high density: 270 - 350 dpi QXGA Tuesday, May 29, 12
- 111.
- 112.
- 113. mobile javascript testing Tuesday, May 29, 12
- 114. emulators mobilexweb.com/emulators Tuesday, May 29, 12
- 115. friends lots of them and with different devices Tuesday, May 29, 12
- 116. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Tuesday, May 29, 12
- 117. mobile javascript debugging Tuesday, May 29, 12
- 118. debugging tools Remote Web Inspector • BlackBerry Smartphones 7 • BlackBerry PlayBook • Google Chrome for Android 4 • Opera Mobile Tuesday, May 29, 12
- 119. debugging tools Adobe Shadow adobe.com/go/shadow Tuesday, May 29, 12
- 120. debugging tools iwebinspector.com Tuesday, May 29, 12
- 121. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 122.
- 123.
- 124.
- 125.
- 126. mobile web is slow Picture from Simon Howden freedigitalphotos.net! Tuesday, May 29, 12
- 127.
- 128. battery consumption WW 2012– Session: Mobile Web Performance April 16–20, 2012, Lyon, Fra 50 45 40 Energy (Joules) 35 30 25 20 15 10 5 0 live.com microsoft weather picasa baidu facebook imdb youtube go.com wall st. journal blogger 3G setup nytimes tumblr wikipedia apple ebay amazon gmail yahoo cnn bbc engadget natgeo wordpress aol Figure 6: Energy consumption of top websites Web site Comment % Battery Traffic (bytes) life Upload Download The resulting numbers are shown in Figure 6. Note that the e m.gmail.com inbox 0.41 9050 12048 bars are so small that they are barely visible. m.picasa.com m.aol.com Who Killed My Battery ~ mobilexweb.com/go/battery user albums portal home 0.43 0.59 8223 11927 15475 37085 The left most column in Figure 6 shows the energy neede set up a 3G connection and download a few bytes without any m.amazon.com product page 0.48 9523 26838 ditional processing. Since all navigation requests must setup a mobile.nytimes.com US home page 0.53 15386 66336 touch.facebook.com facebook wall 0.65 30214 81040 connection we treat this measurement as a baseline where th mw.weather.com Stanford weather 0.62 38253 134531 teresting differences between web sites are above this line. apple.com Tuesday, May 29, 12 home page 1.41 86888 716835 Figure 6 is generated from the mobile versions of the
- 129. battery consumption Amazon consumes 17% energy in a non used JS jQuery.js ~ 4 joules (0,02%) ~5000 jQuery parsings per charge Who Killed My Battery ~ mobilexweb.com/go/battery Tuesday, May 29, 12
- 130.
- 131.
- 132.
- 133. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
- 134. some last advices Tuesday,May 29, 12
- 135.
- 136. performance, performance Tuesday, May 29, 12
- 137.
- 138. don’t be fanatic photo by Kurt Christensen (flickr) Tuesday, May 29, 12
- 139.
- 140. be futurefriend.ly Tuesday, May 29, 12
- 141. you can reacha good thank you! experience firt.mobi Tomorrow firtman@gmail.com 10.30am twitter: @firt www.mobilexweb.com Book signing Pictures)from)freedigitalphotos.net) Tuesday, May 29, 12