Security, Useful Tips, Web Development,

The ABCs of Single Page Applications

3 m read
QArea Team
QArea Team Marketing Manager
March 1, 2018
Share on
Reading Time: 3 minutes

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!

Tags
    Share on
    Privacy Preference Center
    Your Privacy

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    Strictly Necessary Cookies Always Active

    These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

    You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

    Performance Cookies

    These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

    All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

    Cookies used

    Google Analytics
    Functional Cookies

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    Cookies used

    Test Second Test
    Targeting Cookies

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    More Information

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.