Single Page Applications and Why Should You Choose Them?

Single Page Applications (SPA) are catching up fast among website users for their fluid experience. But users may be oblivious of the technology because the user is never the one who usually thinks of electricity when turning on a light bulb but the technology enabler. Likewise, it is conducive to know what a Single Page Application is and how they work if the seamless user experience is a top business priority for your web applications.

3.6.2021

What is a Single Page Application?

A single page application (SPA) seamlessly and dynamically loads or updates components, elements, and resources in a web page on a single HTML-based page within the browser as the user is interacting. Single-page applications do not require reloading any page as they run, like in traditional multi-page applications, but gives the user a fluid illusion of a multi-page website.

Examples of Single Page Applications

Gmail, Facebook, Instagram, Netflix, Google Maps, and Pinterest are famous examples of single-page applications. Recall, your browser remains on the same web page in Gmail when you click through emails in your inbox, and you never switch out of the Facebook news feed page when you click on various buttons or you scroll through to view new posts.  

Visit https://framian.fi and inspect the page elements using the browser Developer Tools. The HTML page that gets downloaded to your browser is the single page on our website. If you click on the ‘Services’ tab on the home page, you can see that you are staying on the same HTML page, and only parts of the page rerender in response to your request. 

But, if you visit the New York Times website, a multi-page application, and click on a news title, you can experience reloading a new HTML page (notice the reload icon on the top-left side in the browser). If you inspect the page with Developer Tools, you can see the browser has now fetched a brand new HTML page and is downloading all the resources such as images needed to view the page to the browser.

We know how to differentiate a SPA, and MPA lets us understand how a Single Page Application is working behind the screen.

How do Single Page Applications work?

Single-page applications interact with the user by dynamically rewriting the DOM elements on the existing HTML page to follow simple steps.

  1. The browser directs the user request to the server for an HTML page.
  2. The server replies by serving the HTML page to the browser.
  3. The user views the page.
  4. The user calls a subsequent request. E.g., Form POST.
  5. The application procures data from the server in JSON format and inserts data into DOM.
  6. The browser translates data to HTML using the templating engine running in your browser and generates the views.

The below diagram illustrates how single-page applications and multi-page applications work differently to user interaction.

Single Page Applications Vs. Multi-Page Applications

Single Page Applications (SPA) Multi-Page Applications (MPA)
Only one HTML page Multiple HTML pages
Content rerendered on Client Content rendered on the server
Page is built up with components, and every component is a Javascript component. The page may be built with components, and the pages are usually constructed using HTML and CSS.
Decoupled front-end Tightly coupled front-end and back-end
Highly responsive user experience Sluggish user experience

Let us now see what benefits you get by choosing SPAs to build your websites and what considerations you should be careful with when choosing a SPA.

Pros of Single Page Applications

1. Linear User Experience

The user does not have to wait for full page reloads every time they click on a navigational link in a SPA because HTML/CSS/Scripts do not traverse back and forth to the server. That saves time as well as bandwidth. So, the user receives requested information faster and smoother.

SPA tools such as Angular, React, and Vue offers features to enable parallax scrolling, transitions, and effects to the application. So, SPAs can give the user a linear and enjoyable experience.

2. Promote straightforward development practices

SPA has a decoupled front-end architecture. So developers can build front-end UI independent from the server-side code. Developers can use similar languages as well as different languages to back-end and front-end. Also, deploying SPAs to production is easier because you have only one index.html file with a CSS bundle and a Javascript bundle that can easily upload to any static content server. Added to that, front-end versioning and rollback are also straightforward. All you have to do is version your build output, automatically applying it to CSS and JS bundles.

Angular and React frameworks have their debugging tools facilitating easy code debug on Chrome browser.

3. Efficient caching process

Upon the application sending a single request to the server, SPA caches all the receiving data efficiently. So, even if you are offline or under a poor connection, SPA can access local data until synchronizing with the server.

4. Ability to easily transition to other applications

Decoupled front-end architecture improves code re-usability. So, SPAs can easily repurpose to build advanced web applications (PWA) and mobile applications (working in all Android, iOS, or Windows OS) without completely rewriting the code.

Cons of Single Page Applications

1. Challenges in Search Engine Optimization (SEO)

Many search engines still have some hard time correctly indexing a SPA or achieving higher SERP rankings. Google recommends using progressive enhancement principles on SPAs to ensure user accessibility over a broader range of browsers. However, still many web crawlers have limitations executing JavaScript when loading data asynchronously, like in SPAs.

2. Security Issues

SPAs are vulnerable to security attacks due to cross-site scripting (XSS) and, as only one web page is loading at the client-side at the entirety of the application’s runtime. So, there is a probability of hacking SPAs by injecting malicious scripts at the client-side. There is also a risk of exposing sensitive data when loading the entire SPA to the user’s device, which developers must not take any chance of even by accident.

3. Inadequate response in legacy browsers

If you aim to reach a broader user base, it is worthy of knowing that some legacy web browsers such as Internet Explorer 8 do not support SPAs. Also, a user cannot experience the SPA features if he/she has disabled Javascript in their browser.

Why and When should you choose SPA over traditional sites?

SPAs are all about serving an exceptional user experience by replicating the browser’s natural environment. The most compelling reasons for choosing SPAs over traditional CMS like WordPress are their blazing fast speed and the ability to work offline. Furthermore, SPAs deliver a linear user experience by making it easy to navigate through the website and find specific components. They also work great on mobile devices by facilitating convenient and uninterrupted scrolling. 

It would be best to consider using SPAs when your application consists of rich user interfaces with many features. They are ideal for developing dynamic websites with small data volumes. Furthermore, a single-page app acts as a perfect base for future mobile app development.

Why choose us for your project?

We’ve been huge advocates of SPA sites, and all of our clients have always liked the results. SPA sites allow you to pack impressive functionality into a lightweight application. The superior UX makes SPAs ideal for porting highly interactive desktop applications and creating native-like experiences on the web.

All in all, SPA is an awesome tech. It offers many advantages, and you can easily overcome its few cons (especially with SEO in mind) with a qualified development team.

That’s why Framian recommends going the SPA way for the majority of our new clients.

Contact us here to discuss your needs and how we may create a project like no other.

Steve Peltonen
Framian Oy

Book an online meet up

🕑 30 min
📅 Monday - Friday

We are more than willing to answer any questions you may have. Book a 30 minute online meet up by selecting a suitable time for you. Fill out your email and get the web conferencing details.

Index

© 2023 Framian Ltd. Agree that you will not use these products for any purposes prohibited by law, including, without limitation, the development, design, manufacture, or production of nuclear, missile, or chemical or biological weapons.