Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Isomorphic react in real life

1,660 views

Published on

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/

Published in: Internet
  • Be the first to comment

Isomorphic react in real life

  1. 1. Isomorphic React In Real Life Jonas Ohlsson @pocketjoso
  2. 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. 3. This talk • Background: Isomorphism, React • State’s isomorphic React render flow - Data - Bootstrap - Stores
  4. 4. Isomorphic JavaScript • Shared JS running both client and server • Performance, graceful degradation, Accessibility, SEO
  5. 5. Flash of Client Side Rendering
  6. 6. Isomorphic React • Easy - React.renderToString() • What about data fetching, re-using render state, stores
  7. 7. React render flow (client) URL Render Fetch data Routing table
  8. 8. React render flow (client) Render Fetch data Routing table URL props = { page: ExplorePage };
  9. 9. React render flow (client) Render Fetch data Routing table URL props = { page: ExplorePage }; React.render( <App {…props} />, containerElement );
  10. 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. 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. 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. 13. Isomorphic Render Flow
  14. 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. 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. 16. Pre data fetching React Statics component property: http://facebook.github.io/react/docs/component-specs.html#statics
  17. 17. Isomorphic React render flow data = ExplorePage. requestForProps(); Routing table URL Pre fetch data Render React. render/ renderToString( <App {…props} /> ); props = { page: ExplorePage };
  18. 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. 19. Bootstrapping render context React.render( <App {…props}/> ); Server Client React.renderToString( <App {…props}/> );
  20. 20. Bootstrapping Server Client Bootstrapping render context
  21. 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. 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. 23. Isomorphic Flux Stores
  24. 24. Snapshot / restore Add snapshots to render context JSON Restore on client
  25. 25. Store reset • Stores are singletons • Prevent data leaking
  26. 26. Stores listening for request data Request response data Distribute StoresNormalise
  27. 27. Stores listening for request data Request response data Distribute StoresNormalise statement : { creator : { id : 12312, name: Jonas … }, id: 199, text: ‘This is …’ }
  28. 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. 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. 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. 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. 32. Full Render sequence: Client • Parse render context JSON • Start stores, and restore via snapshots • React.render, with props from render context
  33. 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. 34. Questions? @pocketjoso Blog post based on this talk http://jonassebastianohlsson.com/blog/2015/03/24/isomorphic-react-in-real-life/

×