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

Server Rendered JavaScript Apps

tomdale
February 11, 2015

Server Rendered JavaScript Apps

A short talk on the whys and wherefores of server-rendered JavaScript apps, presented at ManhattanJS.

tomdale

February 11, 2015
Tweet

More Decks by tomdale

Other Decks in Programming

Transcript

  1. Server-Rendered JavaScript Apps

    View Slide

  2. Why Client-Side JavaScript?
    • Fast Navigation
    • Fast Data Access
    • Rich Interactivity
    • Coherent Programming Model

    View Slide

  3. Why Server-Rendered?
    • Consistent Performance
    • Fast Initial Render
    • Web Crawlers/cURL

    View Slide

  4. Can you get the best of
    both worlds?

    View Slide

  5. “Progressive Enhancement”

    View Slide

  6. “Progressive Enhancement”
    • Server render, then add behavior
    using JavaScript
    • No client-side routing
    • Complexity increases over time

    View Slide

  7. Complexity grows exponentially
    with each new feature.

    View Slide

  8. Progressive enhancement
    (as a technique) is dead.

    View Slide

  9. But what if we could get the benefits
    of progressive enhancement as a
    by-product of modern development?

    View Slide

  10. FastBoot

    View Slide

  11. It doesn’t replace your
    existing server.
    Point of Clarification

    View Slide

  12. JSON data
    GET /api/posts.json
    GET /posts
    Browser CDN
    JS App
    Empty HTML, JavaScript (Big!)
    API
    Server

    View Slide

  13. Initial HTML
    JSON data
    GET /posts
    Browser FastBoot
    First
    Page API
    Server
    JavaScript
    JS App

    View Slide

  14. Demo

    View Slide

  15. github.com/tildeio/
    ember-cli-fastboot

    View Slide

  16. Next Up: Rehydration

    View Slide

  17. Rehydration
    • Show server-rendered HTML
    • Wait for JavaScript to load
    • JavaScript “takes over” once loaded
    • Side effect: Wicked fast re-renders
    (thanks to “virtual DOM”)

    View Slide

  18. Thank You

    View Slide