Isomorphic JavaScript – Build awesome webapps with the best of two worlds

 

Current state of App Development

With the raising of modern rich web applications it’s getting more and more important to improve the speed and the interactivity of mobile web applications. People are spoiled of native applications and compare the experiences of both worlds to each other. After several years of static web pages with thin client and fat server architecture the architecture switched to rich client architecture some years ago. This was definitely owed to the raise of Model View Controller JavaScript Frameworks like Backbone.js or AngularJS which made it possible to implement structured single page applications. The bulk of the Application lives now in the client, which offers the user a good performance after initial loading. The user has the possibility to navigate quickly without refreshing and can work offline if the implementation contains that. Server and Client are clearly separated. Front and backend developers don’t have to worry about the other part and can proceed separately. So it’s also no problem to write server and client side code in different programming languages.

Why to change this beautiful World?

Performance

It ́s faster to request pre rendered templates from the server on app start. The effort is multiplicated if you can serve cached initial pages to different users. With client side rendering the user has to wait a few seconds more this effect can be enhanced by mobile devices with weaker hardware specifications. Due to several studies, delays of only a few hundred milliseconds can mislead the user to leave the webpage or application.

Search Engine Optimization

An other main approach for server side rendering is SEO. Search Engine Bots don’t run JavaScript so your page or application is ignored by search engines. Relating to google this could change in near future. Depended on the architectural change of Web applications Google wants to interpret JavaScript based web applications.

Isomorphic Approach

Isomorphic JavaScript tries to combine the best 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 without any bigger difficulties.


Isomorphic Frameworks

With an isomorphic framework it is possible to write application logic which is reusable on server and client. Therefore its important to write the logic on an abstraction layer. The most popular JavaScript framework with isomorphic Approach at the moment is meteor.js. The current version of this framework is 0.8.1.3. So we can hope for version 1.0 in near future. One other promising Framework is Rendr. This framework was founded by two airbnb developers which spend a lot of time with isomorphic JavaScript. Rendr allows to run 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. Regarding to Browserify you can use many node modules on Client which could unify your code regarding isomorphic approach.

Summary

Webapps with isomorphic architecture could be an interesting thing in the near future. Applications which require a high performance level with simultaneous high rate of usability, the combination between client and server side rendering could be useful. Stable releases for the brightest frameworks on isomorphic sky are foreseeable and the number of interested supporters is increasing.

 

2 thoughts on “Isomorphic JavaScript – Build awesome webapps with the best of two worlds

  1. Pingback: Isomorphic JavaScript – Build awesome webapps with the best of two worlds | Qualidade de Software

  2. Pingback: Isomorphic JavaScript – Build awesome web...

Leave a Reply

Your email address will not be published. Required fields are marked *