ISOMORPHIC JAVASCRIPT APPLICATIONS
(*yawn*…… wut?)
ABOUT MEScandinavia Online
JavaScript / node.js <3
github @eiriklv twitter @eiriklv
ISOMORPHIC JAVASCRIPT
Yes, fancy words - but why should I care..?
ISOMORPHICwtf do you
even mean bro?
JAVASCRIPT
days since last framework?
JAVASCRIPT
embularactymerbone.js(credits to @ryanflorence)
WEB DEVELOPMENTHTML5
CSS3
Isomorphic
AsyncCDNAJAX JSON
Minification
WebSockets
TranspilingSEOES6
ISOMORPHIC JSTurns out:
Not that scary after all
ISOMORPHIC JS
server(node.js)
client(browser)
other(e.g iOS)
JavaScript
ISOMORPHIC JSAn abstraction on top of
your environments
THE GOOD OL’ DAYS
When everything was easy(?)
SERVER-SIDEJust ship it all from scratch every time
SERVER-SIDESo easy!
SERVER-SIDEBut poor user experience if you interact a lot
NOT GOOD ENOUGHGimme 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 STATEMENTSApproaching..
ISOMORPHIC•All the above!
•None of the above!(yeah,right…)
ISOMORPHIC
ISOMORPHISMDemystified
No more conceptual divide between the
server and the client
ISOMORPHISM
ISOMORPHISM
server(node.js)
client(browser)
JavaScript (your app)
ISOMORPHISM
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
ISOMORPHISM
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
ISOMORPHISM
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
ISOMORPHISM
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
ISOMORPHISM
Requestfrom user
(HTTP)
Loadthe same
JavaScripton client
«Hook» into the
rendered app
Respond with
HTML
Renderon server
with JavaScript
We need to use abstractions that are environment agnostic
ISOMORPHISM
HOW CAN I DO THIS?So many options..
REACTserver
(node.js)
String(HTML)
React.renderToString()
server(node.js)
String
client(browser)
DOM(nodes)
REACT
React.render()
LETS BUILD ONEThe 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
> open http://localhost:3000
We have an isomorphic JavaScript app!
THE POINT OF IT ALLTo 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
RENDERINGrender()
vs. renderToString()
ROUTING
- router
ROUTINGreq.url
vs. window.location
ROUTINGDifferent inputs
- same API
- router
DATA FETCHING
superagent
DATA FETCHINGXMLHttpRequest
vs. http.request
DATA FETCHING
superagent.get(‘/videos/12’)
DATA FETCHINGDifferent implementations
- same API
MODULESAll abstractions must be
isomorphic(i.e - work on both the client and server)
MODULESIf a module does not depend on the environment it is isomorphic by default
DEMOLet’s look at fully
isomorphic application in action
DEMO
•rendering •routing •data fetching
Isomorphic:
RECAPWhy 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
CODEgithub.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