Successfully reported this slideshow.

Breaking JavaScript Limits on Mobile HTML5

1

Share

Upcoming SlideShare
Collaborize Overview
Collaborize Overview
Loading in …3
×
1 of 161
1 of 161

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Breaking JavaScript Limits on Mobile HTML5

  1. 1. Max Firtman @firt BREAKING LIMITS ON JAVASCRIPT FOR MOBILE HTML5 San Francisco, May 28th, 2013 Tuesday, May 28, 13
  2. 2. mobile+web developer maximiliano @firt Tuesday, May 28, 13
  3. 3. Tuesday, May 28, 13
  4. 4. Tuesday, May 28, 13
  5. 5. we’ll talk about mobile 1- Mobile HTML5 2- JavaScript on Mobile 3- UI 4- Device Tuesday, May 28, 13
  6. 6. material Presentation online tool (Chrome/FF) smartphone/tablet? Tuesday, May 28, 13
  7. 7. Tuesday, May 28, 13
  8. 8. 1- mobile html5 Tuesday, May 28, 13
  9. 9. mobile 1- websites 2- apps Tuesday, May 28, 13
  10. 10. mobile 1- websites 2- apps Tuesday, May 28, 13
  11. 11. mobile 1- websites 2- apps Tuesday, May 28, 13
  12. 12. with html5 we can create... Tuesday, May 28, 13
  13. 13. we can create 1- websites Tuesday, May 28, 13
  14. 14. Using the browser URL Web Server 1- websites we can create Tuesday, May 28, 13
  15. 15. we can create 2- webapps Tuesday, May 28, 13
  16. 16. Browser to install Full-screen Icon on home screen Web Server 2- webapps we can create Tuesday, May 28, 13
  17. 17. full screen webapps home screen webapps webapps are also known as( ) Tuesday, May 28, 13
  18. 18. we can create 3- native webapps Tuesday, May 28, 13
  19. 19. Package, compile, sign Icon on home screen App Store No web server 3- native webapps we can create Tuesday, May 28, 13
  20. 20. hybrid apps packaged webapps native webapps are also known as ( ) Tuesday, May 28, 13
  21. 21. mobile 1- websites 2- apps Tuesday, May 28, 13
  22. 22. a- native b- webapps c- native webapps mobile 1- websites 2- apps Tuesday, May 28, 13
  23. 23. web platforms Tuesday, May 28, 13
  24. 24. How many browsers do you know on desktop? web platforms Tuesday, May 28, 13
  25. 25. 5 web platforms Tuesday, May 28, 13
  26. 26. How many browsers do you know on mobile? web platforms Tuesday, May 28, 13
  27. 27. ... web platforms Tuesday, May 28, 13
  28. 28. Tuesday, May 28, 13
  29. 29. Android Browser Tuesday, May 28, 13
  30. 30. Android Browser 2.2 Tuesday, May 28, 13
  31. 31. Android Browser 2.3 Tuesday, May 28, 13
  32. 32. Android Browser 4.x Tuesday, May 28, 13
  33. 33. Did I mention it is NOT Google Chrome? ( ) Tuesday, May 28, 13
  34. 34. Google Chrome Tuesday, May 28, 13
  35. 35. Google Chrome Android Tuesday, May 28, 13
  36. 36. Google Chrome iOS Tuesday, May 28, 13
  37. 37. Safari on iOS Tuesday, May 28, 13
  38. 38. Opera Tuesday, May 28, 13
  39. 39. Opera Mobile Tuesday, May 28, 13
  40. 40. Opera Mini Tuesday, May 28, 13
  41. 41. Opera for Android Tuesday, May 28, 13
  42. 42. Firefox Tuesday, May 28, 13
  43. 43. Firefox OS Tuesday, May 28, 13
  44. 44. Internet Explorer Tuesday, May 28, 13
  45. 45. BlackBerry Browser 5-7.x Tuesday, May 28, 13
  46. 46. BlackBerry Browser 5-7.x Tuesday, May 28, 13
  47. 47. BlackBerry Browser PB Tuesday, May 28, 13
  48. 48. BlackBerry Browser BB10 Tuesday, May 28, 13
  49. 49. Nokia Browser Tuesday, May 28, 13
  50. 50. Nokia Browser Symbian Tuesday, May 28, 13
  51. 51. Nokia Browser MeeGo Tuesday, May 28, 13
  52. 52. Nokia Browser Series 40 Tuesday, May 28, 13
  53. 53. Silk Tuesday, May 28, 13
  54. 54. UC Browser Tuesday, May 28, 13
  55. 55. Dolfin Tuesday, May 28, 13
  56. 56. should I continue? ( ) Tuesday, May 28, 13
  57. 57. Proxy browsers web platforms Tuesday, May 28, 13
  58. 58. And it’s not just browsers! web platforms Tuesday, May 28, 13
  59. 59. Web View web platforms Tuesday, May 28, 13
  60. 60. Web View web platforms Tuesday, May 28, 13
  61. 61. Web View web platforms Tuesday, May 28, 13
  62. 62. Web View web platforms Tuesday, May 28, 13
  63. 63. Official (native) webapp platforms web platforms Tuesday, May 28, 13
  64. 64. Official (native) webapp platforms web platforms Tuesday, May 28, 13
  65. 65. unknown future Tuesday, May 28, 13
  66. 66. 2013: glasses Tuesday, May 28, 13
  67. 67. Tuesday, May 28, 13
  68. 68. web platforms - too many - different versions - different scenarios - not just the browser Tuesday, May 28, 13
  69. 69. “change is the only constant“ Heraclitus Tuesday, May 28, 13
  70. 70. 2- javascript on mobile Tuesday, May 28, 13
  71. 71. Origins & security js on mobile Tuesday, May 28, 13
  72. 72. Website Webapp Native webapp origins & security Tuesday, May 28, 13
  73. 73. Debugging (demo) js on mobile Tuesday, May 28, 13
  74. 74. Power consumption js on mobile Tuesday, May 28, 13
  75. 75. 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 Tomorrow, 1.45pm @ Fluent Tuesday, May 28, 13
  76. 76. JavaScript lifetime js on mobile Tuesday, May 28, 13
  77. 77. classic web? js lifetime Tuesday, May 28, 13
  78. 78. mobile is quite different (demo) js lifetime Tuesday, May 28, 13
  79. 79. let's start coding and testing Tuesday, May 28, 13
  80. 80. page visibility api Tuesday, May 28, 13
  81. 81. awake detection Tuesday, May 28, 13
  82. 82. notification api Tuesday, May 28, 13
  83. 83. zombie window Tuesday, May 28, 13
  84. 84. background Tuesday, May 28, 13
  85. 85. background Tuesday, May 28, 13
  86. 86. Tuesday, May 28, 13
  87. 87. <blink>Welcome to my website!</blink> Tuesday, May 28, 13
  88. 88. <bgsound src="welcome.wav"> Tuesday, May 28, 13
  89. 89. <font family="Arial" size="20"> Tuesday, May 28, 13
  90. 90. background <meta http-equiv="refresh" content="60"> Tuesday, May 28, 13
  91. 91. background <meta http-equiv="refresh" content="2"> Tuesday, May 28, 13
  92. 92. background <meta http-equiv="refresh" content="2"> <script> var mr = document.querySelector("meta"); setInterval(function() { mr.content=mr.content; }, 1000); </script> Tuesday, May 28, 13
  93. 93. Tuesday, May 28, 13
  94. 94. background Tuesday, May 28, 13
  95. 95. DISCLAIMER Tuesday, May 28, 13
  96. 96. only from iOS 6.1 (5.0+ similar) Tuesday, May 28, 13
  97. 97. Progressive enhancement js on mobile Tuesday, May 28, 13
  98. 98. js on mobile - security domains - debugging - battery consumption - background execution - progressive enhancement Tuesday, May 28, 13
  99. 99. 3- UI on mobile Tuesday, May 28, 13
  100. 100. UI Viewport y pixels Tuesday, May 28, 13
  101. 101. UI Full screen Tuesday, May 28, 13
  102. 102. full screen Tuesday, May 28, 13
  103. 103. full screen 4 solutions Tuesday, May 28, 13
  104. 104. full screen Solution #1 Tuesday, May 28, 13
  105. 105. full screen <meta name="apple-mobile-web-app-capable" content="yes"> Tuesday, May 28, 13
  106. 106. full screen <meta name="apple-mobile-web-app-capable" content="yes"> if (navigator.standalone) { } Tuesday, May 28, 13
  107. 107. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width"> Tuesday, May 28, 13
  108. 108. Tuesday, May 28, 13
  109. 109. Tuesday, May 28, 13
  110. 110. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=320.1"> Tuesday, May 28, 13
  111. 111. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="..." media="device-height: 568px"> Tuesday, May 28, 13
  112. 112. full screen Tuesday, May 28, 13
  113. 113. full screen Solution #2 Tuesday, May 28, 13
  114. 114. full screen Tuesday, May 28, 13
  115. 115. full screen @media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) { } Tuesday, May 28, 13
  116. 116. full screen Solution #3 future platforms Tuesday, May 28, 13
  117. 117. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } Tuesday, May 28, 13
  118. 118. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } Tuesday, May 28, 13
  119. 119. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } else if (body.mozRequestFullScreen) { body.mozRequestFullScreen(); } Tuesday, May 28, 13
  120. 120. full screen Solution #4 ... Tuesday, May 28, 13
  121. 121. full screen window.addEventListener("load", function() { window.scrollTo(0, 0); }); // use with care document.addEventListener("touchmove", function(e) { e.preventDefault() }); Tuesday, May 28, 13
  122. 122. UI images for different screen densities Tuesday, May 28, 13
  123. 123. screen densities <img src="photo.png" width="300"> Tuesday, May 28, 13
  124. 124. screen densities Tuesday, May 28, 13
  125. 125. 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 device px px ratio screen densities Tuesday, May 28, 13
  126. 126. Solution #1 Tuesday, May 28, 13
  127. 127. screen densities use vector images <img src="photo.svg" width="300"> <svg></svg> @font-face {} Tuesday, May 28, 13
  128. 128. screen densities Tuesday, May 28, 13
  129. 129. screen densities Tuesday, May 28, 13
  130. 130. Solution #2 Tuesday, May 28, 13
  131. 131. screen densities <img src="photo.png" width="300"> if (window.devicePixelRatio > 1.5) { // change URL } Tuesday, May 28, 13
  132. 132. Solution #3 Tuesday, May 28, 13
  133. 133. screen densities <div id="photoContainer"> #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px; } Tuesday, May 28, 13
  134. 134. Solution #4 Tuesday, May 28, 13
  135. 135. screen densities <div id="photoContainer"> #photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px; } Tuesday, May 28, 13
  136. 136. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5) { #photoContainer { background-image: url('photo-hi.png'); background-size: 100%; width: 300px; height: 200px; } } Tuesday, May 28, 13
  137. 137. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) { } Tuesday, May 28, 13
  138. 138. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2) { } Tuesday, May 28, 13
  139. 139. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2), (min-resolution: 1.5dppx) { } Tuesday, May 28, 13
  140. 140. always query on ranges @media (-webkit-device-pixel-ratio: 2) Tuesday, May 28, 13
  141. 141. always query on ranges @media (-webkit-min-device-pixel-ratio: 1.7) Tuesday, May 28, 13
  142. 142. find the balance 300x300 900x900 Tuesday, May 28, 13
  143. 143. UI High resolution canvas Tuesday, May 28, 13
  144. 144. hi-res canvas <canvas width="300" height="200"> </canvas> 300px Tuesday, May 28, 13
  145. 145. hi-res canvas 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 device px px ratio Tuesday, May 28, 13
  146. 146. hi res canvas <canvas width="300" height="200"> </canvas> 300px Tuesday, May 28, 13
  147. 147. hi res canvas var devPxRatio = window.devicePixelRatio; var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio; Tuesday, May 28, 13
  148. 148. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio = 2 canvasPxRatio = 1 Tuesday, May 28, 13
  149. 149. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio >= 1 canvasPxRatio = undefined Tuesday, May 28, 13
  150. 150. Solution #1 hi res canvas Tuesday, May 28, 13
  151. 151. hi res canvas <meta name="viewport" content="width=640"> <canvas width="600" height="400"> </canvas> 600px Tuesday, May 28, 13
  152. 152. Solution #2 hi res canvas Tuesday, May 28, 13
  153. 153. hi res canvas <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px Tuesday, May 28, 13
  154. 154. hi res canvas <canvas width="600" height="400"> </canvas> 300px <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> Tuesday, May 28, 13
  155. 155. hi res canvas <canvas width="600" height="400" style="width: 300px; height: 200px"> </canvas> 300px <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> Tuesday, May 28, 13
  156. 156. multi-platform & multi-resolution Tuesday, May 28, 13
  157. 157. execution & memory Tuesday, May 28, 13
  158. 158. wrapping up Tuesday, May 28, 13
  159. 159. Tuesday, May 28, 13
  160. 160. “change is the only constant“ Heraclitus Tuesday, May 28, 13
  161. 161. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firtman@gmail.com @firt firt.mobi/pmw Tuesday, May 28, 13

×