What is a Single Page App?

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

What is a Single Page App?

There are two keywords here — Single Page and Application. Let’s break them down so you understand what they both mean

Application

An application is a piece of software designed to fulfill a particular purpose. They are also called widgets.

By this definition, the components we build so far are applications because each of them is designed for a specific purpose:

  • Accordion helps show and hide content
  • Tabs helps show and hide content in a different way
  • Carousel lets users browse through available images by sliding through them
  • Datepicker lets users select a date
  • Typeahead helps users complete what they are typing

Websites are also applications because they were designed to provide users with information about something.

Single Page

Single Page here means users can use the entire application on a single page — even if they clicked a link to “another page”.

This can sound confusing, let’s break down what happens.

When a user clicks on a link in a normal website, they get directed to another HTML file. You wait for a while and the page reloads.

A good example is Google.

In Single Page applications, users do not get directed to a second HTML file when they click a link. They stay on the same HTML file instead. The HTML gets changed with CSS or JavaScript.

One good example is Twitter. Notice the sidebars remain unchanged even though both the URL and the content changed.

The simplest SPAs can be created with pure CSS.

More complex SPAs require you understand how to use the URL with location and history interfaces.