BLOG
CATEGORIES
hal-gatewood BLOG

The pros and cons of Single Page Applications (SPAs)

Single Page Applications are the next generation of website and application development. A lot of companies are now transitioning their legacy sites and applications over to SPAs, including Facebook, Gmail, Google Maps, Twitter and Trello.

Let’s take a look at some commonly known SPA advantages and disadvantages with technical insights provided by our developers so you can decide if this method of development is right for your organization.

What is a Single Page Application (SPA)?

Traditional websites (or Multiple Page Applications) are based on a standard homepage/index and a menu with links to other pages. When a new link is clicked, a request is sent to the server to download a new HTML page.  Data elements, graphics and other information is pulled from the database and then returned to the client-facing website where the page is rendered. This happens each time for every individual page a user accesses.

Multiple Page Applications

Multiple Page Applications-

On a Single Page Application, data is presented to the user dynamically as they scroll through and interact with the site. This is possible thanks to JavaScript running inside the browser. Once the page loads upon the initial visit, it doesn’t have to wait for any other content to download, regardless of the actions taken by the user during the session.

SPAs are built using a combination of HTML, CSS, AJAX and JavaScript frameworks such as React, Vue, Angular, and Ember.

Single Page Applications

Single Page Applications-0

Single Page Applications advantages

There are many reasons for the current popularity of Single Page Applications. Because they take advantage of repetitive layouts and act as “content on demand” applications, they are much more efficient, use less energy, and cost a lot less than traditional sites.

Multiple Page Applications are constantly sending and receiving HTML download requests back-and-forth between the server. This method is extremely taxing and can cause slow page loading times. A SPA bypasses this constant sending and receiving by having everything downloaded upfront when you access the application. This makes it easier to create a better user experience since developers can add more complicated features.

In addition to increased efficiency and affordability, here are three more of the main reasons SPAs are having such a stellar moment in the tech world…

From a technical perspective, both SPAs and MPAs are constantly loading the data from servers. However,  in single page applications, the higher speed and efficiency is achieved with the help of JSON. Having SPAs doesn’t necessarily mean simultaneous HTML and data loading. More often, the main data are downloaded after the initial loading of HTML, CSS and JS. 

1. Speed

One of the biggest Single Page Application benefits is speed load. SPAs are much faster than regular sites because they are able to load new information into a single page upon request as opposed to having to link to several other HTML pages within the architecture of a site.

Because the site is not constantly sending requests to a server and having to wait for a response and the downloading of a new page, a Single Page Application is easier to use. It provides instant access to all the features and functions of the site with no delay.

The speed issue can be viewed in two different ways. When it comes to initial loading, this process lasts much longer on single page applications as the huge JS data volumes are loaded. Moreover, the mobile browser will significantly slow down app loading, as it needs to parse and interpret these JavaScript data. Especially when a smartphone processor is not so powerful.

At the same time, sometimes it is actually faster to navigate between pages on single page application due to caching and minimizing data volumes. Even if a user needs the uploaded data, an application will download just the missing parts. So, the whole process seems quick, if not particularly immediate.

2. Caching capabilities

Caching is another advantage to Single Page Applications. SPAs only have to request data from the server one time, upon initial download. Then the site can be accessed even if there is a poor internet connection or if the user is offline.

There are several important issues in understanding the caching process. First of all, even if it is a landing page and a browser downloads the data only once, at some point it will check if the cached data have changed or not. When something changes, an application restores the lacking information by downloading it.

In any other case, an application has to send requests to the server to update the data. It can either look like the refreshing of cached data or just like a spinner. 

Moreover, multiple-page applications use cached data as well. Thus, the download speed can be also quite high, but it primarily depends on the application implementation or customer’s business needs.

3. UX

Single Page Applications also provide a better overall user experience. Many users complain about having to click through multiple links and menus to get the information they are looking for. With SPAs, all the user has to do is scroll. This feature makes SPAs especially perfect for those who primarily use their mobile devices.

UX industry benefits from SP application in several aspects. First of all, SPA gives access to the page without or with poor internet connection and as a result, the possibility to work offline. Secondly (this is, probably, the most convincing argument to choose SPA), the interactivity on single page applications is much higher. So, it creates the impression of working with a full-scale desktop or mobile application. 

Generally, the UX design looks more appealing to an end user than an MPA. It must be mentioned that a single page application doesn’t necessarily mean no links or no menus at all. In fact, on some complex SPAs there are several different pages with valid navigation between pages. Numerous links and menus, in this case, can be actually preserved.

Single Page Applications disadvantages

SPAs are not a be-all/end-all solution for every company. There are many Single Page Applications challenges that cause some organizations to choose traditional Multiple Page Applications for their sites instead.

From a technical perspective, there are 3 main SPA disadvantages:

1) It is much more difficult to implement SEO techniques on SPA.

2) A lot of small issues need to be solved manually. 

3) With large JS data volume, the pages download can be low-speed which significantly hurts the user experience.

1. Search engine optimization

One of the biggest drawbacks is when it comes to Single Page Applications and SEO. Because search engine optimization depends on HTML content, the fewer pages a site has with unique URLs, headings and keywords, the lower the site is going to rank. Having just one single page is a detriment to search optimization. Of course, if your site or application is a private or company intranet type accessed via a personal login, then SEO is not that important, and a SPA could still work for you.

To be more precise, client-side rendering results in various SEO problems, as the search bot can’t see the page content. It’s possible however to solve this issue by creating a separate page for a bot, for example. Moreover, new search engines are gradually learning to render the page as a user would. But SERPs are still far from ideal, because, firstly, not all the engines are capable of doing this, and, secondly, some SPAs are too complex to index them correctly.

2. Website stats

Another thing to consider is how a Single Page Application will affect your website statistics. You won’t be able to tell which page or content is most popular, given the fact that you only have one page. Google Analytics, for example, records data from various pages being downloaded on a site. If you want to track activity on a SPA, you’ll need to create your own analytics solution.

Statistics issue is not actually as catastrophic as it seems. It just should be performed differently with the help of manual tools. The main point is that the development team consider this peculiarity and use the tools correctly. Even single page landing pages can be tracked manually.

3. No way back

Also, consider the fact that most internet users are accustomed to hitting the “back” button when browsing a website. With a Single Page Application, this step would take them out of the app completely and could cause them to become frustrated with the site and possibly even stop using it.

In fact, it all depends on a SPA type. When an application is complex enough, they certainly have a so-called “way back.” It’s not so easy, but not impossible. The possibility to move backwards through the page history can be implemented even on single landing pages.

Conclusion

SPAs may be one of the hottest tech trends, but whether it is right for your organization or not will depend on your particular goals and business processes. That’s why when you need something more traditional, you can use multiple-page applications. In case you’re looking for web apps that look more like native apps, you’ll probably want to use PWA. They are quite similar to single-page applications, but include opportunities to work offline and with a closer look to desktop or mobile apps.

The best thing to do is to simply weigh the SPA pros and cons and then consult with a highly skilled development team (like us!) to determine the next steps. Just remember…it’s always a good idea to put yourself in the position of your target user in order to determine the kind of experience you truly want to provide to your website visitors.

Let's get rolling!
Get a chance to build the next big thing with our development team
Have a project in mind?
We'll help you develop this idea into a great solution.
Give us a shout!