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.

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. where?
Tuesday, May 29, 12

4. where?
buenos aires ~ argentina
Tuesday, May 29, 12

5. where?
buenos aires ~ argentina
patagonia
soccer
meat & wine
tango
Tuesday, May 29, 12

6. speaker
Tuesday, May 29, 12

7. books
Image from my house
Tuesday, May 29, 12

8. Tuesday, May 29, 12

9. Tuesday, May 29, 12

10. the answer is no
Tuesday, May 29, 12

11. Tuesday, May 29, 12

12. .com
Tuesday, May 29, 12

13. Tuesday, May 29, 12

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, May 29, 12

19. mobile...
Tuesday, May 29, 12

20. mobile
Tuesday, May 29, 12

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. Tuesday, May 29, 12

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 to learn
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. mobile browsers
Tuesday, May 29, 12

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, May 29, 12

55. web views
Tuesday, May 29, 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. pseudo-browsers
Tuesday, May 29, 12

60. pseudobrowsers
Tuesday, May 29, 12

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 can also
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 a webapp?
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. standars?
Tuesday, May 29, 12

73. Photo by Ben Millett (Flickr)
Tuesday, May 29, 12

74. Tuesday, May 29, 12

75. Are you
sure?
Photo by Ricky David (Flickr)
Tuesday, May 29, 12

76. What is ?
Tuesday, May 29, 12

77. html5
Tuesday, May 29, 12

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 only on
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. Tuesday, May 29, 12

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. fragmentation
Tuesday, May 29, 12

100. fragmentation
Tuesday, May 29, 12

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. Tuesday, May 29, 12

112. Tuesday, May 29, 12

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. Tuesday, May 29, 12

123. Tuesday, May 29, 12

124. Tuesday, May 29, 12

125. Tuesday, May 29, 12

126. mobile
web
is slow
Picture from Simon Howden freedigitalphotos.net!
Tuesday, May 29, 12

127. Tuesday, May 29, 12

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. Discrimination
Tuesday, May 29, 12

131. Tuesday, May 29, 12

132. Tuesday, May 29, 12

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. Tuesday, May 29, 12

136. performance,
performance
Tuesday, May 29, 12

137. good practices
Tuesday, May 29, 12

138. don’t be fanatic
photo by Kurt Christensen
(flickr)
Tuesday, May 29, 12

139. be multiplatform
Tuesday, May 29, 12

140. be
futurefriend.ly
Tuesday, May 29, 12

141. you can reach a 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