Single Page Applications done right

Single Page Applications done right

BrazilJS 2014

3e52153b29fd5540b549089f1f925eca?s=128

Eduardo Lundgren

August 21, 2014
Tweet

Transcript

  1. 5.
  2. 6.
  3. 7.
  4. 10.

    User Perspective 10 milliseconds can make a really good game

    into a really bad game. 10 milliseconds on an e-commerce can reduce sales. Interval User perspective 0 - 100 milliseconds Instant 100 - 300 milliseconds Perceptible delay 300 - 1000 milliseconds Task Focus, Perceptible delay 1+ second Mental context switch 10+ seconds I'll come back later
  5. 11.

    10KB of HTML 3KB of CSS 500Bytes of GIFs Hacker

    News, technically, it's fast First render in <500ms
  6. 12.

    The page loads really fast, but I can't read anything

    Needs to zoom and scroll The perceived performance is actually 5+ seconds What is the problem?
  7. 20.

    Actual performance GPU Acceleration RAM Usage Parsers & Lexers Layers

    & Render Trees Multi-Core Optimization Energy constrains
  8. 21.

    Transport When you ship bytes, needs to execute those bytes.

    Bytes Parse What happens after shipping those bytes? Selector Matching Style Calculation Layout & Painting JavaScript GC Performance Latency Bandwidth Protocols
  9. 28.

    “Performance is not just milliseconds and bytes. It's also how

    milliseconds and bytes translate to how the user perceives the app” Ilya Grigorik Developer Advocate, Google
  10. 30.
  11. 31.

    “SPA is a web site that fits on a single

    web page with the goal of providing a more fluid user experience”
  12. 33.
  13. 34.
  14. 39.

    var xhr = new XMLHttpRequest(); xhr.onload = successFn; xhr.onerror =

    errorFn; xhr.open('GET', '/foo.html'); xhr.send(); Ajax
  15. 41.

    Content is empty Link is clicked
 Request content using XHR

    Ajax http://trackingjs.com Loading... Some fancy loader appears 1 2 3
  16. 44.

    var xhr = new XMLHttpRequest(); xhr.onload = successFn; xhr.onerror =

    errorFn; xhr.open('GET', '/foo.html'); xhr.send(); location.hash = '#foo'; Hijax
  17. 46.

    Content is empty Link is clicked
 Request content using XHR

    Hijax http://trackingjs.com#docs Loading... Some fancy loader appears URL updates with hash bang # 1 4 2 3
  18. 54.

    History API history.pushState(null, '', 'page02.html') page01.html page02.html page03.html history.replaceState({ key:

    123 }, '', 'page02.html') Navigate between pages without page refresh history.state: { key: 123 }
  19. 55.

    History API history.pushState(null, '', 'page02.html') page01.html page02.html page03.html history.replaceState({ key:

    123 }, '', 'page02.html') Navigate between pages without page refresh "onpopstate" ‏ history.back(); history.state: null
  20. 56.
  21. 57.
  22. 59.

    By using History API you can manipulate the browser history,

    so you can use browser’s back & forward buttons
  23. 61.

    Once you load a certain surface this content is cached

    in memory and is retrieved later on without any additional request
  24. 62.
  25. 67.
  26. 70.
  27. 71.

    State retention window.history.state = {}; Memory State object size limits

    (640KB)
 Serialized objects Memory management to avoid leaks
  28. 73.
  29. 76.
  30. 78.
  31. 81.
  32. 85.
  33. 86.
  34. 87.
  35. 88.
  36. 89.
  37. 90.
  38. 91.
  39. 94.
  40. 95.
  41. 96.
  42. 98.

    Lifecycle subsequent navigations are handled without a full page load

    Initial Page Loaded additional content is requested via Ajaxy techniques Ajax Request Update the URL Render Page Flip Screen Finalize Request pages are bookmarkable and sharable once content is ready, flip the screen render relevant parts of the page URL Routing makes it easy to wire up route handlers for different application states UI Feedback
  43. 102.

    <link rel="senna-route" href="regex:.*\.html" type="senna.Screen"> ! <body data-senna> <div id="header" data-senna-surface></div>

    <div id="body" data-senna-surface></div> <div id="footer" data-senna-surface></div> </body> Data attributes
  44. 104.
  45. 105.

    Less Bandwidth Data transfered (KB) 0 350 700 1050 1400

    Page 1 Page 2 Page 3 Page 4 Refresh SPA
  46. 107.

    Low Cost USD USD 20 40 USD 40 USD 100

    $30 USD 50 Monthly broadband subscription Oxford Internet Institute
  47. 108.
  48. 110.

    Main features SEO, Bookmarkability Hybrid rendering State retention Timeout detection

    Pending navigation UI Feedback History navigation Cacheable screens Resources management
  49. 111.
  50. 113.