Isomorphic (Universal) JavaScript

Published in

Commencis

6 min readJan 29, 2017

“Isomorphic” word is defined as “different in ancestry, but having the same form or appearance” or “corresponding or similar in form and relations”.

With release of Node.js, JavaScript became an isomorphic language as stated in “Scaling Isomorphic JavaScript Code” article, written in 2011. Isomorphic (Universal) JavaScript can be defined as an intersection of client-side and server-side applications. Isomorphism is a new hybrid approach for web applications. Isomorphic JavaScript codes can run both on client-side and server-side. Naming the idea as “Isomorphic” or “Universal” has been still arguing as you can see in Dr. Axel Rauschmayer’s blog post.

First, web applications became available with server-side rendering. Users request a page and server-side returns the rendered page. After, single page applications (SPAs) have been upfront for a long time. There are lots of popular frameworks/libraries for SPAs, like Angular.js, React, Ember.js, Knockout.js and so on. They use MVC or MVVM structure. Basically, they get information from the server with API calls and then render pages in client-side.

However, SPAs have significant disadvantages:

SEO: Most of data bindings and renderings are handled in client-side and search engine crawlers may not see your rendered pages. Mostly, search engine crawlers cannot execute JavaScript in client-side (although it is stated that these crawlers can execute JavaScript while crawling, it not the guaranteed way yet).
Performance: In most cases, server-side rendering is much faster than client-side rendering. Also, initial loading time can be a big headache due to loading JavaScript file(s) and making API calls to retrieve information.

With Isomorphic Web Apps, MVC or MVVM structures are contained both in client-side and server-side. Pages can be rendered in server-side with again JavaScript MVC or MVVM structures.

So, same rendering engines and same JavaScript logic can be used in server-side, page can be rendered in server-side and client-side will handle the rest of logic. Because of using same client-side code in server-side to render pages, it is named as Isomorphic JavaScript.

The structure below was taken from another article and it obviously explain what Isomorphic JavaScript means.

Logics/functions in intersection area can be implemented with same code both in client-side and server-side. In Isomorphic JavaScript apps, these logics and functions are executed by server-side and it provides the speed and SEO-support. Also these can be executed in client-side. Moreover, rendering can be mixed between client-side and server-side.

Ideally, client-side and server-side rendering should be balanced for user experience and performance:

Server-side rendering can be used for critical parts (for example an initial page layout or the main content in the page)
Client-side rendering can be used for non-critical parts (for example comments in a content page or other side-functional parts in a page)

Advantages

Better performance: Pages are served as rendered and faster initial page loading (less javascript files and file sizes)
Full SEO support: Fully formed pages are served. Pages are easier to crawl with search engine crawlers. Also, faster page loading assures better page rankings.
Flexibility of client-side: With the balance of server-side and client-side, it is possible to have better web apps. Despite server-side rendering, flexibility of client-side is still useable.
Maintenance: As the same code is shared by both the client and the server, we don’t have to write logics twice. There is less code and it is easier to maintain the code.
Old device support: As rendered pages are served, it is not a problem to support old devices. (It is a problem in SPA frameworks/libraries)
Poor connections: Coursera says that “In extreme cases, we saw some users in these environments wait minutes for all the Javascript to load before they could see even the page. ... With isomorphic rendering, we were able to meet this threshold even in many of these extreme cases.”. Using isomorphism can lead poor connections to use web applications easier and faster.
Better user experience: By balancing rendering of pages will create a better user experience. Important parts of a page will be rendered in server and will be shown to user initially. Other parts can be rendered in client-side after these important parts of page are loaded.

Disadvantages

Lots of logic should be handled in server-side. Handling Http requests, routing, rendering, styling and module loading can be difficult and external libraries would be needed in server-side rendering. They should be handled in the same way both in server-side and client-side.
Server-side and client-side are different environments with different dynamics. Using same code may be problematic in different cases.

Isomorphic JavaScript Frameworks / Libraries

React: Same React components can be used in both client-side and server-side. A mini tutorial is here: https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app
Angular Universal: Angular 2 apps can be written universal. Rendering is available for both client-side and server-side. It provides better performance and optimisation for search engines.
Meteor: Meteor is most well-known and popular one with its active community. “Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.”
Rendr: Rendr was developed by Airbnb. “Rendr is a small library that allows you to run your Backbone.js apps seamlessly on both the client and the server. Allow your web server to serve fully-formed HTML pages to any deep link of your app, while preserving the snappy feel of a traditional Backbone.js client-side MVC app.”
Rill: Rill provides the minimum for abstractions over Node.js and the browser enabling things like routing (with redirecting, refreshes and more), cookies, and middleware with the same api.
Derby.js: DerbyJS is a full-stack framework for writing modern web applications. The same templates can be rendered to HTML in the browser or on the server. This means you can have fast page loads, search engine support and even use the same templates to render emails.
Ezeljs: A boilerplate for Backbone projects that share code server/client, render server/client, and scale through modular architecture. Ezel makes it easy to write and maintain Backbone apps that run in the browser and on the server using Node.js. Built on popular libraries like Express, Backbone, and Browserify.
Catberry: Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
Invisible.js: Invisible.js defines itself as “Reusable models in the client and the server”.
Este: Este is a “starter kit for universal full–fledged React apps. One stack for browser, mobile, server”.
Next.js: Next.js is “a small framework for server-rendered universal JavaScript webapps, built on top of React, Webpack and Babel”.
Fluxible: Fluxible can be used to build isomorphic Flux applications. Their Github link is https://github.com/yahoo/fluxible.
Mojito: Mojito is Yahoo’s framework built on YUI 3.

Isomorphic JavaScript in Production

Asana: A task management tool. They use their own framework named “Luna” for isomorphism.
Airbnb: Airbnb uses a library named “Rendr” developed by company itself.
Drupal 8: Drupal is an open source CMS system. Drupal started to use isomorphism with version 8. (see details)
Telescope: Telescope is an app platform. They use Meteor and React for isomorphism.
Ameblo: Ameblo is a popular blog in Japan. As the company says “almost all codes work for both client side (browsers) and server side (node.js) by the same flow” (see details). The company also states that their speed, load times, pageviews and bounce rates improved.
Coursera: Coursera used isomorphism and provided 4x speed (see details) by using React and Flux. Their serving structure is given below.