Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1880 1900 1920 1940 1960 1980 2000 2020

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing Nesprint Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

…and the Economist app n HTML5 ebsite rapped in BlackBerry eborks for app orld distribution on the PlayBook.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

“The biggest mistake e made as a company as betting too much on HTML5 as opposed to native,” “It just asn’t ready”

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

HTML5 sites can be great But building a good HTML5 site is very hard.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

DOM operations •  re slo. But you kne that. •  Simple rules: – Batch your rites – Don't interleave reads and rites – Do as much in CSS as possible

Slide 17

Slide 17 text

var itr = 0; for (itr = 0; itr < 1000; itr++) { $('#list').append('
  • Item '+itr+'
    • '); } var str = ''; for (itr = 0; itr < 1000; itr++) { str += '
  • Item '+itr+'
    • '; } $('#list').html(str); 160ms 32ms Batching rites

    Slide 18

    Slide 18 text

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

    Slide 19

    Slide 19 text

    setTimeout •  Is unpredictable •  Test: fire a timer every 50ms

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

    setTimeout •  iPhone 4S, overshoot in ms:

    Slide 22

    Slide 22 text

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

    Slide 23

    Slide 23 text

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

    Slide 24

    Slide 24 text

    HTML5 application cache

    Slide 25

    Slide 25 text

    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

    Slide 26

    Slide 26 text

    NTIVE

    Slide 27

    Slide 27 text

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

    Slide 28

    Slide 28 text

    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.

    Slide 29

    Slide 29 text

    No content

    Slide 30

    Slide 30 text

    No content

    Slide 31

    Slide 31 text

    No content

    Slide 32

    Slide 32 text

    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   Shi

    Slide 33

    Slide 33 text

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

    Slide 34

    Slide 34 text

    Uh oh Debugging this might be hard.

    Slide 35

    Slide 35 text

    No content

    Slide 36

    Slide 36 text

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

    Slide 37

    Slide 37 text

    DOM Memory Cache server 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 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

    Slide 38

    Slide 38 text

    DOM caching
    ...
    ...
    ...

    Slide 39

    Slide 39 text

    Memory caching var pagecache = {}; function getPage(path) { if (pagecache[path]) return pagecache[path]; database.load(path, function(pagehtml) { pagecache[path] = pagehtml; }); }

    Slide 40

    Slide 40 text

    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

    Slide 41

    Slide 41 text

    Server side •  Varnish caching pages, data, images, audio – token auth – vary headers •  Memcache useful for batched PI calls – parallel reads using multiGet

    Slide 42

    Slide 42 text

    Tradeoffs Example  render  latency  (3G   network)   Effec7ve     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  

    Slide 43

    Slide 43 text

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

    Slide 44

    Slide 44 text

    One HTTP request! •  ggressive batching - collect requests asynchronously: •  Callbacks per action and per group api.add('getStory', {'path': '/1'}, callback1); api.add('getStory', {'path': '/1'}, callback2); api.send(callback3); api.add('healthcheck', params, callback4); api.send(callback5);

    Slide 45

    Slide 45 text

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

    Slide 46

    Slide 46 text

    Using accelerated animation •  Repositioning elements causes a relayout •  ccelerated animation = paint only •  First: turn on acceleration •  Then: apply a transition .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); }

    Slide 47

    Slide 47 text

    No content

    Slide 48

    Slide 48 text

    lternatives •  TouchScroll •  Scrollability •  iScroll •  Overthro (uses scrollTop)

    Slide 49

    Slide 49 text

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

    Slide 50

    Slide 50 text

    No content

    Slide 51

    Slide 51 text

    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)

    Slide 52

    Slide 52 text

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

    Slide 53

    Slide 53 text

    No content

    Slide 54

    Slide 54 text

    Spinners and loading bars Not all progress feedback is created equal

    Slide 55

    Slide 55 text

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

    Slide 56

    Slide 56 text

    Donloading! Oh noes! Trying RELLY hard! Bah. e give up.

    Slide 57

    Slide 57 text

    Progressive rendering Sho something! Quick!

    Slide 58

    Slide 58 text

    Still rendering sections... and the image... and the rest of the article!

    Slide 59

    Slide 59 text

    No content

    Slide 60

    Slide 60 text

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

    Slide 61

    Slide 61 text

    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