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 Ubiquity Bookmarking Sharing Nesprint Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing ‘Traditional’ eb Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing pps Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
setTimeout var itr = 0, int = 50; var t = setTimeout(tmr, int), start = new Date().getTime(); function tmr() { var end = new Date().getTime(); $('#results').append(''+(end-start-int)+''); itr++; if (itr > 1000) return; start = new Date().getTime(); t = setTimeout(tmr, int); }
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.
SCII packed into UTF-16 Text
S
i
m
p
l
e
Decimal
83
105
109
112
108
101
As
binary
01010011
01101001
01101101
01110000
01101100
01100101
ShiAs
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;
}
DOM Memory Cache server 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 Varnish / Squid etc HTTP delay, fast read from cache, infinite storage Memcache pplication overhead, added flexibility, smaller components, MySQL / PostgreSQL / Couch / Mongo etc Ultimate master repository
Memory caching • Consider a cache eviction policy – Least recently added (easy) – Least recently used (better, but is it orth it?) • Metadata? Cache objects not strings • Merge dynamic data into cache on read
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::
hYp://cdn3.worldcarfans.co/2008/2/medium/9080214.017.Mini1L.jpg,
hYp://www.netbasic.com/blog/2008/10/mini-‐car-‐parking-‐fail,
hYp://runningstopsigns.files.wordpress.com/ 2011/04/smart-‐car.jpg