Navigating technology landscape

Single-page applications are web applications that rely predominantly on Javascript to render pages on browsers. They require static content like HTML, JavaScript, and CSS to render the content to the users. Here the javascript libraries do the bulk of the heavy lifting process of processing information and creating a page for the end users. This is a serious departure from server-side technologies where the onus of creating content lies solely with the servers.

Traditional Server-side technology model

Before dwelling on SPA let us take a moment to understand how the traditional server-side technologies work.

1. The user types in a URL in the browser.
2. Browser sends the request to the web server
3. The web server responds with the page HTML, JS, and CSS which is generated on the server
4. User then performs some more action
5. Browser sends the request to a web server based on the action
6. The web server processes the request and sends back HTML, JS, and CSS again

In traditional server-side technologies, the web server plays an important role in creating the content that is displayed on the browser. The browser is responsible for displaying and asking for new content from the web server. The model suffers from significant inefficiencies.

Inefficient

This model is very simple but inefficient. The web server is responsible for creating the static content for each incoming request. It must recreate the entire page even if only a small section of the page might have changed. The constant recreation of the page’s content leads to increased CPU consumption.

Increase bandwidth consumption

HTTP is a stateless protocol, which means it needs a limited memory footprint to process a request. However, consumer applications are rarely stateless. They need to be reminded of the previous information shared by the web server. Think of it as talking to a person whose memory is limited to a few sentences. To communicate you will also have to provide him with the information conveyed in prior conversations. To overcome this issue, either the web server needs to maintain state information or the browser needs to keep resending important bits of state information to the server, which leads to increased bandwidth consumption.

Poor User experience

A web application needs to frequently connect with the web server to display new information. Due to the round trip, there is considerable delay in displaying the desired content. While the server is busy preparing page content, the user needs to wait. The user may consider the page to be unresponsive if the rendering takes too long. The constant wait times for displaying new content is a bad user experience.

SPA

Let us look at how SPA works and what makes it suitable for modern web applications.

1. The user types in a URL in the browser
2. Browser sends the request to the web server
3. The web server responds with static components like HTML, JS, and CSS
4. Using HTML, JS, and CSS, the browser starts to create the UI
5. If the browser, needs more information to display, it makes an API call to retrieve information from a web server
6. The web server only responds with the asked information in either JSON or other compatible formats
7. Based on the data received from the web server, the browser updates the UI of the application

In the case of SPA, the responsibility of displaying data is taken on by the Browser. The web server’s role is to provide information so that the browser displays the information. This enables to segregate the processing between web browsers and servers.

Better User experience

The user experience improves as he no longer must wait for the page to load. The only time the page renders is at the beginning when the user types the URL in the browser. Once the static contents are downloaded, the page URL rarely changes. As a result, the user does not encounter frequent page loads.

Low Bandwidth

Due to the segregation of responsibilities between the browser and Server, the Server is responsible for providing only static contents and data. This means the heavy html content need not be passed in between every communication. This leads to lower bandwidth consumption.

Improved CPU & Memory Consumption

The main job of the web server is to provide data. Since it is now free from creating the HTML content, more CPU is free to process incoming requests. The web browser now maintains the application state, thereby freeing up crucial memory resources.

Responsive UI

Due to improved efficiency, the pace of communication improves tremendously. This helps get data faster and with less lag between calls. The application responds to the user’s actions much quicker.

However, it is not all rainbows and sunshine in Single page applications. It does suffer from some drawbacks.

JavaScript Dependency

SPA needs JavaScript to create the page. In most modern browsers, JS is allowed to be executed. But if for some reason the user blocks all JS execution on the browser, the SPA will stop functioning and the user will not be able to see your application at all.

Security Challenges

SPA relies heavily on JavaScript to display information to the user. JavaScript is very accessible to the browser and the end user. This makes it easy to decipher the underlying algorithm. It opens avenues for manipulating the code. A malicious user can now inject code and trick the application into doing something it was never intended to do. Thus, if a SPA needs to display sensitive information, proper authentication must be implemented on the web server before every user action. This will ascertain that sensitive information or functions are only accessible to authorized personnel only.

Search Engine Optimization (SEO) challenges

SEO was built in an era where applications were served out of the web servers. Hence, they were built to crawl the HTML content and scrape information from the sites. It was used to identify key contents and the navigational patterns of the page. This information was then used to optimize the search capabilities of the engine, thereby making it accessible to users searching for the content. They were never able to process the JS contents and often ended up discarding the JS. This present-day world of SPA relies heavily on JS to create the page and define the navigation patterns for the page. This presents severe challenges to web crawlers as they were never created to work on JS.

SPA frameworks Learning curve

It is not easy to work with SPA frameworks or libraries. There is a steep learning curve associated with each framework. It takes a considerable amount of effort and time to work with SPA applications. This also presents challenges in getting resources for completing work on time and with good quality.

SPA may suffer from some limitations. However, the benefits one gets out of such applications are enough to get over the limitation.

Key Frameworks

Enough dwelling on the Single Page Applications. It is time to get acquainted with some of the libraries or frameworks available

React

A very popular framework was developed by Facebook. A key feature of this library is the virtual DOM which makes it efficient in displaying and updating content on the page. Since it is available as a library it is highly flexible to accommodate other libraries with it.

Angular

Another popular framework was developed by Google. It has a full suite of tools that it provides out of the box to the developers. It significantly reduces the time to get started with an application. It enables segregation between displaying data, styling, and the behind-the-scenes logic to manipulate data.