Isomorphic JavaScript Applications

Introduction:

Isomorphic JavaScript applications are those applications which make use of the same JavaScript code in the server side as well as the client side.

As the web application stack is evolving, there are lot of possibilities to achieve this.

Why Isomorphic Application?

To dynamically change data we can’t always reside on hitting the server to get the changed HTML because it is costly and we need to manipulate a lot of DOM Elements to render the changed content.

The better approach would be to use any Dynamic JavaScript frameworks/library(React, Angular, Mithril, etc) which will make API calls to get JSON content from server and do the rendering part in the front-end.

The challenge with this approach is, whenever you need to make a change, you need to do it in both ends(the server side script which is not JS and as well as the client side JavaScript) which is a pain since we need to maintain both the script in sync to provide better user experience and have good SEO impact.

One better approach to solve this problem is to use same code in both client and server.

JavaScript in Server Side:

Node.js is a JavaScript runtime built on Chrome’s V8 engine which allows to execute JavaScript in the server side. There are several web application frameworks(express, hapi, mojito, etc) which can help one to host server side JavaScript Apps. My personal favorite is express.js.

With node.js and any other JavaScript library one can easily host a isomorphic JavaScript Applications.

Simple Isomorphic JavaScript Application:

I am going to demonstrate a simple Isomorphic JavaScript application built using express.js, mithril.js. This app will have a square placeholder which will be filled with user selected colors and change colors when user switch through the different available colors.

This app uses the same code(demo_app.js) in both sides
1.) Server Side – To build the HTML contents
2.) Client Side – To remount the DOM elements and to activate the event handlers.

You can see a live demo here

Wondering whether this will suit a enterprise applications? Of course it is. We used to get millions of hits and it works like a charm.