Matheus Marsiglio - Isomorphic React + Redux App

i s o m o r p h i s m

@mtmr0x

Motivation

Create a great experience for users exploring super powers from two worldswith an awesome challenge.

Knowledge level

Medium to advanced Javascript knowledge and some relevant experience working with React and Redux

But don’t run!

There are going to have some surprises!

What

Concepts and core problems

!What

We’re not going to talk about detailed problemsfor time issues :(

Client side

Faster navigation Smarter data persistence

More control over user behavior Easier DOM manipulation

Server side

More control over loaded assets SEO super powers

client serverisomorphic code

client & server

Faster navigation Smarter data persistence

More control over user behavior Easier DOM manipulation

More control over loaded assets SEO super powers

Index.js

• SEO • Basic render in server side

• Isomorphic Fetch • SEO • PRELOADED_DATA • Folder tree with containers and components • Component abstraction layer for isomorphic fetch • Both sides fetch problem • Hot fetched data marker

SEO

Basic render in server side

Bring ReactDOMServer to your app ->Your component ->

Similar to ReactDOM.render()->

Isomorphic fetch

SEO

But we still have a SEO problem here

PRELOADED_DATA | the store

PRELOADED_DATA | the store

Folder structure

src/ └── components/ └── Home/ └── index.js └── Login/ └── index.js

└── containers/ └── Home.js └── Login.js

Folder structure

src/ └── components/ └── Home/ └── index.js └── Login/ └── index.js

└── containers/ └── Home.js └── Login.js └── ConnectApplication.js

Component abstraction layer

containers/ConnectApplication.js containers/Home.js

PRELOADED_DATA | the store

SALVAR PRELOADED_STATE NO DOM

Both sides fetch issue

Server side

Fetches, renders, magics

React checks data-reactid and do nothing :)

Client Side Javascript is loaded

Javascript will be executed and all fetched data will be refetched

Client side

Hot fetched data marker

The API call

Mark the response based on its origin ->

Hot fetched data marker

Action

Some magic here ->

Hot fetched data marker

The magic

Summary

• Basic render in server side • SEO issues • PRELOADED_DATA • Folder tree with containers and components • Component abstraction layer for isomorphic fetch • Both sides fetch problem • Hot fetched data marker

https://goo.gl/e29GST

Let’s build an isomorphic boilerplate

Thank You

https://all/@mtmr0x

https://goo.gl/e29GST