Single Page Application — Frontend

Introduction

Single Page Application (SPA) is a web application that fits on a single web page and provides a seamless user experience by dynamically updating the content within that page, without the need for full page reloads. This results in a faster and more responsive user interface.

This article constitutes a component of a comprehensive collection of web architecture pattern references.

Single Page Application Frontend
Backend for SPA and Mobile App (Managed Services)
Backend for SPA and Mobile App (Serverless)
Multi Page Application (Integrated Web)
Single Page Application with Worker Process

How it works

Initial Load: When a user accesses the SPA, the initial HTML, CSS, and JavaScript files are loaded into the browser.

Dynamic Updates: Subsequent user interactions, such as clicking a link or submitting a form, do not result in a full page reload. Instead, the SPA dynamically updates the content within the same page using JavaScript, making API calls to the server as necessary to retrieve or update data.

URL Updates: The SPA also updates the URL in the browser’s address bar to reflect the current state of the application, without reloading the page. This allows users to bookmark or share a specific state of the application and enables the back and forward buttons to work as expected.

Components

SPA mainly consists of the following components:

  • HTML, CSS, and JavaScript: The HTML provides the structure of the page, the CSS provides the styling, and the JavaScript provides the dynamic behavior and interactivity.
  • Routing: The SPA manages navigation between different views or states by updating the URL and content within the same page, without full page reloads.
  • API Calls: The SPA makes API calls to the server as necessary to retrieve or update data, without reloading the page.
  • Data Management: The SPA manages data storage and retrieval, including client-side storage (such as local storage or session storage) and server-side API calls.
  • Client-side Template Engine: The SPA uses a client-side template engine, such as Handlebars or Mustache, to dynamically update the content within the page.
  • JavaScript Framework: The SPA often uses a JavaScript framework, such as Angular, React, or Vue.js, to provide a structure for building the application and abstracting away the underlying details of the DOM, API calls, and data management.

Architecture

All the above components can be put into three buckets:

Frontend

There are different solutions and services to host the SPA Frontend on cloud:

  • Static Storage + Content Delivery Network (eg: S3 + CloudFront)
  • VM (eg: EC2)
  • Container Services (eg: ECS)
  • Managed Services (eg: Elastic Beanstalk)

Among the above list, Static Storage + Content Delivery Network is the scalable and cost effective solution. Hosting a Single Page Application (SPA) in Amazon Simple Storage Service (S3) and Amazon CloudFront provides several benefits, including:

  • Cost-effectiveness: S3 and CloudFront are highly cost-effective solutions for hosting static websites, and SPA’s are typically built using mostly static assets.
  • Scalability: S3 and CloudFront are designed to scale to accommodate high traffic volumes, ensuring that your SPA will remain available and performant even during periods of high demand.
  • Global availability: CloudFront has a global network of edge locations that serve content to users with low latency and high throughput, making it ideal for delivering SPAs to users around the world.
  • Security: CloudFront integrates with AWS security services like AWS Web Application Firewall (WAF) and Amazon Route 53, providing a secure and scalable solution for hosting SPAs.
  • High performance: CloudFront uses caching and content delivery optimization techniques to deliver content to users as quickly as possible, improving the performance of your SPA.
  • Easy deployment and management: S3 and CloudFront provide a simple and flexible solution for deploying and managing your SPA, with features like versioning, automated backups, and easy integration with other AWS services.

The architecture diagram for an SPA would look like below:

SPA Frontend

Next – Backend for SPA and Mobile App (Managed Services)

Home

, , , ,
Comments 0