ISOMORPHIC JAVASCRIPT

RENDERING ON THE SERVER IS FUN AGAIN

UNIVERSAL JAVASCRIPT

HURRY UP AND DO THE TALK BEFORE IT CHANGES AGAIN

I’m totally not missing the point of server-side rendered Javascript

If I wanted to drink the Universal

Kool-Aid, is there

something that can

make it as easy as CSS?

React

• Javascript library for building user interfaces

• Simple components using JSX

• Can be rendered on the server (more to come)

CONGRATULATIONS, YOU MADE A VIEW.

You should see Nick’s .vimrc file on Github.

FLUX

• Unidirectional Data Flow

• Stores - ActionCreators - Dispatcher -Components

• Event Based Architecture

–Alex G. H. Reed

“So it’s basically a pub-sub system?”

2 Entry Points into Application

• Server: Index Route handler • Browser: app.js

Major Challenge

• Browser application is asynchronous

• Server needs to be synchronous

But I don’t want my Javascript to be

synchronous!!!

Differences

• Browser components communicate with Stores via Actions. (asynchronous)

• Server components call the Store directly within a static method. (synchronous)

Server

• Render the “route” or view

• Pre-Fetch the data

• Create the HTML as a String

• Store the data where it can be accessed by the client application.

• Return the response

Server Side Render

• Determine what routes/components are active

• Determine what data is needed

• Get the data

• Render the HTML

Have you tried Vim

yet?

you should try vim.

I use vim.

Hapi Index Route

Respond with index.html for every request.

• The router’s run() method is called with a routes configuration and the current location.

• Routes configuration matches a path to a component in your application.

• When a path is active, the router stores a reference to all of the active components in its state.

• Notice we fetch the data (resolve all promises) and THEN call the callback with: • Null (no error) • The rendered HTML as a String • The merged data object from the fetches

Static Blocks

• The statics object allows you to define static methods that can be called on the component class.

• Can be run before any component instances are created.

My beard

game is

never

static.

Static Fetch Method

• Notice we fetch the data (resolve all promises) and THEN call the callback with: • Null (no error) • The rendered html as a String • The merged data object from the fetches

Now the app has been rendered and the initial

state data has been fetched.

Hapi Index Route

Jade is as AWESOME

as KETCHUP!

It would have been readable

on vim

… Just Sayin

TSHIRTS!!!

TSHIRTS!!!

Browser

• Bootstrap the application normally.

• Determine which routes/components are active

• Use the ‘seeded’ data instead of making API calls during bootstrap process.

• When bootstrap is complete, app behaves as a normal SPA.

Browser entry

I like

turtles.

Initialize the Rehydrator

Somewhere in your app that runs before anything else:

Inside the TimesheetStore constructor

Rehydrator instance method

In our Stores’ methods that

retrieve data, we need to check for

staged data.

Seriously, VIM is so Cool.

jjjjjjjjjjkkkkkkkllkkjjjjjjjjklll

Me

• @brucecoddington

• https://github.com/brucecoddington

• blue moon ghetto on Spotify

Project

Code

You’re Missing the Point of Server-Side Rendered JS - Tom Dale

react-router-mega-demo

Universal Javascript - Michael Jackson

check these out

Ryan Florence’s React Conf Talk

Axios - Matt Zabriske

Congrats Zach and Traci