Embed Size (px)
Citation preview
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
