kharkiv js 2015 - creating isomorphic applications in react (en)

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

Demo (app in real life)

wall.itsquiz.com

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)

viktor@webbylab.comhttps://twitter.com/koorchik

https://github.com/koorchik

http://webbylab.com