Slide 1

Slide 1 text

Server-Rendered JavaScript Apps

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Can you get the best of both worlds?

Slide 5

Slide 5 text

“Progressive Enhancement”

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Complexity grows exponentially with each new feature.

Slide 8

Slide 8 text

Progressive enhancement (as a technique) is dead.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

FastBoot

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Demo

Slide 15

Slide 15 text

github.com/tildeio/ ember-cli-fastboot

Slide 16

Slide 16 text

Next Up: Rehydration

Slide 17

Slide 17 text

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”)

Slide 18

Slide 18 text

Thank You