Thinking Isomorphically

Tuesday, 1 September 2015

It has always got to me, the inherit SEO problem with SPAs. This of course comes down to the fact our web servers render little more than an empty div, without a trace of hypertext. With this in mind I would add more importantly, that we are “breaking the web”.

There have been a number of workarounds. The arduous task of pre-rendering your client-side app using the likes of PhantomJS, relying on search engine crawlers running Javascript engines, or adhering to unorthodoxed shebang conventions; none of which feel right. if I need SEO I revert back to a traditional server rendered MVC app.

Enter Isomorphism, Isomorphic Javascript. A buzz word first coined by Charlie Robbins in 2011. “Iso” Latin for equal, Morph “form”. Code of equal form that runs both on the client and server. Proposals have also been made to call it Universal Javascript, similar to Apple’s universal apps.

Sharing view logic with the server allows for server-side rendering. After this the same code on the client-side picks up from there, adding behaviour and SPA qualities. This server rendered markup restores the hypertext we had long forgotten, including links to other resources which are also capable of being rendered server side. The same routing logic which is used in the client code is shared with the server.

Another benefit of this is performance gains and improved UX. Pages are rendered immediately upon being downloaded, instead of having to wait for script downloads, XHR requests, and DOM manipulation to take place. Of course we won’t have any behavioural functionality until these occur, but it’s the perception of speed which is introduced, and the fact the user sees content earlier. This reminds me of iOS’s technique of displaying a screenshot of the app which was taken just before it was closed, while it is starting up. Automatic “Progressive Enhancement” so to speak.

Code maintainability and less code duplication are often cited as benefits. This might be true in the case that you’re building you’re app from the ground up with full-stack Javascript. In reality your web apps are more likely to have existing web services written in other languages. In this case we aren’t actually removing any duplicate code between the client and server. Instead simply sharing our existing client view logic with the server.

In summary, if the 2 benefits are an app which likes hypertext/improves SEO and enhances UX, then I’ll take it, whatever it’s called.