Isomorphism vs Universal JavaScript
TL;DR: Isomorphism is the functional aspect of seamlessly switching between client- and server-side rendering without losing state. Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments.
Ever since Spike Brehm of Airbnb popularized the term Isomorphic JavaScript people have been confused about what exactly it means to have an Isomorphic JavaScript application and what it takes to build one. From the beginning there were people opposing the term, suggesting alternatives such as monomorphic or polymorphic, whatever that all means. Eventually Michael Jackson (the React guy) suggested the term Universal JavaScript and most people seem to prefer it and proclaim “Isomorphic” to be dead.
To reopen the discussion, JavaScript guru Dr. Axel Rauschmayer recently asked the question: Is Isomorphic JavaScript a good term? I’ve already left a comment explaining my view of things, but I’d like to explain a little more. I used to make the distinction between Functional Isomorphism and Technical Isomorphism. In my talk at XebiCon I explained the difference. Having the server render the HTML on first page load is the functional part, the thing that provides for a better user experience. The technical part is where we use the same code in both environments, which no user ever asked for, but makes a developer’s life easier (at least in theory).
Isomorphism and Universal JavaScript are two different things.
Nowadays I think of it as Isomorphism vs Universal JavaScript. The confusion started when people started to think of isomorphism as a JavaScript thing. Isomorphism in my mind simply refers to the fact that the web application can be rendered on multiple platforms (in the browser and on the server). Isomorphism itself is not purely a JavaScript thing. You can also build an isomorphic application in Dart or even use two different languages/stacks to render the same result. In fact there are many “isomorphic” applications which render a full HTML document on the server using PHP, Java or Ruby and use JavaScript and AJAX to create a rich user experience in the browser. This was the way things were done before the rise of Single Page Applications. The only real reason isomorphism is tied to JavaScript is because it’s the only language widely supported in the browser, and so at least part of the whole thing will use JavaScript. There’s no such thing as Isomorphic JavaScript, only isomorphic applications.
Running the same code in the browser and on the server in order to avoid code duplication is a very different problem. It is simply a matter of good development practices to avoid code duplication. This however is not limited to isomorphic applications. A utility library such as Lodash is “universal”, but has nothing to do with isomorphism. Sharing code between environments does not give you an isomorphic application. What we’re referring to with Universal JavaScript is simply the fact that it is JavaScript code which is environment agnostic. It can run anywhere. In fact most JavaScript code will run fine on any JavaScript platform.
The “universal” label that has been slapped on to it is superfluous, but it does have its merits. Now that we have a commonly known term to refer to environment agnostic JavaScript code, it allows library authors to list it as a feature and be fashionable doing it. I’m happy with the term “universal” being fashionable because it makes developers think about their dependencies on the runtime environment. In the end this will help the JavaScript ecosystem mature and allow libraries to be used everywhere.
Although Isomorphism and Universal JavaScript are different things, they are related. In practice its very impractical to create an isomorphic application without running the same code in the browser and on the server. It’s more work to write the code twice and hard to keep changes in sync, not to mention refactoring would be a pain. In the end you’ll end up using a lot of Universal JavaScript to write your Isomorphic Application.
