Single Page Application

Transcript

1. Single Page Application SPA
2. “SPA is a web site that fits on a single web page with the goal of providing a more fluid user experience” WikipediA The free Encyclopedia
3. “Performance means many different things to many different people” Ilya Grigorik Developer Advocate, Google
4. What is Performance?
5. GPU Acceleration Multi-Core Optimization RAM Usage What is Performance?
6. GPU Acceleration Multi-Core Optimization RAM Usage Parsers & Lexers Layers Render Trees Energy Constrains What is Performance?
7. GPU Acceleration Multi-Core Optimization RAM Usage Perceived Performance Parsers & Lexers Layers Render Trees Energy Constrains What is Performance?
8. Transport Selector Matching Style Calculation Layout & Painting When you ship bytes, needs to execute those bytes Bytes content 15K processing What happens after shipping those bytes? JavaScript NaCL & ASM GC Performance Latency Bandwidth Protocols
9. Is there such thing as fast enough?
10. You made it 2x faster, is that enough?
11. User Perspective 2 10 milliseconds can make a really good game into a really bad game. 10 milliseconds on an e-commerce can reduce sales. 1 Interval User Perspective 0 - 100 milliseconds Instant 100 - 300 milliseconds Slight Perceptible Delay 300 - 1000 milliseconds Task Focus, Perceptible Delay 1+ second Mental Context Switch 10+ seconds I'll Come Back Later
12. What really matters? ! Visits, engagement, conversions.
13. Perceived Performance
15. When we talk about Perceived Performance is a factor of multiple things.
16. Perceived Performance = f( Expected Performance, UX, Actual Performance )
17. Perceived Performance = f( Expected Performance, UX, Actual Performance ) Computer power
18. Perceived Performance = f( Expected Performance, UX, Actual Performance ) It's the glue!
19. “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
20. 10KBytes of HTML 3KB of CSS 500Bytes of GIFs Hacker News, technically, it's fast First render in <500ms
21. 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?
22. User Perspective 2 10 milliseconds can make a really good game into a really bad game. 10 milliseconds on an e-commerce can reduce sales. 1 Interval User Perspective 0 - 100 milliseconds Instant 100 - 300 milliseconds Slight Perceptible Delay 300 - 1000 milliseconds Task Focus, Perceptible Delay 1+ second Mental Context Switch 10+ seconds I'll Come Back Later
23. User Perspective 2 10 milliseconds can make a really good game into a really bad game. 10 milliseconds on an e-commerce can reduce sales. 1 Interval User Perspective 0 - 100 milliseconds Instant 100 - 300 milliseconds Slight Perceptible Delay 300 - 1000 milliseconds Task Focus, Perceptible Delay 1+ second Mental Context Switch 10+ seconds I'll Come Back Later
24. Conclusion As developers we need to think about task completion What is the problem? What are the primary user task for your application? What is the expected time to task completion?
25. Page load time
26. Perceived Performance = f( Expected Performance, UX, Actual Performance ) ! Experience = f( Perceived Performance, Task Completion )
27. Task Completion
28. Single Page Application
29. SPAs were pioneered in the mid-2000s by web apps like Gmail and Google Maps.
32. These days the approach is widely employed by others
33. Start with a plan
34. Overview
35. Overview Surface Surface Surface Surface
36. Overview Surface Surface Surface Surface Screen
37. AlloyUI is developing in partnership with YAHOO! and Google an API abstraction to Single Page Applications. Our solution 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 Prepare Page Flip Screen Finalize Request pages are bookmarkable and sharable a screen can be understood as a page renderer 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
38. Several ways to render pages 2 3 Client-side Only Server-side & HTML fragment Server-side & Templated Views 1
39. Cacheable screens Pending navigations Scrolling on history Fast back Improve performance by keeping rendered pages around. History navigations should remember the scroll position. Block UI rendering until data is loaded. Back should be quick; users don’t expect data to have changed much. Consider all the edge cases
40. UX Feedback Memory SEO Deferred code loading Provide feedback on user navigation. Provide server side render to prevent SEO problems Manage screens carefully to avoid memory leaks. Load code as late as possible. Consider all the edge cases
41. AlloyUI has been developing in partnership with YAHOO! and Google an API abstraction to handle Single Page Applications. SurfaceApp Screen Surface Our solution
42. AlloyUI has been developing in partnership with YAHOO! and Google an API abstraction to handle Single Page Applications. SurfaceApp Screen Surface Our solution
43. Page Refresh Navigation
44. Single Page Application Navigation
45. Memory Management
46. Memory recovering Memory Management
47. The Future
48. The future SPAs are important for performance and mobile experience. ! The next-generation of content sites won't feel like the content sites of today.
49. As more sites move to a single page designers and developers should think how utilize the reduced constraints.
50. Demo time
51. eduardo.lundgren@liferay.com Thank you! iliyan.peychev@liferay.com