kharkiv js 2015 - creating isomorphic applications in react (en)
TRANSCRIPT
Pain and Joy of creating isomorphic applications in
ReactJSViktor Turskyi
Kharkiv JS 2015
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)
Isomorphic application (simpler definition)
Just SPA that can be run on server
Client
Server
Shared code REST API
RESTAPI
Shared code
RESTAPI
View
Routing
Fetching I18N
Models
What for? (about joy)
Search engine optimization
Loading speed
Colors of isomorphic
1) Isomorphic view2) Isomorphic styles3) Isomorphic routing4) Isomorphic data fetching5) Isomorphic configuration 6) Isomorphic ES67) Isomorphic localization
Joy #1 - React
View - client
View - server
Pain #1 - cannot import styles in nodejs
Solution - inline styles (styles - just JSON)
Issues with inline styles
1) pseudo attributes :hover, :active, :focus2) media queries3) autoprefixing4) styles merging
Server and client renders different markup
Pain #2 - client side autoprefixer
Solution that just works
Choosing UI components library
Pain #3 - “Material UI” uses client side autoprefixer
We’ve switched to Material Design Lite
react-mdl (Material Design Lite) works great!!! )
What next?
Hooray, the problem with the styles is solved!!!
Not this time!!!
Pain #4 - assets loading order
How to do it right?
Load CSS at the beginning
Load Javascript at the end
Correct loading order
Solution - Text Extract Plugin for Webpack
Joy #2 - React Router
Routing (shared code)
Routing (client)
Routing (server)
Joy #3 - Redux
One store per application
Work with REST API
Data fetching steps
Client:
1. React component rendering2. Show spinner3. Fetch data4. Update the page (rerender React component with fetched data)
Server:
1. Preload all required data for a page2. Render the page to string3. Send HTML to client
REST API - shared code (isomorphic-fetch)
What is left outside of the talk
1) Isomorphic configuration 2) Isomorphic localization3) Isomorphic ES6
Statistics
Universal code - 1778 SLOC (93%)
Client specific code - 33 SLOC (2%)
Server specific code - 95 SLOC (5%)
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
The application source code
https://github.com/WebbyLab/itsquiz-wall/
Viktor Turskyi (koorchik)
[email protected]://twitter.com/koorchik
https://github.com/koorchik
http://webbylab.com