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.

3e52153b29fd5540b549089f1f925eca?s=128

Eduardo Lundgren

October 06, 2014
Tweet

Transcript

  1. Single Page Applications done right @eduardolundgren

  2. Creativity

  3. Always creating new things?

  4. Or combining existing ones?

  5. Coin Punch + Wine Press = Printing Press

  6. Inventions are a combination of existing elements.

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

    vs
  8. Abstract thinking (child)

  9. Concrete thinking (adult)

  10. Creativity solves problems

  11. None
  12. Concrete Abstract !

  13. Perceived performance

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

  15. Persistence of vision

  16. None
  17. None
  18. None
  19. 24 frames per second 41 milliseconds per frame Real time

  20. 24 fps 60 fps

  21. 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
  22. 10KB of HTML 3KB of CSS 500Bytes of GIFs Hacker

    News, technically, it's fast First render in <500ms
  23. 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?
  24. Page load time

  25. Task completion

  26. Actual performance

  27. Actual performance GPU Acceleration RAM Usage Parsers & Lexers Layers

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

    & Render Trees Multi-Core Optimization Energy constrains
  29. “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
  30. Single Page Application

  31. None
  32. “SPA is a web site that fits on a single

    web page with the goal of providing a more fluid user experience”
  33. SPAs were pioneered in the mid-2000s by web apps like

    Gmail and Google Maps.
  34. None
  35. None
  36. These days the approach is widely employed by others

  37. How to build a
 Single Page Application?

  38. <iframe> http://trackingjs.com

  39. Ajax http://trackingjs.com

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

    errorFn; xhr.open('GET', '/foo.html'); xhr.send(); Ajax
  41. Define surfaces to update on navigate JavaScript listens for links

    Ajax http://trackingjs.com 1 2
  42. Content is empty Link is clicked
 Request content using XHR

    Ajax http://trackingjs.com Loading... Some fancy loader appears 1 2 3
  43. Content is loaded Ajax http://trackingjs.com URL doesn't change 1 2

  44. Hijax http://trackingjs.com

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

    errorFn; xhr.open('GET', '/foo.html'); xhr.send(); location.hash = '#foo'; Hijax
  46. None
  47. Okay, so what is a good single page app then?

  48. SEO & Bookmarkability

  49. Share or bookmark a link should always display the same

    content
  50. History navigation

  51. By using History API you can manipulate the browser history,

    so you can use browser’s back & forward buttons
  52. History API window.location.href = "page.html"; history.pushState({}, "title", "page.html"); history.replaceState({}, "title",

    "page.html");
  53. History API page01.html page02.html page03.html Navigate between pages without page

    refresh history.state: null
  54. History API history.pushState({}, '', 'page02.html') page01.html page02.html page03.html Navigate between

    pages without page refresh history.state: {}
  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 history.state: { key: 123 }
  56. 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
  57. None
  58. Memory
 recover

  59. State retention

  60. Scrolling, reloading or navigating through the history of the page

    should get back to where it was
  61. None
  62. Cacheable screens

  63. Once you load a certain surface this content is cached

    in memory and is retrieved later on without any additional request
  64. None
  65. Pending navigations

  66. Block UI rendering until data is loaded

  67. UI feedback

  68. When some content is requested, it indicates to the user

    that something is happening
  69. None
  70. Hybrid rendering

  71. Ajax + server-side rendering allows disable pushState at any time,

    allowing progressive enhancement.
  72. Client-side only rendering <div id="content"></div> XHR Response

  73. None
  74. None
  75. Page resources management

  76. Evaluate scripts and stylesheets from dynamic loaded resources

  77. None
  78. Timeout detection

  79. Timeout if the request takes too long to load

  80. “Mimic the native browser behavior is what makes your Single

    Page Application done right.”
  81. None
  82. Overview

  83. Overview Surface Surface Surface Surface

  84. Overview Surface Surface Surface Surface Screen

  85. 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
  86. var app = new senna.App(); app.addSurfaces(['header', 'body', 'footer']); app.addRoutes(new senna.Route(/.*\.html/,

    senna.Screen)); app.navigate('/foo.html'); JavaScript
  87. <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
  88. Demo time

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

    Page 1 Page 2 Page 3 Page 4 Refresh SPA
  90. 1.3MB transferred 22.7KB transferred

  91. Low Cost USD USD 20 40 USD 40 USD 100

    $30 USD 50 Monthly broadband subscription Oxford Internet Institute
  92. Mobile

  93. Productivity

  94. ~8KB

  95. None
  96. Concrete Abstract !

  97. Thank you! @eduardolundgren