“Many who have learned from Hesiod the countless names of gods and monsters never understand that night and day are one.”
-Heraclitus
What is Isomorphism?
Most literally, “isomorphic” means “being of identical or similar form, shape, or structure”. A basic example of two isomorphic objects from mathematics is the set of all integers (...-2,-1,0,1,2...) and the set of all even integers (...-4,-2,0,2,4…). There is a transformation (in this case multiplication/division by two) under which the two sets are considered equivalent; if one cared to, they could transform the first set into the second and back without any loss or deformation of information. Similar to this set transformation, “Isomorphic” JavaScript (IJA) provides a transformation to allow a unified structure of JavaScript code to execute on both the client and server ends of a Single-Page Application (SPA).
Isomorphic JavaScript Applications Contrasted with Other Development Models
The two major contrasting SPA application architectures that contrast with IJA are Model-View-Controller (MVC) and Model-View-Presenter (MVP). In the MVC architecture, a “separation of concerns” enforcement exists between the rendered results (View), the application data (Model), and the application logic that controls the processing pipeline (Controller). In the MVP architecture, the Presenter mediates events generated in the interface and the data.
While both the MVC and MVP patterns are useful in organizing applications, one key similarity is that a JavaScript bundle is delivered to a client’s computer. This forces the client to load the application, and this loading process may delay the display and interfere with the indexing processes of search engine web crawlers.
The Isomorphic JavaScript Approach
IJA addresses these issues by breaking generation of SPAs into two stages, providing equivalent functionality via a different route. In the first stage, the server generates an initial view for the SPA and deliver the initial view to the client to create the impression the application loaded instantaneously. Secondly and separately, the client downloads the remainder of the application in the background. When the application download completes, the client has both the external appearance and the internal logic to handle requests from the user.
Isomorphic JavaScript Pros and Cons
This isomorphic approach has advantages on top of its performance improvements; for instance, it vastly improves a site’s Search Engine Optimization (SEO). As preparation for serving up search results, modern search engines send out “web crawlers” which examine the contents of pages to both index the content and to calculate page rankings. This indexing uses content elements from the page including text, image descriptions, and links to calculate content relevant, to measure the depth of treatment of the topic, and to evaluate how the coverage has been received by peers.
Encapsulating the page-loading instructions (as was done traditionally) meant that there wasn’t simply a page waiting for the web crawler to view. Therefore, the crawler would first have to run the JavaScript to generate the page before examining the page content as displayed to human users. Pre-generating some of the page’s contents on the server allows crawlers easier access, increasing the likelihood that a site will be favorably indexed and ranked.
While IJA can improve both site performance and SEO, proponents note that the shift in the development paradigm can cause the framework to change more quickly and can require more frequent application maintenance and updates. IJA also introduces the difficulty of writing code that needs to run in two distinct environments, meaning developers have to be aware of the differences’ potential effects.
Ready to Explore this Development Option?
If you think the performance and SEO improvements of an IJA could benefit you, TechArk’s team is ready to help. Contact us today!
