You can just call us +4 143 508 0794

QAREA BLOG

home / blog / The ABCs of Single Page Applications

What's new in Golang 1.10: Release notes overview

February 20, 2018

Understanding The Pareto Principle and How to Use it in Software Development

March 7, 2018

The ABCs of Single Page Applications

March 1, 2018
pareto rule in software development
Single page application - what is it

In 2018, everyone is talking about web applications. Actually, it all started earlier, when Google created a bunch of web services for their products. Gmail, for instance, is a single page application which clearly shows the advantages of web apps over desktop products. It doesn’t require installation, can be used on many devices simultaneously and is easy to update.

What is a single page web application?

SPA are web applications that work in the browser and don’t require a page reload. The information rewrites itself using JavaScript while the page stays the same. It is usually developed with Ajax, HTML5, and advanced JS frameworks such as Angular, React, Meteor.js.

single page application how it works

Just a few years ago Single Page Applications were a game-changing technology. Now, they are becoming increasingly popular. To understand their enormous impact on web development, it is enough to have a look at the examples which represent best practices of a single page application.

  • Gmail — when you click on a button or a link, the page doesn’t change. JS code rewrites the information and brings forward the message or folder you requested.
  • Google Docs — All changes are real-time. The chances of progress loss are zero thanks to a consistent auto-saving feature.
  • Twitter — You can do basic activities (tweet, retweet, follow, upload a picture, etc.) staying on the same page.

Benefits of a single page application

We already discussed that SPAs provide higher usability, speed, and accessibility than desktop apps. But these are not the only advantages single page applications have to offer:

  • Easy to test and debug — SPA network operations are easy to monitor with Chrome;
  • Code written for an SPA can be used as the backend code for a mobile application;
  • Flexible UI design – it is easier to make changes in SPA’s front-end than in a typical desktop app;
  • No need to use storage-requests, cookies, and form-submissions for state tracking;
  • Logo, header, footer, and banner load just once for each session which drastically increases speed and productivity.

However, there are some challenges developers and business owners face when working with single page application architecture.

SEO-optimization

A while ago, Google’s index totally ignored JavaScript-served content. The reason for this is that the search engine considers a page only if there is a valid link leading to it. However, with SPA, the content is rewritten without a change of the URL, making it harder for optimization algorithms to recognize the page as relevant.

Security testing

The biggest concern is a XSX (Cross-Site-Shipping) Attack. It occurs when an app allows hackers to inject or execute arbitrary JS code on your page.

What about Multi Page Application development?

There are “traditional” web applications that work with more than one page. Every action renders a new page from the server. These apps are complex and multi-functioning, therefore, they are used for bigger projects (like e-commerce platforms and online banks).

MPA loses to SPA in few aspects:

  • It is larger than SPA and contains many UI-levels;
  • Since it is more complex, it is more difficult to develop. However, AJAX simplifies the process of data transferring between browser and server;
  • MPA project requires careful navigation development.

How to determine whether to develop an SPA or MPA

It all depends on the nature of the project. If your goal is to create a website for a single purpose with limited functionality (you need to present one product or service and enable simple user interactions), then single page application benefits are undeniable. If you have a complex project which requires an extensive number of functions, go for the multi-page option.

Another solution is to use a hybrid approach — a single page application with synthetic pages built with URL anchors. This enables developers to add more functionality with less complicated navigation. However, the hybrid approach is controversial — some developers think it combines best from both approaches, others think it only highlights the disadvantages of each.

In QArea, we thoroughly analyze each project, review business goals and strategies, and estimate the risks before we get down to business. The choice of the solution is based primarily on the marketing needs and business logic. If you are interested in implementing SPA or MPA in your business (or can’t choose between these two technologies), feel free to contact us. We are glad to help!