The ABCs of Single Page Applications
Security, Useful Tips, Web Development,

The ABCs of Single Page Applications

3 m read
QArea Team
QArea Team
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!

Categories

Recent Posts

  • Go Community: The Best Golang conferences of 2018 (and a few to look out for in 2019)

    Read more
  • From Gaming Videos to Redefining Instant Messaging: Quinn Hu's Long Path to Serial Entrepreneurship

    Read more
  • 7 Reasons to Truly Love Microservices

    Read more
  • The Best Languages for Microservices

    Read more
  • QArea's Year: Summing Up 2018

    Read more
  • What's New in Golang 1.11: Release Notes Overview

    Read more
  • Why You Should Start Learning Dart and Flutter Right Now

    Read more
  • Golang Vs Python: Which Language Is Best for AI Programming

    Read more

Subscribe

Yes

Tags
    Share on
    Close icon
    Privacy Preference Center