Single Page Application (SPA)

• • •

GDS 089B, Mission College

What is a Single Page Application?

• All the web site content is on a single web page.
• When the data on the page changes, there is no need to reload the whole page.
• Instead, we can retrieve only the changed data, not the whole page.
• This makes the page feel more like an app.
• This can make the page feel more responsive and snappy.

Examples

• Gmail
• Google Maps
• Social Media (Facebook, Twitter, Instagram, Reddit)

Advantages

• Speed: After initial load, the app will run more quickly.
• Initial load may take longer, however.
• User experience: The page looks less like a web page and more like an app.
• Responsive

Disadvantages

• May initially load more slowly if there is a lot of data in the app.
• This can be mitigated by loading data from the server only as it is needed.
• Linking to specific content may be difficult.
• There can be ways around this.

The Simplest SPA

• A web site that has several sections.
• You can view only one section at a time.

Where will the data come from?

• The data can be built into the page HTML.
• The data can be built into the page JavaScript.
• The data can be retrieved from a server, as needed, probably using JSON format.

How can we bookmark specific content?

• Permalink
  • A special link that goes directly to a specific section of the app.
• URL Hash
  • Changing the hash does not force a page reload, so you can safely make links to all sections of the app using the same base URL but different hashes.

The Process

• Make a web page that has several sections.
• Either provide all the data for all the sections, or provide a mechanism (AJAX and JSON) for obtaining the needed data on demand.
• Make only one section visible at a time.
• A search engine page may need only two sections:
• One for the search form.
• The other to display the search results.

Frameworks

• React
• Angular
• Ember
• Vue
• We may look at one or more of these later in the semester.

Examples

• This Presentation is an SPA.
• Burger Project
• Math
• States
• Icon Grid
• Colors
• JavaScript Concepts