KEMBAR78
Building Isomorphic JavaScript Apps - NDC 2015 | PDF
ISOMORPHIC
JAVASCRIPT
APPLICATIONS
(*yawn*…… wut?)
ABOUT ME
Scandinavia Online
JavaScript / node.js <3
github @eiriklv
twitter @eiriklv
+ =
ISOMORPHIC
JAVASCRIPT
Yes, fancy words
- but why should I care..?
ISOMORPHIC
wtf do you
even mean bro?
JAVASCRIPT
days since last framework?
JAVASCRIPT
0
JAVASCRIPT
embularactymerbone.js
(credits to @ryanflorence)
WEB DEVELOPMENT
HTML5
CSS3
Isomorphic
Async
CDNAJAX JSON
Minification
WebSockets
TranspilingSEO
ES6
kamelåså.js
ISOMORPHIC JS
Turns out:
Not that scary
after all
ISOMORPHIC JS
server
(node.js)
client
(browser)
other
(e.g iOS)
JavaScript
ISOMORPHIC JS
An abstraction on top of
your environments
THE GOOD OL’
DAYS
When everything was easy(?)
SERVER-SIDE
Just ship it all from
scratch every time
SERVER-SIDE
So easy!
SERVER-SIDE
But poor user experience
if you interact a lot
NOT GOOD ENOUGH
Gimme some dynamic web
pages already!
CLIENT-SIDE (SPA)
Look ma’
I can do all the things
without reloading now!
CLIENT-SIDE (SPA)
CLIENT-SIDE (SPA)
Don’t you dare press the
back button
CLIENT-SIDE (SPA)
SEO..?
SERVER-SIDE
•Easy to reason about
•SEO out of the box
SERVER-SIDE
•Every action is a refresh
•Poor user experience for
dynamic apps
CLIENT-SIDE (SPA)
•Actions without refresh
•Less redundancy
•Better user experience
CLIENT-SIDE (SPA)
•No content before the js loads
•SEO can be a PITA
BUT I WANT IT ALL!
SERVER + CLIENT
•Gets your stuff done
•Two separate codebases
for the same application
SERVER + CLIENT
Well that turned into a
mess pretty quickly..
anecdotal -
YMMV
BOLD STATEMENTS
Approaching..
ISOMORPHIC
•All the above!
•None of the above!



(yeah,right…)
ISOMORPHIC
ISOMORPHISM
Demystified
No more conceptual
divide between the
server and the client
ISOMORPHISM
ISOMORPHISM
server
(node.js)
client
(browser)
JavaScript (your app)
ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript
ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript
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
ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript
ISOMORPHISM
Request
from user
(HTTP)
Load
the same
JavaScript
on client
«Hook»
into the
rendered
app
Respond
with
HTML
Render
on server
with
JavaScript
We need to use
abstractions that are
environment agnostic
ISOMORPHISM
HOW CAN I DO THIS?
So many options..
REACT
server
(node.js)
String
(HTML)
React.renderToString()
server
(node.js)
String
client
(browser)
DOM
(nodes)
REACT
React.render()
LETS BUILD ONE
The simplest isomorphic
JavaScript app?
+
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|——/public
| |—— bundle.js
|
|——app.js
|——webpack.config.js
|——/components
| |—— App.jsx
| |—— Video.jsx
|——/render
| |—— server.js
| |—— client.js
|——/services
| |—— get-ndc-videos.js
|
|——app.js
|——webpack.config.js
> webpack
> node app.js
> open http://localhost:3000
We have an isomorphic
JavaScript app!
THE POINT OF IT ALL
To be fancy?
(yes, but no)
Maintainability
(single codebase)
THE POINT OF IT ALL
SEO
THE POINT OF IT ALL
•Progressive Enhancement
•Graceful degradation
THE POINT OF IT ALL
Abstracting away the gap
betweet server and client
THE POINT OF IT ALL
ISOMORPHISM
There’s more to it
RENDERING
RENDERING
render()
vs.
renderToString()
ROUTING
- router
ROUTING
req.url
vs.
window.location
ROUTING
Different inputs
- same API
- router
DATA FETCHING
superagent
DATA FETCHING
XMLHttpRequest
vs.
http.request
DATA FETCHING
superagent.get(‘/videos/12’)
DATA FETCHING
Different implementations
- same API
MODULES
All abstractions must be
isomorphic
(i.e - work on both the client and server)
MODULES
If a module does not depend
on the environment it is
isomorphic by default
DEMO
Let’s look at fully
isomorphic application in
action
DEMO
•rendering
•routing
•data fetching
Isomorphic:
RECAP
Why should we use this did
you say..?
WHY YOU SHOULD BE EXITED
•Less context switching
•Maintainability
•Best of both worlds
WHY YOU SHOULD BE EXITED
•We push features faster(*)
(*) anecdotal
- YMMV
CODE
github.com/eiriklv/ndc-isomorphic
github.com/eiriklv/ndc-isomorphic-flux
QUESTIONS?
github.com/eiriklv/ndc-isomorphic
github.com/eiriklv/ndc-isomorphic-flux
THANKS!
Scandinavia Online
JavaScript / node.js <3
github @eiriklv
twitter @eiriklv

Building Isomorphic JavaScript Apps - NDC 2015