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

Single Page Application

Single Page Application

Eduardo Lundgren

March 10, 2014
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. Single Page Application
    SPA

    View full-size slide

  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

    View full-size slide

  3. “Performance means many
    different things to many
    different people”
    Ilya Grigorik
    Developer Advocate, Google

    View full-size slide

  4. What is Performance?

    View full-size slide

  5. GPU Acceleration
    Multi-Core Optimization
    RAM Usage
    What is Performance?

    View full-size slide

  6. GPU Acceleration
    Multi-Core Optimization
    RAM Usage
    Parsers & Lexers
    Layers
    Render Trees
    Energy Constrains
    What is Performance?

    View full-size slide

  7. GPU Acceleration
    Multi-Core Optimization
    RAM Usage
    Perceived Performance
    Parsers & Lexers
    Layers
    Render Trees
    Energy Constrains
    What is Performance?

    View full-size slide

  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

    View full-size slide

  9. Is there such thing as fast
    enough?

    View full-size slide

  10. You made it 2x faster, is that
    enough?

    View full-size slide

  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

    View full-size slide

  12. What really matters?
    !
    Visits, engagement,
    conversions.

    View full-size slide

  13. Perceived Performance

    View full-size slide

  14. When we talk about Perceived
    Performance is a factor of
    multiple things.

    View full-size slide

  15. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )

    View full-size slide

  16. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )
    Computer
    power

    View full-size slide

  17. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )
    It's the glue!

    View full-size slide

  18. “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

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

    View full-size slide

  20. 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

  21. 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

    View full-size slide

  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

    View full-size slide

  23. 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?

    View full-size slide

  24. Page load time

    View full-size slide

  25. Perceived Performance =
    f( Expected Performance, UX, Actual Performance )
    !
    Experience =
    f( Perceived Performance, Task Completion )

    View full-size slide

  26. Task Completion

    View full-size slide

  27. Single Page Application

    View full-size slide

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

    View full-size slide

  29. These days the approach is
    widely employed by others

    View full-size slide

  30. Start with a plan

    View full-size slide

  31. Overview
    Surface
    Surface Surface
    Surface

    View full-size slide

  32. Overview
    Surface
    Surface Surface
    Surface
    Screen

    View full-size slide

  33. 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

    View full-size slide

  34. Several ways to render pages
    2
    3
    Client-side Only
    Server-side & HTML fragment
    Server-side & Templated Views
    1

    View full-size slide

  35. 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

    View full-size slide

  36. 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

    View full-size slide

  37. AlloyUI has been developing in partnership with
    YAHOO! and Google an API abstraction to handle
    Single Page Applications.
    SurfaceApp
    Screen
    Surface
    Our solution

    View full-size slide

  38. AlloyUI has been developing in partnership with
    YAHOO! and Google an API abstraction to handle
    Single Page Applications.
    SurfaceApp
    Screen
    Surface
    Our solution

    View full-size slide

  39. Page Refresh Navigation

    View full-size slide

  40. Single Page Application Navigation

    View full-size slide

  41. Memory Management

    View full-size slide

  42. Memory
    recovering
    Memory Management

    View full-size slide

  43. 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.

    View full-size slide

  44. As more sites move to a single
    page designers and developers
    should think how utilize the
    reduced constraints.

    View full-size slide