What is an SPA?

SPA stands for Single Page Application. You have probably used one today!. This is a relatively new concept but one that is gaining rapid traction in the world of Web development.

An SPA uses one web page, which is usually relatively simple in structure, and this page holds a dynamic framework which actually provides all the user content .

You can see from the drawing above, an SPA has everything on page , and most importantly the actual web page never reloads, making it a smoother experience for the user.

By contrast a multi page site will reload whenever you click a link, login, or enter data into any sort of form or input field.

Advantages of an SPA

The main advantage to an SPA is that is is faster and more responsive than a normal multi page site. It feels more like a mobile app than a traditional webpage, and that is another key advantage. SPA’s tend to work well on mobile without too much effort.

If you have poor connectivity, an SPA can still feel fast, you don’t get the dreaded delay as you wait for the page to load – it’s already there.

You also don’t need extra queries for downloads, it’s all done in one hit, saving you data. This is especially important if you’re browsing a site on mobile data.

Disadvantages of an SPA

Surely it can’t all be good or every site would be using SPAs? There are some disadvantages too.

Youy must have Javascript enabled for an SPA to work, as it uses AJAX to get data from the server. Ajax is asynchronous javascript, and it is a pre-requisite for an SPA. Most people will be using a browser with Javascript enabled anyway, but not all.

Security is also not as good on an SPA, it is easier for hackers to use methods such as code injection to gain access to your data. However this is constantly improving and if the site is well designed and uses a back end framework like Laravel, it shouldn’t be too much of a concern.

SEO – it is widely thought that Search Engine Optimisation is not so good on an SPA as your pages are rendered in the browser, and search engines such as Google or Bing prefer server generated pages to index.

Going back – the back button often will not work on an SPA, without extra plugins installed by the web developer. Even then it can be a buggy experience.

Real World Examples

These things are everywhere! If you goto Gmail in your browser, you are on an SPA. Facebook, Netflix, Pinterest – the list goes on.

It should be obvious that SPA’s are a good thing in general, they provide a fast, fluid experience for the end user. There are some things to be aware of, but a well designed and implemented SPA is a joy to use.