Ben Paddock
Software Developer
Isomorphic(?) JavaScript
Ben Paddock
- What does isomorphic mean?
- Make up of an application
- Demo app + code walkthrough
- Is it worth doing?
- Out in the wild
We'll Cover
- Isomorphism
- Isos (equal) + morphe (shape)
So ... a Javascript code base sharing the same form on client and server.
Isowhatnow?
By Loudon dodd (Own work) via Wikimedia Commons
Server
Client
What it Feels Like
A Better Term?
- Template rendering
- Routing
- CommonJS style modules
- API consumption
Shared Codebase
- Full-stack Node App
- Node web tier -> API data service
- Shoehorn a JS runtime into Rails (see react-rails)
Architecture Choices
- Webpack to package server code for use in the browser
- React for the UI
- React Router Component for dual client/server routing
- SuperAgent for accessing the API from both client and server
Demo App
<Cue Demo>
Demo App
- Browserify to package server code for use in the browser
- Handlebars for the UI
- Director for dual client/server routing
Other Options
- Single page apps (SPAs) are all the rage right now.
- Without JavaScript running, there is a problem.
Is it worth doing?
<html>
<head>
<link rel="stylesheet" href="/my/sassy/styles.css" />
</head>
<body>
<div class="you-spin-me-right-round">Please wait</div>
<script src="/my/phat/app.js"></script>
</body>
</html>+ SEO-friendly
+ Progressive enhancement
- Separation of concerns?
- Tied to Node for your web tier
- What about enabling only certain parts of the app?
Is it worth doing?
PJAX/Turbolinks - use AJAX to fetch only the HTML that's changed from the server.
Pages feel snappy like a single page app but you have server-side benefits intact.
Alternatives
Alternatives
Out in the Wild
Some further reading:
Thank You
Isomorphic JavaScript
By Ben Paddock
Isomorphic JavaScript
What is Isomorphic JavaScript, how does it work and is it worth doing?
