Slides from the NEJSConf talk about using React to build server rendered, universal, Javascript applications.

1. ISOMORPHIC
JAVASCRIPT
RENDERING ON THE SERVER IS FUN AGAIN

4. UNIVERSAL
JAVASCRIPT
HURRY UP AND DO THE TALK BEFORE IT CHANGES
AGAIN

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

8. If I wanted to
drink the
Universal
Kool-Aid, is
there
something
that can
make it as
easy as CSS?

9. React
• Javascript library for building user interfaces
• Simple components using JSX
• Can be rendered on the server (more to come)

11. CONGRATULATIONS,
YOU MADE A VIEW.
You should see Nick’s
.vimrc file on Github.

12. FLUX
• Unidirectional Data Flow
• Stores - ActionCreators - Dispatcher -Components
• Event Based Architecture

13. –Alex G. H. Reed
“So it’s basically a pub-sub system?”

18. 2 Entry Points into
Application
• Server: Index Route handler
• Browser: app.js

19. Major Challenge
• Browser application is asynchronous
• Server needs to be synchronous

20. But I don’t want
my Javascript to be
synchronous!!!

21. Differences
• Browser components communicate with
Stores via Actions. (asynchronous)
• Server components call the Store directly
within a static method. (synchronous)

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

24. Server Side Render
• Determine what routes/components are active
• Determine what data is needed
• Get the data
• Render the HTML

25. Have you
tried Vim
yet?
you should
try vim.
I use vim.

26. Hapi Index Route
Respond with index.html
for every request.

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

28. • 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.

29. • 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

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

32. My beard
game is
never
static.

33. Static Fetch Method

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

36. Now the app has been
rendered and the initial
state data has been
fetched.
Hapi Index Route

37. Jade is as
AWESOME
as
KETCHUP!

42. It would have
been readable
on vim
… Just Sayin

44. TSHIRTS!!!

45. TSHIRTS!!!

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

47. Browser entry

48. I like
turtles.

49. Initialize the
Rehydrator
Somewhere in your app that runs before anything else:

50. Inside the TimesheetStore constructor
Rehydrator instance method

51. In our Stores’
methods that
retrieve data, we
need to check for
staged data.

53. Seriously,
VIM is so Cool.
jjjjjjjjjjkkkkkkkllkkjjjjjjjjklll

54. Me
• @brucecoddington
• https://github.com/brucecoddington
• blue moon ghetto on Spotify

55. Project
Code

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

57. Congrats Zach and Traci