First things first, you are currently on a Single Page Application. This shouldn't surprise you, nowadays many sites are so called SPAs.

What is a Single Page Application

A Single Page Application (SPA) is currently high in trend in the web and mobile app development and stands for a way how an internet application is built and how it works.

A key feature of a SPA is the loading mechanism of the page.

While "normal" web pages have to reload the entire page with every click, a SPA loads the entire page only once on the initial call. Once the page is loaded, it has all the relevant data to get from one subpage to the next. This in turn has the advantage that no data has to be reloaded from the server (more precisely no HTML, CSS or JS) and this in turn means that the page never has to be reloaded. For the visitor of the site this allows a smoother transition between the individual pages. The loading speed is also a considerable added value.

Long story short, single page applications improve the customer experience by immediately providing the data relevant to the page. Applications such as Gmail, Google Drive, Facebook and even GitHub use this tech stack to provide the best possible user experience.

The developer writes the application in the TypeScript or JavaScript programming language and usually uses a framework such as Angular, React or Vue.js. Angular is and is developed by Google and is one of the largest and most stable open-source web application frameworks. React, in turn, is provided by Facebook, new Meta, and is most popular as of January 2022.

In contrast to the Multiple Page Applications (MPAs), the page is only fully rendered on the client the end device, that is, in your browser. This requires a little more processing power on your device, but is no longer a problem with today's devices. So don't worry that your device runs slower or that it consumes more battery. This is because browsers are tailored and optimized for SPAs.

Scenarios of use

Thanks to the decentralization to the devices of the visitors, a SPA is suitable for an infinite number of visitors, let's just look at the example of Facebook, so we immediately have a solid scenario in the real world.

Thanks to short latency, it is also suitable for smaller games and animations. Also, with the advent of HTML5, Canvas and WebGL, complex animations can be integrated quite easily, which in turn can greatly enhance the user experience.

Thanks to the browser's cache and storage, the SPA can also be used for an offline application. It still depends on the use case, but in principle a SPA can be used completely offline.

Advantages of SPAs

Some advantages we have already mentioned at the beginning, here are some more in detail.

1. One-time loading of files

On the first call of the website your browser loads all relevant data from the server. Once they are fully loaded, the browser can start rendering them and displaying them to you on the monitor. Once the data is loaded for the first time, you can navigate the page as you like without reloading additional data (HTML, CSS, JS) from the server. The interactions of the page can run smoothly and be displayed visually, which in turn enables a better customer experience.

2. No additional server calls

As we know now it does not require additional server queries between the navigators of the page. This not only saves traffic, but can also be very helpful exactly when the internet is bad. The less data has to be loaded the faster the page works.

3. Fast Front-End

Since the SPAs are almost a bit too fast when used correctly we often add a short animation between the pages (transition). This makes switching back and forth more pleasing to the eye.

4. Improved User Experience

With a classic Multiple Page Application, each click downloads the entire page from the server and loads it from top to bottom. You may remember this from the beginning of the internet. The visits an Internet page and it is loaded in strips from top to bottom. Is indeed thanks to faster Internet no longer so bad but the principle is still the same.

In the SPA, on the other hand, the initial call of the page takes a short moment longer, we are talking about a maximum of 1-2 seconds, but then each navigation of the page is lightning fast. New content of the page can be replaced or reloaded selectively without loading the entire page.

Disadvantages of SPAs

Of course, there is a hitch here too, where not? But do not worry the advantages outweigh the disadvantages.

1. JavaScript must be enabled

This point certainly had more relevance in the past, but still has its justification. In your browser must be mandatory JavaScript enabled, otherwise nothing works, the SPA a pure JavaScript application. With JavaScript, code can be executed in the browser, which is potentially a source of danger. According to some estimates, still about 1-3% of all internet traffic has no JavaScript enabled, negligible. 

2. For a clean SEO it needs a little more logic

SEO and SPA are not exactly close friends. The search engines index each page and read out among other things so-called "meta" fields. There is information such as title and description of the current page.

Now, however, the page is rendered with a SPA only once at the initial call, which means the "meta" fields always remain the same when navigating on the page. Thus, the search engine can not fully index the page. Fortunately, there are already established solutions for this. With some additional logic, the "meta" fields can be adjusted dynamically, so that search engines can start their work as usual and index the page. By the way, the same problem exists when sharing a URL in a social media channel such as Facebook or Whatsapp.

3. More vulnerable to memory leaks

Almost exclusively all SPA frameworks rely on a Reactive Extension Library for JavaScript (RxJS), which takes away and simplifies certain implementation issues. The danger now with this library is that it is used incorrectly and so-called memory leaks are caused. Since the SPA runs in the browser of your device and is not reloaded during the duration of your visit, it can be that more and more memory is needed, because certain program parts were not cleanly deactivated or "unsubscribed" and in the background as dead code in the memory just lying around. Also for this there are tricks and tools to avoid possible memory leaks or to determine.

4. Cross-Site Scripting XXS

This affects not only SPAs, but comes here especially to bear because JavaScript is certainly activated. There are different types of attacks like Reflected XSS, Stored XSS, DOM-based XSS, Dangling markup injection or Self-XSS. Let's imagine the site has a blog with a comment column. A potential attacker could now write a comment on the page that contains malicious HTML. The next visitor to the page will automatically load the comment and also the malicious code, which is not visible to the visitor at first sight. To prevent such cases it is mandatory to scan the comment for malicious content. Or more simply, display only the pure HTM and disable any JavaScript in the comment. All big SPA frameworks like Angular or React have already recognized this and integrated mechanisms to prevent such attacks by default. From that point of view, cross-site scripting is not the top problem, but it is certainly good to always keep an eye on it.

There was something else

SPAs have many more features, to list them all would not be possible here. But still here are four interesting and relevant points.  

1. Offline belongs to the past

Still another won property. Since no data must be reloaded, the application works even if the server is not accessible. Shorter Internet interruptions can be bridged and depending upon like the SPA is developed it can function also completely off-line. Provided it was initially downloaded with Internet. 

2. PWA

Progressive Web Application or colloquially PWA is a SPA which has on top even more functionalities. They literally install themselves into your browser cache and stay there as long as you clear your cache. This means that once you visit a PWA page and turn off your internet, you can close your browser, even restart your laptop or smartphone and still access the page. The actual page is displayed directly, you can also navigate through it and view cached data. There are many more functionalities and there are always more to come, an example, it is possible to send notifications from the server to the devices, for this you do not even need to have the PWA open, you only need to authorize it for this.

3. Installation on mobile device

A PWA can also be installed on the smartphone on the homescreen, so you see an icon of the page. This gives you a feeling of a native app on your device.

4. Playstore Integration

There is even the possibility to include a PWA in the app or play store, so people can find and install your site via store.

Conclusion

There is so much more to tell about SPAs, but it would go beyond the scope here now. There are countless good detailed articles and videos on the internet, check them out if you are interested.

Single Page Applications have proven its right to exist on the internet. As with any technology, there are some key advantages and some disadvantages that need to be solved. Depending on the use case it has to be decided if a SPA is the right choice.

We are determined and believe that we can offer a modern setup to provide all the advantages without any disadvantages. Let us advise you and create with us your personal web application that will catapult your business to the next level. 

Should you have specific questions, do not hesitate to contact us, we can work with you to clarify your questions and help you further.