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

Single Page Applications in Liferay

Single Page Applications in Liferay

Even modest improvements in latency can have measurable impact on a website usage. As such, sites should have aggressive goals for both actual and user perceived latency. The most obvious metric is load time, also websites often optimize and minify resources, however, even with cached resources the browser still has to re-parse and execute the CSS and JS on every page load, it still has to lay out the HTML and redraw the UI. This slows down the actual navigation but can also add perceived slowness and often introduces a white flash. In order to improve actual and perceived latencies many sites are moving to the Single Page Application (SPA) model. These days the approach is widely employed by the likes of Facebook, Twitter, GitHub, and Flickr. These examples all feel kind of app-y. Sites with more traditional layouts can still reap the benefits. Some other folks like Medium.com is technologically a single page application but it is intended to feel like a traditional website. This talk is going to teach you how to use a hybrid rendering model in an attempt to get the best out of both worlds.

Eduardo Lundgren

October 06, 2014
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. Single Page
    Applications
    done right
    @eduardolundgren

    View full-size slide

  2. Always creating new things?

    View full-size slide

  3. Or combining existing ones?

    View full-size slide

  4. Coin Punch + Wine Press = Printing Press

    View full-size slide

  5. Inventions are a combination
    of existing elements.

    View full-size slide

  6. d
    What's the difference between a
    woman and a gun?
    vs

    View full-size slide

  7. Abstract thinking (child)

    View full-size slide

  8. Concrete thinking (adult)

    View full-size slide

  9. Creativity solves problems

    View full-size slide

  10. Concrete Abstract
    !

    View full-size slide

  11. Perceived performance

    View full-size slide

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

    View full-size slide

  13. Persistence of vision

    View full-size slide

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

    View full-size slide

  15. 24 fps
    60 fps

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. Page load time

    View full-size slide

  20. Task completion

    View full-size slide

  21. Actual performance

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. “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 full-size slide

  25. Single Page Application

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. These days the approach is
    widely employed by others

    View full-size slide

  29. How to build a

    Single Page Application?

    View full-size slide


  30. http://trackingjs.com

    View full-size slide

  31. Ajax
    http://trackingjs.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Content is empty
    Link is clicked

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

    View full-size slide

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

    View full-size slide

  36. Hijax
    http://trackingjs.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. SEO & Bookmarkability

    View full-size slide

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

    View full-size slide

  41. History navigation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. Memory

    recover

    View full-size slide

  49. State retention

    View full-size slide

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

    View full-size slide

  51. Cacheable screens

    View full-size slide

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

    View full-size slide

  53. Pending navigations

    View full-size slide

  54. Block UI rendering
    until data is loaded

    View full-size slide

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

    View full-size slide

  56. Hybrid rendering

    View full-size slide

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

    View full-size slide

  58. Client-side only rendering

    XHR
    Response

    View full-size slide

  59. Page resources management

    View full-size slide

  60. Evaluate scripts and stylesheets
    from dynamic loaded resources

    View full-size slide

  61. Timeout detection

    View full-size slide

  62. Timeout if the request
    takes too long to load

    View full-size slide

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

    View full-size slide

  64. Overview
    Surface
    Surface Surface
    Surface

    View full-size slide

  65. Overview
    Surface
    Surface Surface
    Surface
    Screen

    View full-size slide

  66. 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 full-size slide

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

    View full-size slide


  68. !





    Data attributes

    View full-size slide

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

    View full-size slide

  70. 1.3MB transferred
    22.7KB transferred

    View full-size slide

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

    View full-size slide

  72. Productivity

    View full-size slide

  73. Concrete Abstract
    !

    View full-size slide

  74. Thank you!
    @eduardolundgren

    View full-size slide