$30 off During Our Annual Pro Sale. View Details »

Single Page Applications done right

Single Page Applications done right

BrazilJS 2014

Eduardo Lundgren

August 21, 2014
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. Single Page
    Applications
    done right
    @eduardolundgren

    View Slide

  2. browser diet

    View Slide

  3. Perceived performance

    View Slide

  4. Persistence of vision

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. 24 frames
    per second
    41 milliseconds
    per frame
    Real time

    View Slide

  9. 24 fps
    60 fps

    View Slide

  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

    View Slide

  11. 10KB of HTML
    3KB of CSS
    500Bytes of GIFs
    Hacker News,
    technically, it's fast
    First render in <500ms

    View Slide

  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?

    View Slide

  13. Page load time

    View Slide

  14. Task completion

    View Slide

  15. What really matters?
    Visits, engagement, conversions.

    View Slide

  16. What is performance?

    View Slide

  17. “Performance means many
    different things to many
    different people”

    View Slide

  18. Actual performance

    View Slide

  19. Actual
    performance
    GPU Acceleration
    RAM Usage
    Parsers & Lexers
    Layers & Render Trees
    Multi-Core Optimization

    View Slide

  20. Actual
    performance
    GPU Acceleration
    RAM Usage
    Parsers & Lexers
    Layers & Render Trees
    Multi-Core Optimization
    Energy constrains

    View Slide

  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

    View Slide

  22. Is there such thing
    as fast enough?

    View Slide

  23. You made it 2x faster,
    is that enough?

    View Slide

  24. When we talk about Perceived
    Performance it is a factor of
    multiple things.

    View Slide

  25. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )

    View Slide

  26. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )
    Computer
    power

    View Slide

  27. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )
    It's the glue!

    View Slide

  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

    View Slide

  29. Single Page Application

    View Slide

  30. View Slide

  31. “SPA is a web site that fits on a
    single web page with the goal of
    providing a more fluid user
    experience”

    View Slide

  32. SPAs were pioneered in the
    mid-2000s by web apps like
    Gmail and Google Maps.

    View Slide

  33. View Slide

  34. View Slide

  35. These days the approach is
    widely employed by others

    View Slide

  36. How to build a

    Single Page Application?

    View Slide


  37. http://trackingjs.com

    View Slide

  38. Ajax
    http://trackingjs.com

    View Slide

  39. var xhr = new XMLHttpRequest();
    xhr.onload = successFn;
    xhr.onerror = errorFn;
    xhr.open('GET', '/foo.html');
    xhr.send();
    Ajax

    View Slide

  40. Define surfaces to
    update on navigate
    JavaScript listens for links
    Ajax
    http://trackingjs.com
    1
    2

    View Slide

  41. Content is empty
    Link is clicked

    Request content using XHR
    Ajax
    http://trackingjs.com
    Loading...
    Some fancy loader
    appears
    1
    2
    3

    View Slide

  42. Content is loaded
    Ajax
    http://trackingjs.com
    URL doesn't change
    1
    2

    View Slide

  43. Hijax
    http://trackingjs.com

    View Slide

  44. var xhr = new XMLHttpRequest();
    xhr.onload = successFn;
    xhr.onerror = errorFn;
    xhr.open('GET', '/foo.html');
    xhr.send();
    location.hash = '#foo';
    Hijax

    View Slide

  45. Define surfaces to
    update on navigate
    JavaScript listens for links
    Hijax
    http://trackingjs.com
    1
    2

    View Slide

  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

    View Slide

  47. Content is loaded
    Hijax
    http://trackingjs.com#docs
    URL updates with
    hash bang #
    2
    1

    View Slide

  48. Okay, so what is a good single
    page app then?

    View Slide

  49. SEO & Bookmarkability

    View Slide

  50. Share or bookmark a link should
    always display the same content

    View Slide

  51. History API
    window.location.href = "page.html";
    history.pushState({}, "title", "page.html");
    history.replaceState({}, "title", "page.html");

    View Slide

  52. History API
    page01.html page02.html page03.html
    Navigate between pages without page refresh
    history.state: null

    View Slide

  53. History API
    history.pushState({}, '', 'page02.html')
    page01.html page02.html page03.html
    Navigate between pages without page refresh
    history.state: {}

    View Slide

  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 }

    View Slide

  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

    View Slide

  56. View Slide

  57. View Slide

  58. History navigation

    View Slide

  59. By using History API you can
    manipulate the browser history,
    so you can use browser’s
    back & forward buttons

    View Slide

  60. Cacheable screens

    View Slide

  61. Once you load a certain surface
    this content is cached in memory
    and is retrieved later on without
    any additional request

    View Slide

  62. View Slide

  63. UI feedback

    View Slide

  64. When some content is requested,
    it indicates to the user that
    something is happening

    View Slide

  65. Pending navigations

    View Slide

  66. Block UI rendering
    until data is loaded

    View Slide

  67. View Slide

  68. State retention

    View Slide

  69. Scrolling, reloading or navigating
    through the history of the page
    should get back to where it was

    View Slide

  70. View Slide

  71. State retention
    window.history.state = {}; Memory
    State object size limits (640KB)

    Serialized objects
    Memory management to avoid leaks

    View Slide

  72. Memory

    recover

    View Slide

  73. View Slide

  74. Hybrid rendering

    View Slide

  75. Ajax + server-side rendering
    allows disable pushState at any
    time, allowing progressive
    enhancement.

    View Slide

  76. View Slide

  77. Client-side only rendering

    XHR
    Response

    View Slide

  78. View Slide

  79. Page resources management

    View Slide

  80. Evaluate scripts and stylesheets
    from dynamic loaded resources

    View Slide

  81. View Slide

  82. Timeout detection

    View Slide

  83. Timeout if the request
    takes too long to load

    View Slide

  84. “Mimic the native browser behavior is
    what makes your Single Page Application
    done right.”

    View Slide

  85. 2012

    View Slide

  86. View Slide

  87. 2013

    View Slide

  88. View Slide

  89. 2014?

    View Slide

  90. View Slide

  91. Overview

    View Slide

  92. Overview
    Surface
    Surface Surface
    Surface

    View Slide

  93. Overview
    Surface
    Surface Surface
    Surface
    Screen

    View Slide

  94. Yahoo

    View Slide

  95. youtube

    View Slide

  96. Surface

    View Slide

  97. Daniel Pupius
    Former Googler, Medium Chief Engineer

    View Slide

  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

    View Slide

  99. senna.App
    senna.Screen
    senna.Surface
    Our solution

    View Slide

  100. Showcase video

    View Slide

  101. var app = new senna.App();
    app.addSurfaces(['header', 'body', 'footer']);
    app.addRoutes(new senna.Route(/.*\.html/, senna.Screen));
    app.navigate('/foo.html');
    JavaScript

    View Slide


  102. !





    Data attributes

    View Slide

  103. Web components?
    Coming soon...

    View Slide

  104. Demo time

    View Slide

  105. Less Bandwidth
    Data transfered (KB)
    0
    350
    700
    1050
    1400
    Page 1 Page 2 Page 3 Page 4
    Refresh SPA

    View Slide

  106. 1.3MB transferred
    22.7KB transferred

    View Slide

  107. Low Cost
    USD
    USD
    20
    40
    USD
    40
    USD
    100
    $30
    USD
    50
    Monthly broadband subscription
    Oxford Internet Institute

    View Slide

  108. Mobile

    View Slide

  109. Productivity

    View Slide

  110. Main features
    SEO,
    Bookmarkability
    Hybrid
    rendering
    State retention
    Timeout
    detection
    Pending
    navigation
    UI Feedback
    History
    navigation
    Cacheable
    screens
    Resources
    management

    View Slide

  111. ~8KB

    View Slide

  112. And more…
    Zero dependencies
    Open source Fully tested
    Lightweight
    ~8KB
    Data attributes
    Built in promises

    View Slide

  113. View Slide

  114. Team
    Iliyan Peychev Pedro Marques Zeno Rocha
    Iliyan Peychev

    View Slide

  115. @eduardolundgren
    Thank you!

    View Slide