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.

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
12. Concrete Abstract !
13. Perceived performance
14. “Performance means many different things to many different people”
15. Persistence of vision
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
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.
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
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
58. Memory
 recover
59. State retention
60. Scrolling, reloading or navigating through the history of the page should get back to where it was
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
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
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
75. Page resources management
76. Evaluate scripts and stylesheets from dynamic loaded resources
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.”
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
96. Concrete Abstract !
97. Thank you! @eduardolundgren