Slides for a talk given at Facebook's London offices for a London React meetup. React's ability to run on both the client and server is one of its biggest advantages, but there is little information on how this can be done in real applications. In this talk I will show you how we set up isomorphic React at State, and how you can do the same for your project. Blog post providing some more detail: http://jonassebastianohlsson.com/blog/2015/03/24/isomorphic-react-in-real-life/

1. Isomorphic React
In Real Life
Jonas Ohlsson
@pocketjoso

2. Who am I?
• Frond end developer at State
• Performance, tooling and open source geek
Isomorphic new site: http://alpha.state.com
Penthouse, Critical Path CSS Generator:
https://github.com/pocketjoso/penthouse

3. This talk
• Background: Isomorphism, React
• State’s isomorphic React render flow
- Data
- Bootstrap
- Stores

4. Isomorphic JavaScript
• Shared JS running both client and server
• Performance, graceful degradation, Accessibility, SEO

5. Flash of Client Side Rendering

6. Isomorphic React
• Easy - React.renderToString()
• What about data fetching, re-using render state, stores

7. React render flow (client)
URL Render
Fetch
data
Routing
table

8. React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};

9. React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);

10. React render flow (client)
React Lifecycle method componentDidMount: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);
componentDidMount

11. React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);
componentDidMount
…
$.get().then(result){
this.setState({data:
result});
});

12. React render flow (client)
props = {
page: ExplorePage
};
can’t use on the server
Render
Fetch
data
Routing
table
URL
React.render(
<App {…props} />,
containerElement
);
componentDidMount
…
$.get().then(result){
this.setState({data:
result});
});

13. Isomorphic Render Flow

14. Isomorphic React render flow
Make requests
page asked for
React.
render/
renderToString(
<App {…props} />
);
Pre fetch
data
Render
Routing
table
URL
props = {
page: ExplorePage
};

15. Isomorphic React render flow
Make requests
page asked for
React.
render/
renderToString(
<App {…props} />
);
Pre fetch
data
Render
Routing
table
URL
props = {
page: ExplorePage
};

16. Pre data fetching
React Statics component property: http://facebook.github.io/react/docs/component-specs.html#statics

17. Isomorphic React render flow
data =
ExplorePage.
requestForProps();
Routing
table
URL Pre fetch
data
Render
React.
render/
renderToString(
<App {…props} />
);
props = {
page: ExplorePage
};

18. Isomorphic React render flow
data =
ExplorePage.
requestForProps();
props.data = data;
Routing
table
URL Pre fetch
data
Render
React.
render/
renderToString(
<App {…props} />
);
props = {
page: ExplorePage
};

19. Bootstrapping render context
React.render(
<App {…props}/>
);
Server Client
React.renderToString(
<App {…props}/>
);

20. Bootstrapping
Server Client
Bootstrapping render context

21. Flux
• Data changing over time (during a session)
• Cached data
Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6

22. Flux
• Data changing over time (during a session)
• Cached data
Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6

23. Isomorphic Flux Stores

24. Snapshot / restore
Add snapshots to render context JSON Restore on client

25. Store reset
• Stores are singletons
• Prevent data leaking

26. Stores listening for request data
Request
response
data
Distribute StoresNormalise

27. Stores listening for request data
Request
response
data
Distribute StoresNormalise
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}

28. Stores listening for request data
Normalize data: https://github.com/gaearon/normalizr
Request
response
data
Distribute Stores
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}
Normalise

29. Stores listening for request data
Request
response
data
Distribute StoresNormalise
trigger(users)
trigger(statements)
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}

30. Stores listening for request data
UserStore = {
listenTo(
userProvider,
function(users){
// merge new users
// to store’s data
}
}
Request
response
data
Distribute Stores
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
Normalise
trigger(users)
trigger(statements)
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}

31. Full Render sequence: Server
• (Start stores when booting server)
• Execute requests via requestForProps for Page
• Distribute data to Stores (if not Automatic)
• React.RenderToString()
• Snapshot Stores, create render context JSON
• Send HTML to client
• Reset Stores

32. Full Render sequence: Client
• Parse render context JSON
• Start stores, and restore via snapshots
• React.render, with props from render context

33. Summary
• Fetch data before rendering React
• Statics to co-locate data requests with component logic
• Bootstrap server render context
• Snapshot, restore and reset Stores
• Optional: Auto distribute request data to Stores

34. Questions?
@pocketjoso
Blog post based on this talk
http://jonassebastianohlsson.com/blog/2015/03/24/isomorphic-react-in-real-life/