What are Single-Page Apps?

Nov 22

A single-page app (SPA) is an application that you can access from a web browser. Unlike a traditional webpage or a multi-page app, a single-page app allows you to access all its features on a single page.

To understand what a single-page app is, first we will look into the building block of the web: HTML files. HTML (Hypertext Markup Language) files are documents that hold everything that you see in a web browser.

In a typical website, each web page is contained in one HTML document. Whenever you want to see a new web page, you'll request an entire HTML file from the website's server.

In a single-page app, the entire HTML file is not reloaded. Whenever you interact with a page, only the content changes. The entire HTML file is not reloaded, giving a single-page app its "single-page" appearance.

The content that you see on an SPA is generated by Javascript files.

Why build a single-page app?

Seamless user experience, faster load time, and faster development time are the benefits of building a single-page application.

Seamless effect

From a user perspective, a single-page app provides a seamless experience. This is because the web page does not reload each time new content is loaded.

You can see that at work when using Gmail. When you click Inbox, Sent, or any other tab, only the content changes. The rest of the page remains the same.

Faster load time

A single-page app does not reload the base HTML document each time new content is requested. This speeds up the load time of a web page. An SPA can also be designed so that its content is stored close to the users' location. This is possible with data centers called content distribution networks (CDNs). CDNs can further enhance the load time of an SPA.

Advanced caching

A cache is a software component that stores data in a user's computer. When data is cached, this piece of data is retrieved from the user's computer instead of being retrieved from a remote server. This decreases load time.

Additionally, cached data will allow a user to use a web application when offline (although with limits). An example of this is when you can continue to use Google Docs without an active internet connection. Editing is still possible although an internet connection is needed to save changes.

Faster development time

Fewer pages need to be built and tested for a single-page app. This reduces the development time.

Additionally, many Javascript frameworks exist for building SPAs such as Angular, AngularJS, ReactJS, and Vue.js. Frameworks reduce coding time and consequently the costs of software development.

Ideal for web apps that require rich user interaction

Because it provides a faster and more seamless user experience, an SPA is ideal for web apps that users constantly interact with.

Disadvantages of a single-page app

Most things come with a tradeoff. While SPAs offer some amazing benefits, they can also cause problems on the development side.

To index a web page in search results, search engines like Google use computer scripts called bots to "crawl" the web. These bots cannot read content generated by Javascript (since they can only read the content of the template HTML). This makes search engine optimization (SEO) more labor-intensive for SPAs.

There are several ways that a single-page app can be optimized:

Write descriptive titles and descriptions for each page. Google can read and index these "meta-content" so that they can be ranked as relevant for search queries.

Write a separate URL for each view. Instead of multiple pages, a single-page app has multiple views. From an SEO perspective, the URL should change each time a reader switches view. Google will use these URLs as indexing signals.

Write a meta-tag for social media preview. Social media sites like Facebook and Twitter use bots to generate a preview of the links shared on their platform.

By default, social media bots will get previews from the bare-bones HTML of an SPA. No matter which view a user shares, the preview on social media will be the same: a non-descript HTML layout.

To get around this problem, an SPA can be built with social media metadata. Social metadata is typically made of a title, description, and image.

Writing social metadata may be extra work, but it does increase the likelihood that someone will click on a link.

Trackers for analytics need to be updated manually

It is not possible to track which page views get visited when you use the default Google Analytics tag. This is because the default tag can only track activities when new requests are made. With an SPA, a full request is made only once: when the SPA is first loaded. The rest of the content is loaded dynamically.

Google has set guidelines on how to write the analytics tag so that it can capture virtual page views.

Attackers might exploit JavaScript vulnerabilities

JavaScript has vulnerabilities that attackers can exploit to run several attacks. These attacks can include:

Cross-site scripting (XSS): XSS happens when an attacker attempts to inject malicious code into a website through points of vulnerability. An example of this is an attacker posting malicious code using the comment section of a page.

Fortunately, it is possible to escape special characters such as ampersands &, less than <, data-preserve-html-node="true" and quotes ". Escaping special characters will prevent malicious scripts from executing.

Cross-site request forgery (CSRF): For example, a legitimate user is logged into a website A. They then open another page and inadvertently click a malicious link. The attacker then uses the legitimate credentials to perform unauthorized actions on the user's account that is logged into website A.

API data exposure: An application programming interface (API) is a type of software that connects two different software. APIs are used on a single-page app to retrieve data and business logic.

An API may expose more data than is needed for an action. To prevent the exposure of sensitive data, the application using the API (the client) uses filters.

Attackers may directly attack an API to access sensitive data that a client would otherwise filter out. To safeguard against API attacks, a single-page app can use a certificate called an SSL to authenticate every user interaction.

Extra coding needed for page views and scroll position

By default, the URLs for a single-page app do not change since everything is seen from the same page: only the views change but not the URL.

This can create a problem when a user wants to share or bookmark a specific view.

Developers can add a configuration called .htaccess so that an SPA's URLs change with each view. .htaccess may not work on some server configurations.

It is prudent and wise to hire experienced web developers when dealing with the nuances of an SPA.

You may also need to use a history or navigation API so that users can use the back button.

Is a single-page application right for you?

These are indicators that a single-page application (SPA) is the right platform for your brand:

Your application requires complex user interactions.

Most of your end users use up-to-date web browsers. (SPAs do not work well with outdated browsers.)

You can work with developers who know SPA frameworks such as Angular, React, and MeteorJS.

You are optimizing for mobile users. single-page apps are dynamic platforms that perform well on mobile browsers.

Bal Marsius