Isomorphic Applications

Javascript frameworks these days have made developing Javascript for our applications a lot easier. Whether you rely on Angular.js, React.js, Backbone.js, Ember.js or even just Jquery these tools take a lot of the pain out of building your code and separating your concerns so you can code away and not worry about anything….or can you?

Since these frameworks have allowed for Single Page Applications (SPA’s) to be widely used there is something that has been a thorn in the side of most developers for quite some time. SEO.

Because Javascript runs at the browser and not at the server it is not possible for search engines to index your website without a lot of work. You can either:

  • Use Googles the hash bang implementation to serve static pages yourself. (Google still does this although you will need a headless browser such as PhantomJS to write a static version of the page and then point your .htaccess or other site configuration to tell the crawler to go to your static page)
  • Separately create dynamic pages to compliment your front end views and serving these as part of your application e.g. use a PHP page for each of your views and write out your static content into the page as part of your markup (this can be cumbersome as the structure of your application may need to change)
  • Use an external proxy service such as prerender.io to handle the crawling for you using a headless browser (this usually costs money).

So what other option is there? 

Along comes Isomorphic applications.

Isomorphic applications work by allowing the developer to write in Javascript but with both front end and back end code. This can be achieved using a number of different libraries although the top kid on the block at this moment is React.js, Facebook’s very own user interface library.

So how easy is it to write an isomorphic application? Well the answer is that there are plenty of boilerplates out there for your to easily get up and running and as long as you have an understanding of ES2015 (the new Javascript standard) and you can use React.js then you will be able to start working with an isomorphic framework straight away. I have been using Rick Wong’s excellent boilerplate which I have found to be an excellent way of getting up and running. It includes Webpack to be able to manage your dependancies and even includes a local proxy built in to enable you to translate your data from an API straight into your application. Hot updates are also included so changes made to your client and server are updated inside the application straight away - check it out it is pretty cool!

If you prefer using Angular then at this time of writing you can use Angular’s own implementation of the isomorphic framework called Angular Universal which can be run either as a Node.js server underneath your Angular 2 code or if you are more comfortable on a ASP.NET server then this is also supported. 

When it came to deploying my Isomorphic application I did this using a Dockerfile to build an image that would handle all of my node module deployment. If any new modules were added then I would simply build and commit my latest Docker image with my new modules. Once I have added my image to the Docker hub I would specify this image inside my project Dockerfile. This would then mean I would only need to add my working directory, expose the application port and start my application inside my new Dockerfile for my AWS deployment. Be warned though that running the Node.js server on a t1.micro or a t2.micro server seemed to time out when trying to deploy the build because of the processing of the node modules. Increasing the server capacity to a t2.medium server seemed to resolve this and I was able to run my isomorphic application successfully.

Running an isomorphic framework is a great way of ensuring that your website is crawlable by all the major search engines. It also allows you to write Javascript both at the client and the server. If you have not looked at React.js it is great! You can keep a separation of concerns with all your components and there are plenty of plugins that enable you utilise the full power of Node.js at the server to compliment your React.js application.