What You Need to Know About Single-page Apps
Web applications are taking over the role of desktop apps. If you have thought about building your own web app, you probably have heard about single-page applications.
This post walks you through the things you need to know about single-page apps.
What is a single-page app?
A single-page application (SPA) is an app that switches views instead of loading an entire screen when a user interacts with it.
To understand what a single-page app is, first we will look into the building block of the web: HTML. 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. In a single-page app, there is only one HTML document for multiple pages.
The content that you see on an SPA are generated by Javascript files. Javascript is a programming language that enables users to get different content on a web page by clicking buttons and links.
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, 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 are 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 users' computer instead of being retrieved from a remote server. This increases load time.
Additionally, cached data will allow a user to use a web application when offline (albeit with limits). An example of this is when you are able to 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
More difficult to optimize for search engines and social media
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 a number of 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. A single-page app 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 a number of 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 vulnerabilities. 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.
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.
Single-page applications offer a great advantage. But it is not a magic solution. Do you need help deciding if an SPA is right for your project?
Schedule a meeting with our Chief technology officer (CTO).
