Escaping the uncanny valley (Velocity 2013)

Escaping the uncanny valley Techniques for matching native app performance
on the eb ith HTML5 ndre Betts (@triblondon) Director, FT Labs (@ftlabs)

The uncanny valley Visual similarity to humans Emo0onal
response to a robot A"rac&on Repulsion None Iden&cal

Nice face pic

1880 1900 1920 1940 1960 1980 2000 2020 e’ve been
doing this for a hile.

orks oﬄine Portable Long battery life Can be read in
bright sunlight Cheap Ubiquitous Bookmarkable Sharable Nesprint Fast start up Supports clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking

e need to care about supporting existing features as much
as getting ne ones.

Lose the constraints •  Tablet •  Phone •  Desktop • 
Laptop •  TV •  Games console •  In car screen •  In ﬂight screen •  Billboard •  Kiosk •  e-ink reader •  Hot air balloon

The FT eb app… The FT eb app provides a
touch optimised user experience ithout native code.

The Economist n HTML5 ebsite rapped in native containers for
BlackBerry, indos and Chome

Smooth transitions 16ms

No pauses 100ms

Matching expectations

The basics Learn ho the broser optimises stuﬀ: the easy
ay is not alays the fastest ay.

Selectors document.getElementById('a').getElementsByClassName('b')[0]; document.querySelector('#a').querySelector('.b'); document.querySelector('#a .b'); 12x

Flexbox

No Flexbox

Hover eﬀects •  Disable hover eﬀects on non-hoverable devices and
during scrolls .hoverable a:hover { ... } <body class='hoverable'> ... </body>

Frame rates ctivate meter in chrome://ﬂags No border-radius Border-radius

Test in production!

Storing data HTML5 can store data on device too, it's
just… ell, it's complicated.

 happy family of technologies •  ebSQL •  IndexedDB • 
localStorage (and sessionStorage) •  Cookies •  HTML5 pplication Cache •  FilePI

ppCache Teen localStorage Dad IndexedDB Mum Cookies Grandad Files PI
Imaginary friend

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) h@p://jsperf.com/indexeddb-‐vs-‐localstorage/13

HTML5 application cache •  Sucks.

HTML5 application cache •  lays caches parent page •  lays
serves from cache, even hen connected •  Cannot add or remove anything ithout repopulating entire cache •  Treats cache-control headers diﬀerently in diﬀerent brosers •  Fallbacks block on default broser netork timeout (probably a minute or so)

•  Redeﬁne appcache syntax •  Still mostly declarative •  Sub-manifests:
multiple atomic groups •  JS PI to bring transparency •  eb orker option for advanced usage •  Pattern matching fallbacks •  Remove the ‘magic’, like auto- adding masters •  Ditch appcache, deﬁne ne PI •  lmost entirely imperative •  Individual atomic cache groups accessed via PIs •  Install a controller to intercept and route requests •  “Bring your on unicorn”

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

NTIVE

Storage optimisation hile e are limited by tiny quotas, e
need to learn to live ith less.

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; }

Uh oh Debugging this might be hard.

Cache layers Every type of cache offers different trade offs.
So use them all.

DOM Memory Cache servers Broser 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 sloer but async kamai / Edgecast / Cloudfront etc Fast HTTP delay, fast read from cache, larger storage Memcache pplication overhead, added ﬂexibility, smaller components, MySQL / PostgreSQL / Couch / Mongo etc Ultimate master repository Edge cache (CDN) Varnish / Squid etc Longer HTTP delay, fast read from cache, inﬁnite storage

Tradeoffs Example render latency (3G network) Effec&ve
capacity DOM 2ms (paint) A few hundred nodes JavaScript memory 10ms (layout + paint) 5MB Browser storage 70ms (read + layout + paint) 50MB Network cache 300ms (network + layout + paint) Infinite Memcache/DB 400ms (backend + network + layout + paint) Infinite

Netork HTTP requests are painful, so do feer of them
and make them count.

Source: h@p://assets.en.oreilly.com/1/event/60/Understanding%20Mobile%20Web%20Browser%20Performance%20Presenta0on.pdf

Latency by radio state Chrome, MacOS, Velocity venue
wiﬁ Safari, iOS, T-‐Mobile EDGE 1s intervals 180ms 850ms 10s intervals 180ms 1,500ms 20s intervals 180ms 2,100ms Try it: h@p://jsﬁddle.net/sktbb/6/ Mean round trip 0me from by connec0on type and request interval (50 requests)

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: – Oﬄine persistence of queued requests

Hardare acceleration The key to smooth animation of complex layouts

Using accelerated animation •  Repositioning elements causes a relayout • 
ccelerated animation = paint only •  First: turn on acceleration •  Then: apply a transition or animation .thing { -webkit-transform: translateZ(0); } .thing { -webkit-transition: all 3s ease-out; } .thing.left { -webkit-transform: translate3D(0px,0,0); } .thing.right { -webkit-transform: translate3D(600px,0,0); }

Click delay Native apps react instantly. Use smart touch to
click conversion to keep up

Fastclick •  github.com/ftlabs/fastclick •  Removes 300ms delay on touch • 
Programmatic clicks aren't quite the same - e handle it here e can (eg apply focus)

hen you can't make it any faster… make it seem
faster.

Spinners and loading bars Not all progress feedback is created
equal

Progress feedback psychology •  Providing feedback makes things faster • 
Overestimating the time remaining makes it go quicker •  Progress feedback that starts earlier ﬁnishes sooner

Donloading! Still trying, but something rong Bah. e give up.

“Don’t build native apps, build eb apps” -‐ Tim Berners-‐Lee

Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this
stuﬀ? Join in. [email protected] Image credits:: h@p://cdn3.worldcarfans.co/2008/2/medium/9080214.017.Mini1L.jpg, h@p://www.netbasic.com/blog/2008/10/mini-‐car-‐parking-‐fail, h@p://runningstopsigns.ﬁles.wordpress.com/ 2011/04/smart-‐car.jpg

Handpicked attendees dvanced topics Unique format Engaging and collaborative Presented
by the FT and Google Register to participate at edgeconf.com

Escaping the uncanny valley (Velocity 2013)

Escaping the uncanny valley (Velocity 2013)

More Decks by Andrew Betts

Other Decks in Technology

Featured

Transcript