breaking html5 limits with mobile javascript
DESCRIPTION
My workshop on mobile HTML5 at FluentConf in San Francisco, May 29th, 2012TRANSCRIPT
Max Firtman @firt
BREAKING HTML5LIMITS ON MOBILE
JAVASCRIPT
May, 29th, 2012San Francisco, CA
Tuesday, May 29, 12
mobile+web developer
mobilexweb.com
who am I? @firt
Tuesday, May 29, 12
where?
Tuesday, May 29, 12
buenos aires ~ argentina
where?
Tuesday, May 29, 12
buenos aires ~ argentina
where?
patagonia soccermeat & winetango
Tuesday, May 29, 12
speaker
Tuesday, May 29, 12
Image from my house
books
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
the answer is no
Tuesday, May 29, 12
Tuesday, May 29, 12
.com
Tuesday, May 29, 12
Tuesday, May 29, 12
About this workshop
Tuesday, May 29, 12
About...
Introduction
Live examples & labs
Live coding, how?
Tuesday, May 29, 12
Logistics9am: start
~11.00am: break 30 min
~11.30am: second part
~12.15pm: end, Q&A
1pm: lunch :)
Tuesday, May 29, 12
Logistics
Please:
- Mobile phones in vibration mode (ironic, I know)- Participate and ask!
Tuesday, May 29, 12
Let’s start
Tuesday, May 29, 12
mobile...
Tuesday, May 29, 12
mobile
Tuesday, May 29, 12
mobile
‣ absolutely personal
Tuesday, May 29, 12
mobile
‣ absolutely personal‣ +5 billions
Tuesday, May 29, 12
mobile
‣ absolutely personal‣ +5 billions‣ make us focus
Tuesday, May 29, 12
mobile
‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...
Tuesday, May 29, 12
mobile
‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...‣ ... always...
Tuesday, May 29, 12
mobile
‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...‣ ... always...‣ ... and everywhere.
Tuesday, May 29, 12
Tuesday, May 29, 12
mobile web appears
Tuesday, May 29, 12
mobile is a minefield
Photo by World of Good (Flickr) Malvinas / Falklands Islands
Tuesday, May 29, 12
lots of questions
Photo by wayneandwax (Flickr) Tuesday, May 29, 12
lots of questions
we need to learn
Tuesday, May 29, 12
lots of platformsTuesday, May 29, 12
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
it’s different
Slower networks
Tuesday, May 29, 12
it’s different
Different browsing
Tuesday, May 29, 12
it’s different
Different behavior
Tuesday, May 29, 12
it’s different
Proxy-based browsersaka Where is my JavaScript?
Tuesday, May 29, 12
mobile browsers
Tuesday, May 29, 12
mobile browsers‣ too many
Tuesday, May 29, 12
mobile browsers‣ too many
‣ (some) too limited
Tuesday, May 29, 12
mobile browsers‣ too many
‣ (some) too limited
‣ (some) too innovative
Tuesday, May 29, 12
mobile browsers‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (most) without documentation
Tuesday, May 29, 12
mobile browsers‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (most) without documentation
‣ (most) without a name
Tuesday, May 29, 12
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
statistics
gs.statcounter.com - Apr 12Tuesday, May 29, 12
some are known
Tuesday, May 29, 12
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
some are unknown
Tuesday, May 29, 12
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
and with different versions...
Tuesday, May 29, 12
with different engines
Tuesday, May 29, 12
with different engines‣ Rendering engines‣ WebKit‣ Gecko‣ Presto‣ Trident
‣ Modern execution engines‣ V8‣ JagerMonkey‣ SquirrelFish (aka Nitro)‣ Carakan‣ Chakra
Tuesday, May 29, 12
and there’s more!
Tuesday, May 29, 12
web views
Tuesday, May 29, 12
web views
Tuesday, May 29, 12
web views
‣ on iOS, different execution engine
Tuesday, May 29, 12
web views
‣ on iOS, different execution engine‣ differences on HTML5 APIs
Tuesday, May 29, 12
apps with browsers inside
Tuesday, May 29, 12
pseudo-browsers
Tuesday, May 29, 12
pseudobrowsers
Tuesday, May 29, 12
pseudobrowsers
‣ mostly on iOS and Android
Tuesday, May 29, 12
pseudobrowsers
‣ mostly on iOS and Android‣ use the web view
Tuesday, May 29, 12
and we can also create native apps
-such as phonegap-
Tuesday, May 29, 12
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
nativevs
web
Tuesday, May 29, 12
native codevs
javascript
Tuesday, May 29, 12
browservs
installed apps& stores
Tuesday, May 29, 12
what is native?
Tuesday, May 29, 12
what is a webapp?
Tuesday, May 29, 12
no taxonomy
webapp
native
hybrid
html5 app
Tuesday, May 29, 12
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
standars?
Tuesday, May 29, 12
Photo by Ben Millett (Flickr) Tuesday, May 29, 12
Tuesday, May 29, 12
Are you sure?
Photo by Ricky David (Flickr) Tuesday, May 29, 12
What is ?
Tuesday, May 29, 12
html5
Tuesday, May 29, 12
html5
‣ w3c standards (all in draft)
Tuesday, May 29, 12
html5
‣ w3c standards (all in draft)‣ some are other w3c standards
Tuesday, May 29, 12
html5
‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards
Tuesday, May 29, 12
html5
‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards‣ w3c ex-standards
Tuesday, May 29, 12
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
html version 5?
Tuesday, May 29, 12
why mobile html5?
Tuesday, May 29, 12
typeof html5 != boolean
Tuesday, May 29, 12
some features safe
Tuesday, May 29, 12
some features only on few platforms
Tuesday, May 29, 12
some features experimental
Tuesday, May 29, 12
some features with prefixes
Tuesday, May 29, 12
and what aboutcapabilities today?
Tuesday, May 29, 12
Tuesday, May 29, 12
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
fragmentationinfo, docs & tools
why?
Tuesday, May 29, 12
second class developers
Tuesday, May 29, 12
‣ vague, non-existent or outdated documentation
second class developers
Tuesday, May 29, 12
‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties
second class developers
Tuesday, May 29, 12
‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties‣ lack of samples
second class developers
Tuesday, May 29, 12
‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties‣ lack of samples‣ no developer tools
second class developers
Tuesday, May 29, 12
f r a g m e n t a t i o n
Tuesday, May 29, 12
fragmentation
Tuesday, May 29, 12
fragmentation‣ screen sizes
Tuesday, May 29, 12
fragmentation‣ screen sizes‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
Tuesday, May 29, 12
fragmentation‣ screen sizes‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
‣ screen aspect ratio
Tuesday, May 29, 12
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
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
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
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
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
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
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
QQVGAQVGAWQVGAFWQVGALQVGAHVGAnHDWVGAFWVGAVGADVGAQHDWSVGAHD XGAWXGAQXGA
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
mobile javascripttesting
Tuesday, May 29, 12
emulators mobilexweb.com/emulators
Tuesday, May 29, 12
friends
lots of them
and with different devices
Tuesday, May 29, 12
virtual labsreal devices on real networks
www.perfectomobile.com www.deviceanywhere.com
Tuesday, May 29, 12
mobile javascriptdebugging
Tuesday, May 29, 12
debugging tools
Remote Web Inspector
• BlackBerry Smartphones 7• BlackBerry PlayBook• Google Chrome for Android 4• Opera Mobile
Tuesday, May 29, 12
debugging tools
adobe.com/go/shadow
Adobe Shadow
Tuesday, May 29, 12
debugging tools
iwebinspector.comTuesday, May 29, 12
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
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
Picture from Simon Howden freedigitalphotos.net!
mobile web
is slow
Tuesday, May 29, 12
Tuesday, May 29, 12
battery consumption
Who Killed My Battery ~ mobilexweb.com/go/battery
0 5
10 15 20 25 30 35 40 45 50
3G s
etup
baid
u
live.
com
gmai
l
wal
l st.
jour
nal
yout
ube
ebay
pica
sa
cnn
bbc
amaz
on
mic
roso
ft
enga
dget
natg
eo
nytim
es
yaho
o
aol
wea
ther
face
book
wor
dpre
ss
blog
ger
go.c
om
imdb
tum
blr
wik
iped
ia
appl
e
Ener
gy (J
oule
s)
Figure 6: Energy consumption of top websites
Web site Comment % Battery Traffic (bytes)life Upload Download
m.gmail.com inbox 0.41 9050 12048m.picasa.com user albums 0.43 8223 15475
m.aol.com portal home 0.59 11927 37085m.amazon.com product page 0.48 9523 26838
mobile.nytimes.com US home page 0.53 15386 66336touch.facebook.com facebook wall 0.65 30214 81040
mw.weather.com Stanford weather 0.62 38253 134531apple.com home page 1.41 86888 716835
m.imdb.com movie page 0.97 30764 127924m.microsoft.com home page 0.49 15240 47936
m.natgeo.com home page 0.53 13877 76742m.wikipedia.org article page 1.09 43699 308832
bbc.com mobile home page 0.46 20505 67004m.ebay.com product page 0.42 8041 17941
m.yahoo.com portal home 0.55 14397 45564m.youtube.com home page 0.55 5704 20329
baidu.com search page 0.39 2108 3951blogger.com home page 0.94 45382 427788m.cnn.com headlines page 0.46 9311 33844
m.engadget.com portal page 0.50 23334 80432m.go.com start page 0.96 27965 154278m.live.com personal page 0.40 7319 12576
wordpress.com home page 0.90 23318 205140tumblr.com home page 1.03 40543 889242m.wsj.com news page 0.41 4058 13653
Table 1: Web sites used in measuring energy consumption
e-commerce, social networking, email, blogging, portals, news,videos, product and financial sectors. The complete list of sites isshown in Table 1 along with the amount of traffic in bytes neededto request and download the page. A summary of the energy con-sumed by these sites is shown in Figure 6. Table 1 also shows theenergy needed to download and render the page as a fraction ofa fully charged battery (computed using the battery measurementsfrom Section 2.4).
Experiment details. To measure the total energy used to downloadand render the page we first measured the phone’s average energyconsumption when the browser is idle, which is 170 mJ/sec. Thenthe web pages to be measured are downloaded and saved in a re-mote server running Apache web server. We then used our BrowserProfiler application to measure the energy consumption from themoment the browser begins processing the navigation request un-til the page is fully rendered. Each measurement was repeated upto ten times. The difference between the idle energy measurementand the energy when processing the request is the (average) totalenergy used to download and render the page. This includes the en-ergy needed for 3G communication and for parsing and renderingthe page, but does not include the phone’s idle energy consumption.
The resulting numbers are shown in Figure 6. Note that the errorbars are so small that they are barely visible.
The left most column in Figure 6 shows the energy needed toset up a 3G connection and download a few bytes without any ad-ditional processing. Since all navigation requests must setup a 3Gconnection we treat this measurement as a baseline where the in-teresting differences between web sites are above this line.
Figure 6 is generated from the mobile versions of the website shown. The exceptions are , ,
and that do not have a mobile website. As a result, the amount of data needed to retrieve these sites issignificantly higher than for other web sites. For example, Apple’spage contains many images, including a 26kB welcome image thatis mostly wasted on the phone since the phone scales it down to fitits small screen.
Rendering energy. Next we measure the energy needed to parseand render the page without the energy consumed by the radio.That is, we determine how the complexity of the web page affectsthe energy needed to render it.
To measure the rendering energy we forced the browser to locallycache all web content and then measured how much energy wasused to render the content from local cache. We made sure that:
1. There was no network traffic while rendering from localcache, and
2. The cached data was identical to data fetched from the website, that is, the browser did not pre-process the data beforecaching it.
Consequently, this experiment measures the energy used to parseand render the page when all contents are already in memory. Theresulting numbers are shown in Figure 7. The percentages abovethe bars show the energy to render the page as a fraction of the totalenergy to download and render the page.
We only include measurements for 10 of the 25 sites in Figure 6.For the remaining 15 sites caching web content did not prevent net-work traffic. Javascript and CSS at these sites generated dynamicweb requests that could not be cached ahead of time. On the Applehome page, for example, the Javascript used for tracking user lo-cation generates an update forcing the phone to setup a 3G con-nection. Thus, despite caching, energy consumption for these 10sites was almost as high as when no caching took place. There isan important lesson here for mobile web site design — dynamicJavascript can greatly increase the power usage of a page. We dis-cuss this issue further in Section 7.
Analysis. Figure 7 shows that mobile sites like baidu, that aremostly text and very little Javascript and no large images, consume
WWW 2012 – Session: Mobile Web Performance April 16–20, 2012, Lyon, France
45
Tuesday, May 29, 12
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
Discrimination
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
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
some last advices
Tuesday, May 29, 12
Tuesday, May 29, 12
performance, performance
Tuesday, May 29, 12
good practices
Tuesday, May 29, 12
don’t be fanatic
photo by Kurt Christensen (flickr)
Tuesday, May 29, 12
be multiplatform
Tuesday, May 29, 12
be
futurefriend.ly
Tuesday, May 29, 12
you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
twitter: @firtwww.mobilexweb.com
Tomorrow10.30am
Book signing
Tuesday, May 29, 12