Single Page Application

Single Page Application

3e52153b29fd5540b549089f1f925eca?s=128

Eduardo Lundgren

March 10, 2014
Tweet

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

  14. None
  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.
  30. None
  31. None
  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