Isomorphic JavaScript
or shared JavaScript that runs on both the client and the server
Paris Web - October 18, 2014
Yannick Croissant
Senior Software Engineer Front-End at Deezer
yannickcr
yannickc
yannick.cr
A the beggining...
Classic Website
PHP
Java
Python
Ruby
Server
Client
JavaScript
Everything is made on server-side
Classic Website
JavaScript is only used for animations and simple interactions
Communication with the server is made with simple HTTP requests (and sometimes with XHR)
Today
Web Application
API
PHP
Java
Python
Ruby
Server
Client
JavaScript
JavaScript is now an important part of the application.
Web Application
Both server and client can do routing, templating, and data processing.
- Duplicate code and logic make maintenance and evolutions very hard.
- Can lead to some inconsistencies and bugs.
"Modern" Web Application
API
Client
JavaScript
Everything is made on client-side :
"Modern" Web Application
The server is only used to host and serve the static files (CSS, JS, HTML, Fonts)
- Routing
- Data processing
- Templating
Why is this bad ?
Lot of stuff to do before even showing the content:
Performances
Can destroy the usability on the weaker clients (mobiles, tablets, etc.)
- Parse scripts
- Request data from API
- Receive data
- Process data
- Receive scripts
- Execute scripts
All content is generated in JavaScript, so it's invisible to the search engines *
Search Engine Optimisation
Over complicated hacks needed to fix this issue:
- phantom.js + static html archive of your website
- prerender.io
Zero bug tolerance
(Your application if you have any JavaScript error)
But today on the server we can have
Node.js Web Application
API
Server
Client
JavaScript
JavaScript
Isomorphic Web Application
API
Server
Client
JavaScript
JavaScript
Routing
Templating
Data fetching
Isomorphic ?
Popularized by AirBnB in 2013 to describe shared JavaScript that runs on both the client and the server
Also know as the web app "Holy Grail"
No more code or logic duplication
Advantages
We can pre-render our page on the server
- Speed
- SEO friendly
- Fault tolerent
Coherence between the backend and frontend behavior
How to start
Shared libraries
var moment = require('moment');
moment().format('MMMM Do YYYY, h:mm:ss a'); // October 11th 2014, 4:47:20 pmServer (Node.js)
Client
<script src="moment.js"></script>
<script>
</script>
moment().format('MMMM Do YYYY, h:mm:ss a'); // October 11th 2014, 4:47:20 pm
Browserify
var handlebars = require('handlebars');
module.exports = function(path, data) {
var template = require('./views/' + path);
return template(data);
};template.js
Bundle your node.js application to use it in the browser.
Browserify
app.js
var template = require('template.js');
var server = typeof document !== 'undefined'; // Environment detection
var content = template({
title: 'Sample title',
description: 'Sample description
});
// Conditioning environment differences
if (server) {
res.end(content);
} else {
document.body.innerHTML = content
}Bundle your node.js application to use it in the browser.
Browserify
> browserify app.js > bundle.jsBundle your node.js application to use it in the browser.
Frameworks
Rendr
Developed by AirBnB
Help you to run your Backbone application on the client and the server
Meteor
All-in-one platform to write JavaScript applications
Developed by Meteor Development Group
React
Developed by Facebook
The V in MVC
All is about components and states
Made to run on the client, the server or both
Example
A (very) simple
isomorphic application
with React
The API is the key, build it first
Then bring Node.js on the server
Start with shared libraries + browserify
Jump into a framework
How to bring
isomorphism at home
Thank you
Questions ?
Isomorphic JavaScript
By Yannick Croissant
