Server Rendered JavaScript Apps

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

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