Isomorphic JavaScript

27 Nov 2014, by Vijay in Developer

I have been interested in Rich Internet Applications (RIA) since my days as an Adobe Flex / Java Developer. It was an exciting time period as the browser was finally being used as an application platform, web applications were becoming a reality and JavaScript was not regarded highly in the developer world. Eventually as many technologies have come and gone, so did the cool plugin based technologies, JavaScript has made a strong comeback these days.

Browsers are changing are now, they are more capable than in my RIA days. Personally I am a firm believer in the saying:

“JavaScript is the lingua franca of the web. The web is the platform, Javascript provides the runtime.”

These days it’s very important to improve speed and interactivity of the web applications. It is very common for clients to compare web application to native platform applications when it comes to performance and user experiences. I know it’s like comparing apples to oranges, but clients do it all the time.

So what does all this have to do this thing called “Isomorphic JavaScript”? Read on, we will get to it.
Typically the web application architectures were made up of static web pages with thin client and fat server. Recently with the introduction of the MVC JavaScript frameworks such as Backbone.js and AngularJS, the architectures are shifting to rich client architectures and the web applications are now structured single page applications. Most of the application is now on the client side resulting in much improved performance once the initial loading is completed. These SPA (Single Page Applications) architectures also provide the user the ability to navigate quickly without refreshing. Additionally since the client and server are separated they can be coded in different programming languages.

One might say that all is good now and there is no need to change anything since we have MVC JavaScript frameworks such as backbone.JS , AngularJS , etc. providing feature like declarative HTML approach, two way data binding, MV* design pattern, DI (Dependency Injection) , end to end testing ,routing , templating \, etc.

Not so fast, I feel that there are areas that still require some thought about whether these new MVC frameworks provide everything, let’s look at these two areas.

Page rendering is slower since browser needs to do the extra work of DOM manipulation, watch for changes in bind data, do additional REST requests to the server, etc. In most cases, clients will not notice this increase in the work browser needs has to do but in larger applications this may become noticeable.

Search Engines Optimization is one of the biggest issues in the SPA architectures. Search Engine Bots don’t run JavaScript the page is ignored by search engines.
So how can we overcome these two issues? I have been looking into the recent development known as “Isomorphic JavaScript Apps” – JavaScript applications that can run both on the client-side and the server-side. Let’s take a look at how Isomorphism addresses the rendering and SEO concerns of the current MVC JavaScript frameworks.

Isomorphic Javascript
Isomorphic JavaScript tries to combine the better of two worlds. On one side the quick client side navigation with offline functionality, responsive behavior and beautiful page transitions. On the other side pre rendered templates on initial load from server. With an isomorphic approach it´s possible to execute parts of the application logic on client and server. With node.js there is a reliable JavaScript runtime engine for JavaScript Server Development. So you have JavaScript in front and backend which allows frontend developers to write server code as well.

The diagrams below give a better visualization of the non-isomorphic implementation (Client-side MVC) and the isomorphic implementation (Client +server MVC).


Server MVC                                Client MVC



Isomorphic Frameworks
Using an isomorphic framework it is possible to write application logic which can be used on the server and client. The most popular JavaScript framework with isomorphic approach at the moment is meteor.js. One other promising Framework is Rendr. Rendr allows running Backbone.js apps on client and server.
Another interesting library is Browserify. It brings the well known module system of node.js to the Client.

The Future
Creating web applications with isomorphic architectures could be an interesting thing in the near future. For applications which require a high performance level and a high rate of usability, the combination between client and server side rendering could be useful. The number of interested supporters for isomorphic JavaScript is increasing so expect to see more isomorphic frameworks to show up.