Download as PDF, PPTX
Uploaded byViktor Turskyi
Kharkiv JS 2015 - Creating isomorphic applications in React (en)
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 Joyof creating isomorphic applications in ReactJS Viktor Turskyi Kharkiv JS 2015
- 2. Isomorphism o_O The interestof 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 (simplerdefinition) Just SPA that can be run on server
- 4. Demo (app inreal life) wall.itsquiz.com
- 5.
- 6.
- 7.
- 8. What for? (aboutjoy) 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.
- 12.
- 13. Pain #1 -cannot import styles in nodejs
- 14. Solution - inlinestyles (styles - just JSON)
- 15. Issues with inlinestyles 1) pseudo attributes :hover, :active, :focus 2) media queries 3) autoprefixing 4) styles merging
- 17. Server and clientrenders different markup
- 18. Pain #2 -client side autoprefixer
- 19. Solution that justworks
- 20. Choosing UI componentslibrary
- 21. Pain #3 -“Material UI” uses client side autoprefixer
- 22. We’ve switched toMaterial Design Lite react-mdl (Material Design Lite) works great!!! ) What next?
- 23. Hooray, the problemwith the styles is solved!!!
- 24.
- 25. Pain #4 -assets loading order
- 26. How to doit right? Load CSS at the beginning Load Javascript at the end
- 27.
- 28. Solution - TextExtract Plugin for Webpack
- 29. Joy #2 -React Router
- 30.
- 31.
- 32.
- 33. Joy #3 -Redux
- 34. One store perapplication
- 35.
- 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 leftoutside 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 Routerhttps://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 sourcecode https://github.com/WebbyLab/itsquiz-wall/
- 42.