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

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

June 19, 2013
Tweet

Transcript

  1. Escaping the uncanny valley Techniques for matching native app performance

    on the eb ith HTML5 ndre Betts (@triblondon) Director, FT Labs (@ftlabs)
  2. The uncanny valley Visual  similarity  to  humans   Emo0onal  

    response  to   a  robot   A"rac&on   Repulsion   None   Iden&cal  
  3. None
  4. None
  5. Nice  face  pic  

  6. 1880 1900 1920 1940 1960 1980 2000 2020 e’ve been

    doing this for a hile.
  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
  8. e need to care about supporting existing features as much

    as getting ne ones.
  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
  10. None
  11. The FT eb app… The FT eb app provides a

    touch optimised user experience ithout native code.
  12. The Economist n HTML5 ebsite rapped in native containers for

    BlackBerry, indos and Chome
  13. None
  14. Smooth transitions 16ms

  15. No pauses 100ms

  16. Matching expectations

  17. The basics Learn ho the broser optimises stuff: the easy

    ay is not alays the fastest ay.
  18. Selectors document.getElementById('a').getElementsByClassName('b')[0]; document.querySelector('#a').querySelector('.b'); document.querySelector('#a .b'); 12x

  19. Flexbox

  20. No Flexbox

  21. Hover effects •  Disable hover effects on non-hoverable devices and

    during scrolls .hoverable a:hover { ... } <body class='hoverable'> ... </body>
  22. Frame rates ctivate meter in chrome://flags No border-radius Border-radius

  23. Test in production!

  24. Storing data HTML5 can store data on device too, it's

    just… ell, it's complicated.
  25.  happy family of technologies •  ebSQL •  IndexedDB • 

    localStorage (and sessionStorage) •  Cookies •  HTML5 pplication Cache •  FilePI
  26. ppCache Teen localStorage Dad IndexedDB Mum Cookies Grandad Files PI

    Imaginary friend
  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) h@p://jsperf.com/indexeddb-­‐vs-­‐localstorage/13  
  28. HTML5 application cache •  Sucks.

  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)
  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”
  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
  32. NTIVE

  33. Storage optimisation hile e are limited by tiny quotas, e

    need to learn to live ith less.
  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.
  35. None
  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   卩   浰   汥  
  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;   }  
  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;   }  
  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;   }  
  40. Uh oh Debugging this might be hard.

  41. Cache layers Every type of cache offers different trade offs.

    So use them all.
  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
  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  
  44. Netork HTTP requests are painful, so do feer of them

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

  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:  h@p://jsfiddle.net/sktbb/6/   Mean  round  trip  0me  from  by  connec0on  type  and  request  interval  (50  requests)  
  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);
  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
  49. Hardare acceleration The key to smooth animation of complex layouts

  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); }
  51. None
  52. None
  53. None
  54. Click delay Native apps react instantly. Use smart touch to

    click conversion to keep up
  55. None
  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)
  57. hen you can't make it any faster… make it seem

    faster.
  58. None
  59. Spinners and loading bars Not all progress feedback is created

    equal
  60. Progress feedback psychology •  Providing feedback makes things faster • 

    Overestimating the time remaining makes it go quicker •  Progress feedback that starts earlier finishes sooner
  61. Donloading! Still trying, but something rong Bah. e give up.

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

     
  63. Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this

    stuff? Join in. jobs@labs.ft.com 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.files.wordpress.com/ 2011/04/smart-­‐car.jpg    
  64. Handpicked attendees dvanced topics Unique format Engaging and collaborative Presented

    by the FT and Google Register to participate at edgeconf.com