An Introduction to Isomorphic Web Application Architecture

Isomorphic Web App Overview

How it works

Figure 1 A wireframe showing the home page for allthingswesties.com, an isomorphic web app.
Figure 2 Isomorphic apps build and deploy the same JavaScript code to both environments.

Building our stack

Figure 3 Building the stack for the server and the browser. Entry points, shared code and build types

Architecture Overview

Figure 4 Isomorphic application flow
  • The server receives a request.
  • Our application router handles the request and gathers the data required for the part of our application being requested. If the request is for allthingswesties.com/mugs, the app requests the list of mugs for sale through the site. This list of mugs, along with information to be displayed
    (names, descriptions, price, images), is collected before moving on to the render step.
  • The server generates the HTML for our web page using the data collected for the mugs page.
  • The server responds to the request for allthingswesties.com/mugs with the fully-built HTML.

Initial load is the first time the user interacts with our website. This means the first time the user clicks a link to our site in a Google search, from social media or types it directly into the web address bar.

  • The browser starts to render the mugs page immediately because the HTML sent by the server is fully formed, with all of the content we generated on the server. This includes the header and the footer of our app, along with the list of mugs for purchase. The app won’t respond to user input at this point, like adding a mug to the cart, or viewing the detail page for a specific mug.
  • When the browser reaches the entry JavaScript for our application, the application bootstraps. This will be at the end of the <body> tag.
  • The virtual DOM is recreated in React. Because the server sent down the app state, this virtual DOM is identical to the current DOM.
  • Nothing happens! React finds no differences between the DOM and the virtual DOM it built. The user is already being shown the list of mugs. The application can respond to user input now, like adding a mug to the cart.
  • The application responds to user input, like clicking add to cart.
  • The virtual DOM is rebuilt once any calls have been made to our cart APIs.
  • React diffs the virtual and browser DOM
  • Updates are made and any repaints are executed. The users cart icon updates to show that an item has been added.
Figure 5 The server-rendered version of the All Things Westies home page.
Figure 6 Server Render the Page
  1. The server receives a request.
  2. The server fetches the required data for that request. This can be from either a persistent data store like a MySQL or NoSQL database, or from an external API.
  3. Once the data are received, the server can build the HTML. It generates the markup with React’s virtual DOM via the renderToString method.
  4. The server injects the data from step 2 into our HTML, allowing the browser to access it later.
  5. The server responds to the request with our fully built HTML.
  1. The browser parses the DOM that it has received from the server;
  2. This results in rendering an HTML element; or
  3. Executing JavaScript;
  4. When the browser reaches our entry point for the application, the app bootstraps itself.
Figure 7 Browser Render & Bootstrap

--

--

--

Senior Engineering Manager, Growth @ Strava, author isomorphic web applications. Speaker, web dev & manager of humans. Always learning.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elyse Kolker Gordon

Elyse Kolker Gordon

Senior Engineering Manager, Growth @ Strava, author isomorphic web applications. Speaker, web dev & manager of humans. Always learning.

More from Medium

NoSQL: Not Only SQL 🤔 || MongoDB

How to Publish React App on Github By Using Yarn ?

Experience During Application Framework Group Project

Implementing user authentication in React with SuperTokens