breaking html5 limits with mobile javascript

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!

firt.mobifirtman@gmail.com

twitter: @firtwww.mobilexweb.com

Tomorrow10.30am

Book signing

Tuesday, May 29, 12