Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Escaping the uncanny valley (Velocity 2013)

Escaping the uncanny valley (Velocity 2013)

Techniques for matching native app performance on the web with HTML5 (updated for Velocity 2013, Santa Clara

Andrew Betts

June 19, 2013
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. Nice  face  pic  

    View Slide

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

    View Slide

  7. orks offline
    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

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

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

    View Slide

  13. View Slide

  14. Smooth transitions
    16ms

    View Slide

  15. No pauses
    100ms

    View Slide

  16. Matching expectations

    View Slide

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

    View Slide

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

    View Slide

  19. Flexbox

    View Slide

  20. No Flexbox

    View Slide

  21. Hover effects
    •  Disable hover effects on non-hoverable
    devices and during scrolls
    .hoverable a:hover { ... }

    ...

    View Slide

  22. Frame rates
    ctivate meter in
    chrome://flags
    No border-radius
    Border-radius

    View Slide

  23. Test in production!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 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  

    View Slide

  28. HTML5 application cache
    •  Sucks.

    View Slide

  29. 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 differently in
    different brosers
    •  Fallbacks block on default broser netork
    timeout (probably a minute or so)

    View Slide

  30. •  Redefine 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, define 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”

    View Slide

  31. 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

    View Slide

  32. NTIVE

    View Slide

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

    View Slide

  34. 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.

    View Slide

  35. View Slide

  36. 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   卩   浰   汥  

    View Slide

  37. 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;  
    }  

    View Slide

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

    View Slide

  39. function  decompress_v14(data)  {  
     var  i,  l,  n1,  n2,  n3,  n4,  n5,  n6,  n7,  n8,  n9,  n10,  n11,  n12,  n13,  n14,  n15,  n16,  out  =  '',  
    getChar  =  String.fromCharCode;  
     
     for  (i  =  0,  l  =  data.length  >>  4  <<  4;  i  <  l;  i++)  {  
       n1  =  data.charCodeAt(i);  n2  =  data.charCodeAt(++i);  n3  =  data.charCodeAt(++i);  
       n4  =  data.charCodeAt(++i);  n5  =  data.charCodeAt(++i);  n6  =  data.charCodeAt(++i);  
       n7  =  data.charCodeAt(++i);  n8  =  data.charCodeAt(++i);  n9  =  data.charCodeAt(++i);  
       n10  =  data.charCodeAt(++i);  n11  =  data.charCodeAt(++i);  n12  =  data.charCodeAt(++i);  
       n13  =  data.charCodeAt(++i);  n14  =  data.charCodeAt(++i);  n15  =  data.charCodeAt(++i);  
       n16  =  data.charCodeAt(++i);  
       out  +=  getChar(  
         n1  >>  8,  n1  &  255,  n2  >>  8,  n2  &  255,  n3  >>  8,  n3  &  255,  n4  >>  8,  n4  &  255,  
         n5  >>  8,  n5  &  255,  n6  >>  8,  n6  &  255,  n7  >>  8,  n7  &  255,  n8  >>  8,  n8  &  255,  
         n9  >>  8,  n9  &  255,  n10  >>  8,  n10  &  255,  n11  >>  8,  n11  &  255,  n12  >>  8,  n12  &  255,  
         n13  >>  8,  n13  &  255,  n14  >>  8,  n14  &  255,  n15  >>  8,  n15  &  255,  n16  >>  8,  n16  &  255  
       );  
     }  
     for  (l  =  data.length;  i  <  l;  i++)  {  
       n1  =  data.charCodeAt(i);  
       out  +=  getChar(n1  >>  8)  +  getChar(n1  &  255);  
     }  
     
     return  out;  
    }  

    View Slide

  40. Uh oh
    Debugging this might be hard.

    View Slide

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

    View Slide

  42. 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 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

    View Slide

  43. 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  

    View Slide

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

    View Slide

  45. Source:  [email protected]://assets.en.oreilly.com/1/event/60/Understanding%20Mobile%20Web%20Browser%20Performance%20Presenta0on.pdf  

    View Slide

  46. Latency by radio state
    Chrome,  MacOS,    
    Velocity  venue  wifi  
    Safari,  iOS,    
    T-­‐Mobile  EDGE  
    1s  intervals   180ms   850ms  
    10s  intervals   180ms  
     
    1,500ms  
    20s  intervals   180ms  
     
    2,100ms  
    Try  it:  [email protected]://jsfiddle.net/sktbb/6/  
    Mean  round  trip  0me  from  by  connec0on  type  and  request  interval  (50  requests)  

    View Slide

  47. 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);

    View Slide

  48. 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

    View Slide

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

    View Slide

  50. 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); }

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

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

    View Slide

  55. View Slide

  56. 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)

    View Slide

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

    View Slide

  58. View Slide

  59. Spinners and loading bars
    Not all progress feedback is created equal

    View Slide

  60. Progress feedback psychology
    •  Providing feedback makes things faster
    •  Overestimating the time remaining makes it
    go quicker
    •  Progress feedback that starts earlier finishes
    sooner

    View Slide

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

    View Slide

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

    View Slide

  63. 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  
     

    View Slide

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

    View Slide