NanoToolkit Blog

The Way to Keep in Touch.

Single Page Applications should be designed differently.

It used to be that Most Web Applications on the web were MVC Apps. But in the Past few years there are many apps that do not have SEO concerns and opt out to be designed with SPA frameworks like AngualrJs, React in my mind. Many of these applications happen to be line of business Applications that are gated and are not publicly available. The Irony is these Applications are being designed with almost identical Network Architecture as their previous MVC counterparts.

Let’s review how most enterprise level MVC apps worked. There would normally be an Application Website and a separate WebApp for handling things such as authentication. So for instance you might try to use an expense management software that is hosted at https://www.awesometimemanagment.com/ however, the first time you login, you would be redirected to https://login.awesometimemanagment.com/ because you lack the proper session cookies that the original WebApp could identify you with.

With Modern SPA Applications you could have the same exact paradigm but combine it with a bit more Microservice Architecture such that you would host with app endpoints like these https://content.awesometimemanagment.com/ https://payment.awesometimemanagment.com. But what has remained the same for most these apps is that they still download the html payload from the main app https://www.awesometimemanagment.com/. Let’s remember that this html single page applications are mostly static.  Since Html seldom changes, they are the perfect candidate for large enterprise apps to be placed on edge nodes with CDN like Cloudfront, Akamai or Azure. The Html Apps can be extension-less and still be served from a CDN. The HTML apps can directly call the appropriate API apps. That way if you have a globalized application, the browser can quickly download the html from the nearest CDN. The browser then renders the DOM and thus determines which other content pieces like javascript contents need to be downloaded. Remember that we have a limited number of chances to optimize our applications. The faster the Html payload gets downloaded the faster the browser can initiate the javascript, image sprites and CSS content pieces. Figure 1 demonstrates how the traditional MVC apps typically operate by first issuing a Get call against the Parent Web App. Figure 2. Demonstrates how an SPA app can skip issuing Get calls against the WebApp as its first order of business.

Figure 1: Typical Data Flow for an MVC App


MVC App Web App Architecture

Figure 2: Typical Data Flow for an SPA App

SPA App Web App Architecture

 

Comments are closed