breaking javascript limits on mobile html5
DESCRIPTION
Companion presentation for the workshop at Fluent, May 28th 2013.TRANSCRIPT
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!
[email protected] @!rt
!rt.mobi/pmw
Tuesday, May 28, 13