Escaping the uncanny valley Techniques for matching native app performance on the eb ith HTML5 ndre Betts (@triblondon) Director, FT Labs (@ftlabs)
orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquitous Bookmarkable Sharable Nesprint Fast start up Supports clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
Lose the constraints • Tablet • Phone • Desktop • Laptop • TV • Games console • In car screen • In flight screen • Billboard • Kiosk • e-ink reader • Hot air balloon
localStorage vs indexedDB 242
296
175
259
6873
29897
1 10 100 1000 10000 100000 IDB Large IDB Small ebSQL Large ebSQL Small localStor Large localStor Small Operations per second (more is better) [email protected]://jsperf.com/indexeddb-‐vs-‐localstorage/13
Current best practice • Use appcache sparingly – Fonts, sprites, one master, and a fallback entry – CSS, HTML, JS in localStorage – Other approaches: see Jake rchibald • localStorage for speed • Database for capacity
Text encoding ‘compression’ • JavaScript internally uses UTF-16 for text encoding • Great idea for processing: fast string operations, full support for Unicode BMP • Terrible idea for storage of English text or base-64 encoded images.
Squeeze your bits Text
S
i
m
p
l
e
Decimal
83
105
109
112
108
101
As
binary
01010011
01101001
01101101
01110000
01101100
01100101
ShiOed
01010011
01101001
01101101
01110000
01101100
01100101
As
hex
53
69
6D
70
6C
65
UTF-‐16
卩
浰
汥
SCII packed into UTF-16 function
compress(s)
{
var
i,
l,
out='';
if
(s.length
%
2
!==
0)
s
+=
'
';
for
(i
=
0,
l
=
s.length;
i
<
l;
i+=2)
{
out
+=
String.fromCharCode((s.charCodeAt(i)<<8)
+
s.charCodeAt(i+1));
}
return
out;
}
Decompressing function
decompress_v1(data)
{
var
i,
l,
n,
m,
out
=
'';
for
(i
=
0,
l
=
data.length;
i
<
l;
i++)
{
n
=
data.charCodeAt(i);
m
=
Math.floor(n
/
256);
out
+=
String.fromCharCode(m)
+
String.fromCharCode(n
%
256);
}
return
out;
}
DOM Memory Cache servers Broser storage pplication caching Database Hide/sho elements already in DOM Instant – paint only. High memory footprint JavaScript variables Very quick – DOM rite + paint. ebSQL/IndexedDB or localStorage I/O on localStorage very fast. DB much sloer but async kamai / Edgecast / Cloudfront etc Fast HTTP delay, fast read from cache, larger storage Memcache pplication overhead, added flexibility, smaller components, MySQL / PostgreSQL / Couch / Mongo etc Ultimate master repository Edge cache (CDN) Varnish / Squid etc Longer HTTP delay, fast read from cache, infinite storage
Batch the suckers • ggressive batching - collect requests asynchronously: • Callbacks per action and per group • Process queues in the background api.add('getStory', {'path': '/1'}, callback1); api.add('getStory', {'path': '/1'}, callback2); api.send(callback3); api.add('healthcheck', params, callback4); api.send(callback5);
HTTP 2.0 / SPDY • Makes this unnecessary – in theory • lso see 3C Beacon PI for analytics • Still use cases for delayed requests: – Offline persistence of queued requests
Progress feedback psychology • Providing feedback makes things faster • Overestimating the time remaining makes it go quicker • Progress feedback that starts earlier finishes sooner
Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this stuff? Join in. [email protected] Image
credits::
[email protected]://cdn3.worldcarfans.co/2008/2/medium/9080214.017.Mini1L.jpg,
[email protected]://www.netbasic.com/blog/2008/10/mini-‐car-‐parking-‐fail,
[email protected]://runningstopsigns.files.wordpress.com/ 2011/04/smart-‐car.jpg
triblondon
uzulla
takashiinui
sbtechnight
asazutaiga
doradora09
line_developers
fixstars
tarao
tsubakimoto_s
you5805
ikuyamada
bryan
zenorocha
sugarenia
nonsquared
jensimmons
tanoku
phodgson
wjessup
panda_program
carmenintech
ammeep
deanohume