This document discusses isomorphic JavaScript applications. Isomorphic apps allow developers to write code that runs both on the server and client using the same JavaScript. This avoids maintaining separate codebases and allows search engines to index content rendered on the server. The document outlines how isomorphic apps handle rendering, routing, data fetching and modules in a consistent way across server and client. It provides an example of building a simple isomorphic app and demonstrates core concepts like rendering, routing and data fetching.

1. ISOMORPHIC
JAVASCRIPT
APPLICATIONS
(*yawn*…… wut?)

2. ABOUT ME
Scandinavia Online
JavaScript / node.js <3
github @eiriklv
twitter @eiriklv

3. + =

4. ISOMORPHIC
JAVASCRIPT
Yes, fancy words
- but why should I care..?

5. ISOMORPHIC
wtf do you
even mean bro?

6. JAVASCRIPT
days since last framework?

7. JAVASCRIPT
0

8. JAVASCRIPT
embularactymerbone.js
(credits to @ryanflorence)

9. WEB DEVELOPMENT
HTML5
CSS3
Isomorphic
Async
CDNAJAX JSON
Minification
WebSockets
TranspilingSEO
ES6

10. kamelåså.js

11. ISOMORPHIC JS
Turns out:
Not that scary
after all

12. ISOMORPHIC JS
server
(node.js)
client
(browser)
other
(e.g iOS)
JavaScript

13. ISOMORPHIC JS
An abstraction on top of
your environments

14. THE GOOD OL’
DAYS
When everything was easy(?)

15. SERVER-SIDE
Just ship it all from
scratch every time

16. SERVER-SIDE
So easy!

17. SERVER-SIDE
But poor user experience
if you interact a lot

18. NOT GOOD ENOUGH
Gimme some dynamic web
pages already!

19. CLIENT-SIDE (SPA)
Look ma’
I can do all the things
without reloading now!

20. CLIENT-SIDE (SPA)

21. CLIENT-SIDE (SPA)
Don’t you dare press the
back button

22. CLIENT-SIDE (SPA)
SEO..?

23. SERVER-SIDE
•Easy to reason about
•SEO out of the box

24. SERVER-SIDE
•Every action is a refresh
•Poor user experience for
dynamic apps

25. CLIENT-SIDE (SPA)
•Actions without refresh
•Less redundancy
•Better user experience

26. CLIENT-SIDE (SPA)
•No content before the js loads
•SEO can be a PITA

27. BUT I WANT IT ALL!

28. SERVER + CLIENT
•Gets your stuff done

29. •Two separate codebases
for the same application
SERVER + CLIENT

30. Well that turned into a
mess pretty quickly..
anecdotal -
YMMV

31. BOLD STATEMENTS
Approaching..

32. ISOMORPHIC
•All the above!

33. •None of the above!
(yeah,right…)
ISOMORPHIC

34. ISOMORPHISM
Demystified

35. No more conceptual
divide between the
server and the client
ISOMORPHISM

36. ISOMORPHISM
server
(node.js)
client
(browser)
JavaScript (your app)

37. ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript

38. ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript

39. ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript

40. ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript

41. ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript

42. We need to use
abstractions that are
environment agnostic
ISOMORPHISM

43. HOW CAN I DO THIS?
So many options..

47. REACT
server
(node.js)
String
(HTML)
React.renderToString()

48. server
(node.js)
String
client
(browser)
DOM
(nodes)
REACT
React.render()

49. LETS BUILD ONE
The simplest isomorphic
JavaScript app?

50. +

55. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

56. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

58. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

60. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

62. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

70. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

74. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

79. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

84. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|——/public
| |—— bundle.js
|
|——app.js
|——webpack.config.js

86. |——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js

87. > webpack

88. > node app.js

89. > open http://localhost:3000

100. We have an isomorphic
JavaScript app!

101. THE POINT OF IT ALL
To be fancy?
(yes, but no)

102. Maintainability
(single codebase)
THE POINT OF IT ALL

103. SEO
THE POINT OF IT ALL

104. •Progressive Enhancement
•Graceful degradation
THE POINT OF IT ALL

105. Abstracting away the gap
betweet server and client
THE POINT OF IT ALL

106. ISOMORPHISM
There’s more to it

107. RENDERING

108. RENDERING
render()
vs.
renderToString()

109. ROUTING
- router

110. ROUTING
req.url
vs.
window.location

111. ROUTING
Different inputs
- same API
- router

112. DATA FETCHING
superagent

113. DATA FETCHING
XMLHttpRequest
vs.
http.request

114. DATA FETCHING
superagent.get(‘/videos/12’)

115. DATA FETCHING
Different implementations
- same API

116. MODULES
All abstractions must be
isomorphic
(i.e - work on both the client and server)

117. MODULES
If a module does not depend
on the environment it is
isomorphic by default

118. DEMO
Let’s look at fully
isomorphic application in
action

119. DEMO
•rendering
•routing
•data fetching
Isomorphic:

120. RECAP
Why should we use this did
you say..?

121. WHY YOU SHOULD BE EXITED
•Less context switching
•Maintainability
•Best of both worlds

122. WHY YOU SHOULD BE EXITED
•We push features faster(*)
(*) anecdotal
- YMMV

123. CODE
github.com/eiriklv/ndc-isomorphic
github.com/eiriklv/ndc-isomorphic-flux

124. QUESTIONS?
github.com/eiriklv/ndc-isomorphic
github.com/eiriklv/ndc-isomorphic-flux

125. THANKS!
Scandinavia Online
JavaScript / node.js <3
github @eiriklv
twitter @eiriklv