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

1. Max Firtman @firt
BREAKING LIMITS
ON JAVASCRIPT FOR
MOBILE HTML5
San Francisco, May 28th, 2013
Tuesday, May 28, 13

2. mobile+web developer
maximiliano
@firt
Tuesday, May 28, 13

3. Tuesday, May 28, 13

4. Tuesday, May 28, 13

5. we’ll talk about mobile
1- Mobile HTML5
2- JavaScript on Mobile
3- UI
4- Device
Tuesday, May 28, 13

6. material
Presentation
online tool (Chrome/FF)
smartphone/tablet?
Tuesday, May 28, 13

7. Tuesday, May 28, 13

8. 1- mobile html5
Tuesday, May 28, 13

9. mobile
1- websites
2- apps
Tuesday, May 28, 13

10. mobile
1- websites
2- apps
Tuesday, May 28, 13

11. mobile
1- websites
2- apps
Tuesday, May 28, 13

12. with html5
we can create...
Tuesday, May 28, 13

13. we can create
1- websites
Tuesday, May 28, 13

14. Using the browser
URL
Web Server
1- websites
we can create
Tuesday, May 28, 13

15. we can create
2- webapps
Tuesday, May 28, 13

16. Browser to install
Full-screen
Icon on home screen
Web Server
2- webapps
we can create
Tuesday, May 28, 13

17. full screen webapps
home screen webapps
webapps are also known as(
)
Tuesday, May 28, 13

18. we can create
3- native webapps
Tuesday, May 28, 13

19. Package, compile, sign
Icon on home screen
App Store
No web server
3- native webapps
we can create
Tuesday, May 28, 13

20. hybrid apps
packaged webapps
native webapps are also
known as
(
)
Tuesday, May 28, 13

21. mobile
1- websites
2- apps
Tuesday, May 28, 13

22. a- native
b- webapps
c- native webapps
mobile
1- websites
2- apps
Tuesday, May 28, 13

23. web platforms
Tuesday, May 28, 13

24. How many browsers
do you know on
desktop?
web platforms
Tuesday, May 28, 13

25. 5
web platforms
Tuesday, May 28, 13

26. How many browsers
do you know on
mobile?
web platforms
Tuesday, May 28, 13

27. ...
web platforms
Tuesday, May 28, 13

28. Tuesday, May 28, 13

29. Android Browser
Tuesday, May 28, 13

30. Android Browser 2.2
Tuesday, May 28, 13

31. Android Browser 2.3
Tuesday, May 28, 13

32. Android Browser 4.x
Tuesday, May 28, 13

33. Did I mention it is NOT
Google Chrome?
(
)
Tuesday, May 28, 13

34. Google Chrome
Tuesday, May 28, 13

35. Google Chrome Android
Tuesday, May 28, 13

36. Google Chrome iOS
Tuesday, May 28, 13

37. Safari on iOS
Tuesday, May 28, 13

38. Opera
Tuesday, May 28, 13

39. Opera Mobile
Tuesday, May 28, 13

40. Opera Mini
Tuesday, May 28, 13

41. Opera for Android
Tuesday, May 28, 13

42. Firefox
Tuesday, May 28, 13

43. Firefox OS
Tuesday, May 28, 13

44. Internet Explorer
Tuesday, May 28, 13

45. BlackBerry Browser 5-7.x
Tuesday, May 28, 13

46. BlackBerry Browser 5-7.x
Tuesday, May 28, 13

47. BlackBerry Browser PB
Tuesday, May 28, 13

48. BlackBerry Browser BB10
Tuesday, May 28, 13

49. Nokia Browser
Tuesday, May 28, 13

50. Nokia Browser Symbian
Tuesday, May 28, 13

51. Nokia Browser MeeGo
Tuesday, May 28, 13

52. Nokia Browser Series 40
Tuesday, May 28, 13

53. Silk
Tuesday, May 28, 13

54. UC Browser
Tuesday, May 28, 13

55. Dolfin
Tuesday, May 28, 13

56. should I continue?
(
)
Tuesday, May 28, 13

57. Proxy browsers
web platforms
Tuesday, May 28, 13

58. And it’s not just
browsers!
web platforms
Tuesday, May 28, 13

59. Web View
web platforms
Tuesday, May 28, 13

60. Web View
web platforms
Tuesday, May 28, 13

61. Web View
web platforms
Tuesday, May 28, 13

62. Web View
web platforms
Tuesday, May 28, 13

63. Official (native)
webapp platforms
web platforms
Tuesday, May 28, 13

64. Official (native)
webapp platforms
web platforms
Tuesday, May 28, 13

65. unknown future
Tuesday, May 28, 13

66. 2013: glasses
Tuesday, May 28, 13

67. Tuesday, May 28, 13

68. web platforms
- too many
- different versions
- different scenarios
- not just the browser
Tuesday, May 28, 13

69. “change is the only constant“
Heraclitus
Tuesday, May 28, 13

70. 2- javascript on mobile
Tuesday, May 28, 13

71. Origins & security
js on mobile
Tuesday, May 28, 13

72. Website
Webapp
Native webapp
origins & security
Tuesday, May 28, 13

73. Debugging
(demo)
js on mobile
Tuesday, May 28, 13

74. Power consumption
js on mobile
Tuesday, May 28, 13

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. JavaScript lifetime
js on mobile
Tuesday, May 28, 13

77. classic web?
js lifetime
Tuesday, May 28, 13

78. mobile is quite
different
(demo)
js lifetime
Tuesday, May 28, 13

79. let's start coding and testing
Tuesday, May 28, 13

80. page visibility api
Tuesday, May 28, 13

81. awake detection
Tuesday, May 28, 13

82. notification api
Tuesday, May 28, 13

83. zombie window
Tuesday, May 28, 13

84. background
Tuesday, May 28, 13

85. background
Tuesday, May 28, 13

86. Tuesday, May 28, 13

87. <blink>Welcome to my website!</blink>
Tuesday, May 28, 13

88. <bgsound src="welcome.wav">
Tuesday, May 28, 13

89. <font family="Arial" size="20">
Tuesday, May 28, 13

90. background
<meta http-equiv="refresh"
content="60">
Tuesday, May 28, 13

91. background
<meta http-equiv="refresh" content="2">
Tuesday, May 28, 13

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. Tuesday, May 28, 13

94. background
Tuesday, May 28, 13

95. DISCLAIMER
Tuesday, May 28, 13

96. only from iOS 6.1
(5.0+ similar)
Tuesday, May 28, 13

97. Progressive
enhancement
js on mobile
Tuesday, May 28, 13

98. js on mobile
- security domains
- debugging
- battery consumption
- background execution
- progressive enhancement
Tuesday, May 28, 13

99. 3- UI on mobile
Tuesday, May 28, 13

100. UI
Viewport y pixels
Tuesday, May 28, 13

101. UI
Full screen
Tuesday, May 28, 13

102. full screen
Tuesday, May 28, 13

103. full screen
4 solutions
Tuesday, May 28, 13

104. full screen
Solution #1
Tuesday, May 28, 13

105. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
Tuesday, May 28, 13

106. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
if (navigator.standalone) { }
Tuesday, May 28, 13

107. <meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=device-width">
Tuesday, May 28, 13

108. Tuesday, May 28, 13

109. Tuesday, May 28, 13

110. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=320.1">
Tuesday, May 28, 13

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. full screen
Tuesday, May 28, 13

113. full screen
Solution #2
Tuesday, May 28, 13

114. full screen
Tuesday, May 28, 13

115. full screen
@media (orientation: landscape) and (height: 214px),
(orientation: landscape) and (height: 181px)
{
}
Tuesday, May 28, 13

116. full screen
Solution #3
future platforms
Tuesday, May 28, 13

117. full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
}
Tuesday, May 28, 13

118. full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
}
Tuesday, May 28, 13

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. full screen
Solution #4
...
Tuesday, May 28, 13

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. UI
images for different
screen densities
Tuesday, May 28, 13

123. screen densities
<img src="photo.png" width="300">
Tuesday, May 28, 13

124. screen densities
Tuesday, May 28, 13

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. Solution #1
Tuesday, May 28, 13

127. screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}
Tuesday, May 28, 13

128. screen densities
Tuesday, May 28, 13

129. screen densities
Tuesday, May 28, 13

130. Solution #2
Tuesday, May 28, 13

131. screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) {
// change URL
}
Tuesday, May 28, 13

132. Solution #3
Tuesday, May 28, 13

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. Solution #4
Tuesday, May 28, 13

135. screen densities
<div id="photoContainer">
#photoContainer {
background-image: url('photo-lo.png');
width: 300px; height: 200px;
}
Tuesday, May 28, 13

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. 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. 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. 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. always query
on ranges
@media (-webkit-device-pixel-ratio: 2)
Tuesday, May 28, 13

141. always query
on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)
Tuesday, May 28, 13

142. find the balance
300x300 900x900
Tuesday, May 28, 13

143. UI
High resolution
canvas
Tuesday, May 28, 13

144. hi-res canvas
<canvas width="300" height="200">
</canvas>
300px
Tuesday, May 28, 13

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. hi res canvas
<canvas width="300" height="200">
</canvas>
300px
Tuesday, May 28, 13

147. hi res canvas
var devPxRatio = window.devicePixelRatio;
var canvasPxRatio =
document.querySelector("canvas")
.getContext("2d")
.webkitBackingStorePixelRatio;
Tuesday, May 28, 13

148. hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio = 2
canvasPxRatio = 1
Tuesday, May 28, 13

149. hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio >= 1
canvasPxRatio = undefined
Tuesday, May 28, 13

150. Solution #1
hi res canvas
Tuesday, May 28, 13

151. hi res canvas
<meta name="viewport" content="width=640">
<canvas width="600" height="400">
</canvas>
600px
Tuesday, May 28, 13

152. Solution #2
hi res canvas
Tuesday, May 28, 13

153. hi res canvas
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>
300px
Tuesday, May 28, 13

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. 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. multi-platform &
multi-resolution
Tuesday, May 28, 13

157. execution &
memory
Tuesday, May 28, 13

158. wrapping up
Tuesday, May 28, 13

159. Tuesday, May 28, 13

160. “change is the only constant“
Heraclitus
Tuesday, May 28, 13

161. you can reach a good
experience
Pictures)from)freedigitalphotos.net)
thank you!
firtman@gmail.com
@firt
firt.mobi/pmw
Tuesday, May 28, 13