Isomorphic JavaScript allows sharing code between client and server environments. It improves performance by enabling server-side rendering for initial page load and SEO. To implement isomorphism, code must be environment agnostic or shimmed per environment. Frameworks like React enable isomorphism through features like ReactDOMServer for rendering on the server and an isomorphic router. State management with Redux also requires initializing the store on both client and server to share state.

1. Isomorphic Apps

2. What is
Isomorphic
JavaScript?

3. JavaScript code that can be shared between
environments.

4. i·so·mor·phic
same form

5. Persistence
Client
JavaScript
DOM manipulation UX
View layer
Application
logic
Routing
Backend
Ruby
Python
Java
PHP
Old Web Apps

6. Backend
Ruby
Python
Java
PHP
Persistence
Client
JavaScript
DOM manipulation UX
View layer
Application
logic
Routing
Fat-Client

7. Persistence
Client
JavaScript
Shared
JavaScript
View layer
Application
logic
Routing
DOM manipulation UX
Backend
Ruby
Python
Java
PHP
Isomorphic

8. Why go to the trouble?

9. Performance

10. Performance
Initial pageload
speed.
SEO
Crawlable single-page
apps.
Flexibility
Run code anywhere.

11. Client-rendered app
User sees
content
Exacerbated on mobile: high
latency, low bandwidth
Download
skeleton
HTML
Download
JavaScript
Evaluate
JavaScript
Fetch data
from API

12. Server-rendered app
Download
full
HTML
Download
JavaScript
User sees
content
Evaluate
JavaScript

13. How to Isomorph

14. Isomorphic JavaScript can
be environment agnostic
or
shimmed per environment.

15. Environment
agnostic
Does not depend on browser-specific
properties (window) or server-specific
properties (process.env,
req.cookies).

16. Shimmed
per
environment
window.location.pathname
vs
req.path
Module can expose a single API. But
does different things on server/browser.

17. How we do/did it!

18. ReactDOMServer.renderToString

19. Normal Router

20. Router for server
rendering
Server rendering is a bit different than in a client because you'll
want to:
Send 500 responses for errors
Send 30x responses for redirects
Fetch data before rendering (and use the router to help you do
it)
To facilitate these needs, you drop one level lower than the
<Router> API with:
match to match the routes to a location without rendering
RouterContext for synchronous rendering of route components

21. Isomorphic Router
Will be used by both server and client.

22. And finally…
The STORE!!!!

23. Server side
● Create store and initialize it to default values.
● Do the initial on load dispatches as required
by components.(which might or might not
change the store values)
● Assign the store values as window variables
in the html passed to client

24. Client Side
● Initialize store again with the window variable
supplied by server

25. The End.