Kharkiv JS 2015 - Creating isomorphic applications in React (en)
0 likes497 views
The document discusses the challenges and benefits of creating isomorphic applications with ReactJS, highlighting SEO advantages, loading speed, and efficient data fetching. It outlines various 'joys' and 'pains', including issues with CSS styles, the use of React Router, and incorporating Redux for state management. The author shares insights into solutions for common problems and offers resources for further exploration of isomorphic application development.
Kharkiv JS 2015 - Creating isomorphic applications in React (en)
- 1. Pain and Joy of creating isomorphic applications in ReactJS Viktor Turskyi Kharkiv JS 2015
- 2. Isomorphism o_O The interest of isomorphisms lies in the fact that two isomorphic objects cannot be distinguished by using only the properties used to define morphisms; thus isomorphic objects may be considered the same as long as one considers only these properties and their consequences. (Wikipedia)
- 3. Isomorphic application (simpler definition) Just SPA that can be run on server
- 4. Demo (app in real life) wall.itsquiz.com
- 8. What for? (about joy) Search engine optimization Loading speed
- 9. Colors of isomorphic 1) Isomorphic view 2) Isomorphic styles 3) Isomorphic routing 4) Isomorphic data fetching 5) Isomorphic configuration 6) Isomorphic ES6 7) Isomorphic localization
- 10. Joy #1 - React
- 11. View - client
- 12. View - server
- 13. Pain #1 - cannot import styles in nodejs
- 14. Solution - inline styles (styles - just JSON)
- 15. Issues with inline styles 1) pseudo attributes :hover, :active, :focus 2) media queries 3) autoprefixing 4) styles merging
- 17. Server and client renders different markup
- 18. Pain #2 - client side autoprefixer
- 19. Solution that just works
- 20. Choosing UI components library
- 21. Pain #3 - “Material UI” uses client side autoprefixer
- 22. We’ve switched to Material Design Lite react-mdl (Material Design Lite) works great!!! ) What next?
- 23. Hooray, the problem with the styles is solved!!!
- 24. Not this time!!!
- 25. Pain #4 - assets loading order
- 26. How to do it right? Load CSS at the beginning Load Javascript at the end
- 28. Solution - Text Extract Plugin for Webpack
- 29. Joy #2 - React Router
- 31. Routing (client)
- 32. Routing (server)
- 33. Joy #3 - Redux
- 34. One store per application
- 35. Work with REST API
- 36. Data fetching steps Client: 1. React component rendering 2. Show spinner 3. Fetch data 4. Update the page (rerender React component with fetched data) Server: 1. Preload all required data for a page 2. Render the page to string 3. Send HTML to client
- 37. REST API - shared code (isomorphic-fetch)
- 38. What is left outside of the talk 1) Isomorphic configuration 2) Isomorphic localization 3) Isomorphic ES6
- 39. Statistics Universal code - 1778 SLOC (93%) Client specific code - 33 SLOC (2%) Server specific code - 95 SLOC (5%)
- 40. links Redux http://rackt.org/redux/index.html React Router https://github.com/rackt/react-router Tutorial: Handcrafting an Isomorphic Redux Application (With Love) https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux- application-with-love-40ada4468af4
- 41. The application source code https://github.com/WebbyLab/itsquiz-wall/