Breaking JavaScript Limits on Mobile HTML5

Max Firtman @firt

BREAKING LIMITS

ON JAVASCRIPT FOR

MOBILE HTML5

San Francisco, May 28th, 2013

Tuesday, May 28, 13

mobile+web developer

maximiliano @firt

Tuesday, May 28, 13

Tuesday, May 28, 13

Tuesday, May 28, 13

we’ll talk about mobile

1- Mobile HTML52- JavaScript on Mobile3- UI4- Device

Tuesday, May 28, 13

material

Presentationonline tool (Chrome/FF)

smartphone/tablet?

Tuesday, May 28, 13

Tuesday, May 28, 13

1- mobile html5

Tuesday, May 28, 13

mobile

1- websites2- apps

Tuesday, May 28, 13

mobile

1- websites2- apps

Tuesday, May 28, 13

mobile

1- websites2- apps

Tuesday, May 28, 13

with html5we can create...

Tuesday, May 28, 13

we can create

1- websites

Tuesday, May 28, 13

Using the browser

URL

Web Server

1- websiteswe can create

Tuesday, May 28, 13

we can create

2- webapps

Tuesday, May 28, 13

Browser to install

Full-screen

Icon on home screen

Web Server

2- webappswe can create

Tuesday, May 28, 13

full screen webapps

home screen webapps

webapps are also known as(

)

Tuesday, May 28, 13

we can create

3- native webapps

Tuesday, May 28, 13

Package, compile, sign

Icon on home screen

App Store

No web server

3- native webappswe can create

Tuesday, May 28, 13

hybrid apps

packaged webapps

native webapps are also known as

(

)

Tuesday, May 28, 13

mobile

1- websites2- apps

Tuesday, May 28, 13

a- nativeb- webappsc- native webapps

mobile

1- websites2- apps

Tuesday, May 28, 13

web platforms

Tuesday, May 28, 13

How many browsers do you know on desktop?

web platforms

Tuesday, May 28, 13

5web platforms

Tuesday, May 28, 13

How many browsers do you know on mobile?

web platforms

Tuesday, May 28, 13

...web platforms

Tuesday, May 28, 13

Tuesday, May 28, 13

Android Browser

Tuesday, May 28, 13

Android Browser 2.2

Tuesday, May 28, 13

Android Browser 2.3

Tuesday, May 28, 13

Android Browser 4.x

Tuesday, May 28, 13

Did I mention it is NOTGoogle Chrome?

(

)

Tuesday, May 28, 13

Google Chrome

Tuesday, May 28, 13

Google Chrome Android

Tuesday, May 28, 13

Google Chrome iOS

Tuesday, May 28, 13

Safari on iOS

Tuesday, May 28, 13

Opera

Tuesday, May 28, 13

Opera Mobile

Tuesday, May 28, 13

Opera Mini

Tuesday, May 28, 13

Opera for Android

Tuesday, May 28, 13

Firefox

Tuesday, May 28, 13

Firefox OS

Tuesday, May 28, 13

Internet Explorer

Tuesday, May 28, 13

BlackBerry Browser 5-7.x

Tuesday, May 28, 13

BlackBerry Browser 5-7.x

Tuesday, May 28, 13

BlackBerry Browser PB

Tuesday, May 28, 13

BlackBerry Browser BB10

Tuesday, May 28, 13

Nokia Browser

Tuesday, May 28, 13

Nokia Browser Symbian

Tuesday, May 28, 13

Nokia Browser MeeGo

Tuesday, May 28, 13

Nokia Browser Series 40

Tuesday, May 28, 13

Silk

Tuesday, May 28, 13

UC Browser

Tuesday, May 28, 13

Dol!n

Tuesday, May 28, 13

should I continue?

(

)

Tuesday, May 28, 13

Proxy browsers

web platforms

Tuesday, May 28, 13

And it’s not just browsers!

web platforms

Tuesday, May 28, 13

Web View

web platforms

Tuesday, May 28, 13

Web View

web platforms

Tuesday, May 28, 13

Web View

web platforms

Tuesday, May 28, 13

Web View

web platforms

Tuesday, May 28, 13

Official (native) webapp platforms

web platforms

Tuesday, May 28, 13

Official (native) webapp platforms

web platforms

Tuesday, May 28, 13

unknown future

Tuesday, May 28, 13

2013: glasses

Tuesday, May 28, 13

Tuesday, May 28, 13

web platforms

- too many- different versions- different scenarios- not just the browser

Tuesday, May 28, 13

“change is the only constant“Heraclitus

Tuesday, May 28, 13

2- javascript on mobile

Tuesday, May 28, 13

Origins & security

js on mobile

Tuesday, May 28, 13

WebsiteWebappNative webapp

origins & security

Tuesday, May 28, 13

Debugging(demo)

js on mobile

Tuesday, May 28, 13

Power consumption

js on mobile

Tuesday, May 28, 13

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 @ FluentTuesday, May 28, 13

JavaScript lifetime

js on mobile

Tuesday, May 28, 13

classic web?

js lifetime

Tuesday, May 28, 13

mobile is quite different(demo)

js lifetime

Tuesday, May 28, 13

let's start coding and testing

Tuesday, May 28, 13

page visibility api

Tuesday, May 28, 13

awake detection

Tuesday, May 28, 13

noti!cation api

Tuesday, May 28, 13

zombie window

Tuesday, May 28, 13

background

Tuesday, May 28, 13

background

Tuesday, May 28, 13

Tuesday, May 28, 13

<blink>Welcome to my website!</blink>

Tuesday, May 28, 13

<bgsound src="welcome.wav">

Tuesday, May 28, 13

<font family="Arial" size="20">

Tuesday, May 28, 13

background

<meta http-equiv="refresh" content="60">

Tuesday, May 28, 13

background<meta http-equiv="refresh" content="2">

Tuesday, May 28, 13

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

Tuesday, May 28, 13

background

Tuesday, May 28, 13

DISCLAIMER

Tuesday, May 28, 13

only from iOS 6.1(5.0+ similar)

Tuesday, May 28, 13

Progressive enhancement

js on mobile

Tuesday, May 28, 13

js on mobile

- security domains- debugging- battery consumption- background execution- progressive enhancement

Tuesday, May 28, 13

3- UI on mobile

Tuesday, May 28, 13

UI

Viewport y pixels

Tuesday, May 28, 13

UI

Full screen

Tuesday, May 28, 13

full screen

Tuesday, May 28, 13

full screen

4 solutionsTuesday, May 28, 13

full screen

Solution #1

Tuesday, May 28, 13

full screen

<meta name="apple-mobile-web-app-capable" content="yes">

Tuesday, May 28, 13

full screen

<meta name="apple-mobile-web-app-capable" content="yes">

if (navigator.standalone) { }

Tuesday, May 28, 13

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="viewport" content="width=device-width">

Tuesday, May 28, 13

Tuesday, May 28, 13

Tuesday, May 28, 13

full screen

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=320.1">

Tuesday, May 28, 13

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

full screen

Tuesday, May 28, 13

full screen

Solution #2

Tuesday, May 28, 13

full screen

Tuesday, May 28, 13

full screen

@media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) {}

Tuesday, May 28, 13

full screen

Solution #3

future platforms

Tuesday, May 28, 13

full screenvar body = document.documentElement;

if (body.requestFullScreen) { body.requestFullScreen();}

Tuesday, May 28, 13

full screenvar body = document.documentElement;

if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();}

Tuesday, May 28, 13

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

full screen

Solution #4

...

Tuesday, May 28, 13

full screen

window.addEventListener("load", function() { window.scrollTo(0, 0); });

// use with caredocument.addEventListener("touchmove", function(e) { e.preventDefault() });

Tuesday, May 28, 13

UI

images for different screen densities

Tuesday, May 28, 13

screen densities

<img src="photo.png" width="300">

Tuesday, May 28, 13

screen densities

Tuesday, May 28, 13

300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio

screen densities

Tuesday, May 28, 13

Solution #1

Tuesday, May 28, 13

screen densities

use vector images <img src="photo.svg" width="300">

<svg></svg>

@font-face {}

Tuesday, May 28, 13

screen densities

Tuesday, May 28, 13

screen densities

Tuesday, May 28, 13

Solution #2

Tuesday, May 28, 13

screen densities

<img src="photo.png" width="300">

if (window.devicePixelRatio > 1.5) { // change URL}

Tuesday, May 28, 13

Solution #3

Tuesday, May 28, 13

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

Solution #4

Tuesday, May 28, 13

screen densities

<div id="photoContainer">

#photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px;}

Tuesday, May 28, 13

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

screen densities

<div id="photoContainer">

@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {

}

Tuesday, May 28, 13

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

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

always query on ranges

@media (-webkit-device-pixel-ratio: 2)

Tuesday, May 28, 13

always query on ranges

@media (-webkit-min-device-pixel-ratio: 1.7)

Tuesday, May 28, 13

!nd the balance300x300 900x900

Tuesday, May 28, 13

UI

High resolutioncanvas

Tuesday, May 28, 13

hi-res canvas

<canvas width="300" height="200"></canvas>

300px

Tuesday, May 28, 13

hi-res canvas

300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio

Tuesday, May 28, 13

hi res canvas

<canvas width="300" height="200"> </canvas>

300px

Tuesday, May 28, 13

hi res canvas

var devPxRatio = window.devicePixelRatio;

var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;

Tuesday, May 28, 13

hi res canvas

<canvas width="300" height="200"> </canvas>

300px

devPxRatio = 2canvasPxRatio = 1

Tuesday, May 28, 13

hi res canvas

<canvas width="300" height="200"> </canvas>

300px

devPxRatio >= 1canvasPxRatio = undefined

Tuesday, May 28, 13

Solution #1

hi res canvas

Tuesday, May 28, 13

hi res canvas

<meta name="viewport" content="width=640">

<canvas width="600" height="400"></canvas>

600px

Tuesday, May 28, 13

Solution #2

hi res canvas

Tuesday, May 28, 13

hi res canvas

<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2);</script>

300px

Tuesday, May 28, 13

hi res canvas

<canvas width="600" height="400"></canvas>

300px

<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2);</script>

Tuesday, May 28, 13

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

multi-platform &multi-resolution

Tuesday, May 28, 13

execution &memory

Tuesday, May 28, 13

wrapping up

Tuesday, May 28, 13

Tuesday, May 28, 13

“change is the only constant“Heraclitus

Tuesday, May 28, 13

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

!rtman@gmail.com @!rt

!rt.mobi/pmw

Tuesday, May 28, 13