Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Breaking JavaScript Limits on Mobile HTML5

2,635 views

Published on

Companion presentation for the workshop at Fluent, May 28th 2013.

Published in: Technology
  • Be the first to comment

Breaking JavaScript Limits on Mobile HTML5

  1. 1. Max Firtman @firtBREAKING LIMITSON JAVASCRIPT FORMOBILE HTML5San Francisco, May 28th, 2013Tuesday, May 28, 13
  2. 2. mobile+web developermaximiliano@firtTuesday, May 28, 13
  3. 3. Tuesday, May 28, 13
  4. 4. Tuesday, May 28, 13
  5. 5. we’ll talk about mobile1- Mobile HTML52- JavaScript on Mobile3- UI4- DeviceTuesday, May 28, 13
  6. 6. materialPresentationonline tool (Chrome/FF)smartphone/tablet?Tuesday, May 28, 13
  7. 7. Tuesday, May 28, 13
  8. 8. 1- mobile html5Tuesday, May 28, 13
  9. 9. mobile1- websites2- appsTuesday, May 28, 13
  10. 10. mobile1- websites2- appsTuesday, May 28, 13
  11. 11. mobile1- websites2- appsTuesday, May 28, 13
  12. 12. with html5we can create...Tuesday, May 28, 13
  13. 13. we can create1- websitesTuesday, May 28, 13
  14. 14. Using the browserURLWeb Server1- websiteswe can createTuesday, May 28, 13
  15. 15. we can create2- webappsTuesday, May 28, 13
  16. 16. Browser to installFull-screenIcon on home screenWeb Server2- webappswe can createTuesday, May 28, 13
  17. 17. full screen webappshome screen webappswebapps are also known as()Tuesday, May 28, 13
  18. 18. we can create3- native webappsTuesday, May 28, 13
  19. 19. Package, compile, signIcon on home screenApp StoreNo web server3- native webappswe can createTuesday, May 28, 13
  20. 20. hybrid appspackaged webappsnative webapps are alsoknown as()Tuesday, May 28, 13
  21. 21. mobile1- websites2- appsTuesday, May 28, 13
  22. 22. a- nativeb- webappsc- native webappsmobile1- websites2- appsTuesday, May 28, 13
  23. 23. web platformsTuesday, May 28, 13
  24. 24. How many browsersdo you know ondesktop?web platformsTuesday, May 28, 13
  25. 25. 5web platformsTuesday, May 28, 13
  26. 26. How many browsersdo you know onmobile?web platformsTuesday, May 28, 13
  27. 27. ...web platformsTuesday, May 28, 13
  28. 28. Tuesday, May 28, 13
  29. 29. Android BrowserTuesday, May 28, 13
  30. 30. Android Browser 2.2Tuesday, May 28, 13
  31. 31. Android Browser 2.3Tuesday, May 28, 13
  32. 32. Android Browser 4.xTuesday, May 28, 13
  33. 33. Did I mention it is NOTGoogle Chrome?()Tuesday, May 28, 13
  34. 34. Google ChromeTuesday, May 28, 13
  35. 35. Google Chrome AndroidTuesday, May 28, 13
  36. 36. Google Chrome iOSTuesday, May 28, 13
  37. 37. Safari on iOSTuesday, May 28, 13
  38. 38. OperaTuesday, May 28, 13
  39. 39. Opera MobileTuesday, May 28, 13
  40. 40. Opera MiniTuesday, May 28, 13
  41. 41. Opera for AndroidTuesday, May 28, 13
  42. 42. FirefoxTuesday, May 28, 13
  43. 43. Firefox OSTuesday, May 28, 13
  44. 44. Internet ExplorerTuesday, May 28, 13
  45. 45. BlackBerry Browser 5-7.xTuesday, May 28, 13
  46. 46. BlackBerry Browser 5-7.xTuesday, May 28, 13
  47. 47. BlackBerry Browser PBTuesday, May 28, 13
  48. 48. BlackBerry Browser BB10Tuesday, May 28, 13
  49. 49. Nokia BrowserTuesday, May 28, 13
  50. 50. Nokia Browser SymbianTuesday, May 28, 13
  51. 51. Nokia Browser MeeGoTuesday, May 28, 13
  52. 52. Nokia Browser Series 40Tuesday, May 28, 13
  53. 53. SilkTuesday, May 28, 13
  54. 54. UC BrowserTuesday, May 28, 13
  55. 55. DolfinTuesday, May 28, 13
  56. 56. should I continue?()Tuesday, May 28, 13
  57. 57. Proxy browsersweb platformsTuesday, May 28, 13
  58. 58. And it’s not justbrowsers!web platformsTuesday, May 28, 13
  59. 59. Web Viewweb platformsTuesday, May 28, 13
  60. 60. Web Viewweb platformsTuesday, May 28, 13
  61. 61. Web Viewweb platformsTuesday, May 28, 13
  62. 62. Web Viewweb platformsTuesday, May 28, 13
  63. 63. Official (native)webapp platformsweb platformsTuesday, May 28, 13
  64. 64. Official (native)webapp platformsweb platformsTuesday, May 28, 13
  65. 65. unknown futureTuesday, May 28, 13
  66. 66. 2013: glassesTuesday, May 28, 13
  67. 67. Tuesday, May 28, 13
  68. 68. web platforms- too many- different versions- different scenarios- not just the browserTuesday, May 28, 13
  69. 69. “change is the only constant“HeraclitusTuesday, May 28, 13
  70. 70. 2- javascript on mobileTuesday, May 28, 13
  71. 71. Origins & securityjs on mobileTuesday, May 28, 13
  72. 72. WebsiteWebappNative webapporigins & securityTuesday, May 28, 13
  73. 73. Debugging(demo)js on mobileTuesday, May 28, 13
  74. 74. Power consumptionjs on mobileTuesday, May 28, 13
  75. 75. battery consumptionAmazon consumes 17% energyin a non used JSjQuery.js ~ 4 joules (0,02%)~5000 jQuery parsings per chargeWho Killed My Battery ~ mobilexweb.com/go/batteryTomorrow, 1.45pm @ FluentTuesday, May 28, 13
  76. 76. JavaScript lifetimejs on mobileTuesday, May 28, 13
  77. 77. classic web?js lifetimeTuesday, May 28, 13
  78. 78. mobile is quitedifferent(demo)js lifetimeTuesday, May 28, 13
  79. 79. lets start coding and testingTuesday, May 28, 13
  80. 80. page visibility apiTuesday, May 28, 13
  81. 81. awake detectionTuesday, May 28, 13
  82. 82. notification apiTuesday, May 28, 13
  83. 83. zombie windowTuesday, May 28, 13
  84. 84. backgroundTuesday, May 28, 13
  85. 85. backgroundTuesday, 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. backgroundTuesday, May 28, 13
  95. 95. DISCLAIMERTuesday, May 28, 13
  96. 96. only from iOS 6.1(5.0+ similar)Tuesday, May 28, 13
  97. 97. Progressiveenhancementjs on mobileTuesday, May 28, 13
  98. 98. js on mobile- security domains- debugging- battery consumption- background execution- progressive enhancementTuesday, May 28, 13
  99. 99. 3- UI on mobileTuesday, May 28, 13
  100. 100. UIViewport y pixelsTuesday, May 28, 13
  101. 101. UIFull screenTuesday, May 28, 13
  102. 102. full screenTuesday, May 28, 13
  103. 103. full screen4 solutionsTuesday, May 28, 13
  104. 104. full screenSolution #1Tuesday, 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 screenTuesday, May 28, 13
  113. 113. full screenSolution #2Tuesday, May 28, 13
  114. 114. full screenTuesday, 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 screenSolution #3future platformsTuesday, May 28, 13
  117. 117. full screenvar body = document.documentElement;if (body.requestFullScreen) {body.requestFullScreen();}Tuesday, May 28, 13
  118. 118. full screenvar body = document.documentElement;if (body.requestFullScreen) {body.requestFullScreen();} else if (body.webkitRequestFullScreen) {body.webkitRequestFullScreen();}Tuesday, May 28, 13
  119. 119. full screenvar 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 screenSolution #4...Tuesday, May 28, 13
  121. 121. full screenwindow.addEventListener("load",function() { window.scrollTo(0, 0); });// use with caredocument.addEventListener("touchmove",function(e) { e.preventDefault() });Tuesday, May 28, 13
  122. 122. UIimages for differentscreen densitiesTuesday, May 28, 13
  123. 123. screen densities<img src="photo.png" width="300">Tuesday, May 28, 13
  124. 124. screen densitiesTuesday, May 28, 13
  125. 125. 300 CSS pixels300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00device px px ratioscreen densitiesTuesday, May 28, 13
  126. 126. Solution #1Tuesday, May 28, 13
  127. 127. screen densitiesuse vector images<img src="photo.svg" width="300"><svg></svg>@font-face {}Tuesday, May 28, 13
  128. 128. screen densitiesTuesday, May 28, 13
  129. 129. screen densitiesTuesday, May 28, 13
  130. 130. Solution #2Tuesday, 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 #3Tuesday, 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 #4Tuesday, 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 queryon ranges@media (-webkit-device-pixel-ratio: 2)Tuesday, May 28, 13
  141. 141. always queryon ranges@media (-webkit-min-device-pixel-ratio: 1.7)Tuesday, May 28, 13
  142. 142. find the balance300x300 900x900Tuesday, May 28, 13
  143. 143. UIHigh resolutioncanvasTuesday, May 28, 13
  144. 144. hi-res canvas<canvas width="300" height="200"></canvas>300pxTuesday, May 28, 13
  145. 145. hi-res canvas300 CSS pixels300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00device px px ratioTuesday, May 28, 13
  146. 146. hi res canvas<canvas width="300" height="200"></canvas>300pxTuesday, May 28, 13
  147. 147. hi res canvasvar 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>300pxdevPxRatio = 2canvasPxRatio = 1Tuesday, May 28, 13
  149. 149. hi res canvas<canvas width="300" height="200"></canvas>300pxdevPxRatio >= 1canvasPxRatio = undefinedTuesday, May 28, 13
  150. 150. Solution #1hi res canvasTuesday, May 28, 13
  151. 151. hi res canvas<meta name="viewport" content="width=640"><canvas width="600" height="400"></canvas>600pxTuesday, May 28, 13
  152. 152. Solution #2hi res canvasTuesday, May 28, 13
  153. 153. hi res canvas<script>document.querySelector("canvas").getContext("2d").setScale(2, 2);</script>300pxTuesday, 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-resolutionTuesday, May 28, 13
  157. 157. execution &memoryTuesday, May 28, 13
  158. 158. wrapping upTuesday, May 28, 13
  159. 159. Tuesday, May 28, 13
  160. 160. “change is the only constant“HeraclitusTuesday, May 28, 13
  161. 161. you can reach a goodexperiencePictures)from)freedigitalphotos.net)thank you!firtman@gmail.com@firtfirt.mobi/pmwTuesday, May 28, 13

×