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.

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

5. Client
Server
Shared code REST
API

6. REST
API
Shared code

7. REST
API
View
Routing
Fetching I18N
Models

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

27. Correct loading order

28. Solution - Text Extract Plugin for Webpack

29. Joy #2 - React Router

30. Routing (shared code)

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/

42. Viktor Turskyi (koorchik)
viktor@webbylab.com
https://twitter.com/koorchik
https://github.com/koorchik
http://webbylab.com