Single Page Application — With Worker Process

What is Worker Process

A worker process is a type of computer process that runs in the background and performs tasks as assigned by a main process. It is typically used to offload tasks from a main process, allowing the main process to continue with other operations while the worker process handles the task in the background.

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

In cloud computing, worker processes can be implemented using messaging or queues. The main process adds tasks to a queue, and worker processes monitor the queue for new tasks. When a worker process finds a new task in the queue, it takes the task and performs the work. This ensures that tasks are performed in the order in which they were received and that multiple worker processes can operate in parallel to handle a large number of tasks.

Examples of messaging systems used for worker process implementation in the cloud include RabbitMQ, Apache Kafka, and Amazon Simple Queue Service (SQS). The messaging system provides a way for the main process to communicate with the worker processes, allowing tasks to be dispatched and results to be returned.

Components

The main components of a worker process can include:

  • Task queue: A task queue is used to store the tasks that need to be performed. The worker processes monitor the queue for new tasks.

  • Task dispatcher: The task dispatcher is responsible for allocating tasks to the worker processes. It ensures that tasks are dispatched to the worker processes in a fair and efficient manner.

  • Worker processes: The worker processes are the actual processes that perform the tasks. They receive tasks from the task queue, perform the work, and return the results.

  • Result storage: A result storage mechanism is used to store the results of the tasks performed by the worker processes. This can be a database, a file system, or another type of data storage.

  • Error handling: A worker process should have error handling mechanisms in place to deal with unexpected errors that may occur during task processing. This can include retrying failed tasks or logging the error for later review.

  • Monitoring and reporting: A monitoring and reporting system is used to monitor the performance of the worker processes and provide feedback to the main process. This can include information about the number of tasks processed, the processing time for each task, and any errors that may have occurred.

Architecture

There are multiple architecture patterns to implement a Worker Process, and those are totally dependant on use cases.

Use Case 1

An example use case can be sending newsletters to all subscribed users at 10 AM.

  • Application has to execute some long running jobs on specific intervals.
  • Application should not use any compute resources if it’s not executing any jobs
  • Jobs should be triggered based some external or internal events or from schedulers

In this use case we can utilize AWS EventBridge Scheduler to trigger the jobs on specific intervals. AWS ECS Tasks can be used to execute the jobs, and once the job is done these tasks will end the execution and de-allocate the compute resources. We don’t require any Messaging/Queue services in this case(will cover that in the next use case).

The following diagram explains the architecture of the worker process along with other important components.

Single Page Application with Worker Process (Use Case 1)

Use Case 2

An example use case can be sending registration welcome messages to users after their successful registration on the platform

  • After completing the registration process, a message object with userId will be pushed to a Queue(eg: SQS).
  • A Lambda configured as an SQS trigger will be triggered and send the email to the user.
  • Update database if required.
  • As lambda is a serverless component, the costing will be calculated based on number of executions and time.

The following diagram explains the architecture of the worker process along with other important components.

Single Page Application with Worker Process (Use Case 2)

Previous – Multi Page Application (Integrated Web)

Home

Multi Page Application

Introduction

A Multi-Page Application (MPA) is a traditional web application that consists of multiple separate pages, with each page being loaded in full when a user navigates to it. MPAs are typically built using server-side technologies such as PHP, Ruby on Rails, or .NET, and rely on server-side rendering to generate HTML that is sent to the browser.

Each page in an MPA is a self-contained unit that operates independently of the other pages, and navigation between pages involves making a full round trip to the server. This can result in slower page load times, as the entire page must be reloaded every time the user navigates to a new page.

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

Multi-page application (MPA) is a type of web application that consists of multiple pages served from a server to a client’s web browser, where each page is a distinct URL. These pages are generated dynamically on the server-side and then rendered on the client-side, with each page request triggering a round-trip to the server.

When a user requests a page, the server responds with the HTML, CSS, and JavaScript necessary to render the page, which is then displayed in the user’s web browser. Navigation between pages is achieved by the user clicking on links or by JavaScript code dynamically updating the URL and triggering a new page request to the server.

Components

The main components of a Multi-page application (MPA) are:

  • Server: A server that runs a server-side language, such as PHP, Node.js, or Ruby, and is responsible for handling HTTP requests and generating dynamic content.

  • Client: A web browser that displays the dynamic content generated by the server, such as HTML, CSS, and JavaScript.

  • Router: A component that handles navigation between pages and updates the URL to reflect the current page.

  • HTML, CSS, and JavaScript: The technologies used to create the user interface and dynamic behavior of the pages.

  • Database: A database that stores the application’s data, such as user information, product catalog, and order history. The server accesses this data to generate dynamic content for each page.

  • APIs: Interfaces that allow the server and client to exchange data, such as REST APIs that enable the client to retrieve data from the server and send data to the server.

These components work together to provide the user with a seamless experience as they navigate the application, with each page request triggering a round-trip to the server and a rendering of the updated content in the client’s web browser.

Architecture

All the above components are served from a single application

Backend

There are different solutions and services to host the MPA Backend on cloud, here are some of the popular:

  • VM (eg: EC2)
  • Container Services (eg: ECS)
  • Managed Services (eg: Elastic Beanstalk)
  • Serverless (eg: Lambda)
  • Kubernetes (eg: EKS)

Among the above list, we’re covering only Managed Services.

Managed Services

Using managed services like Amazon Web Services (AWS) Elastic Beanstalk and Microsoft Azure App Service provides several benefits, including:

  • Simplified deployment and management: Managed services take care of infrastructure management and deployment, allowing developers to focus on writing code and delivering features.

  • Automated scaling: Managed services automatically scale application instances based on demand, providing high availability and performance without manual intervention.

  • Reduced operational overhead: By outsourcing infrastructure management, organizations can reduce operational overhead and focus on delivering value to their customers.

  • Improved security: Managed services provide built-in security features, such as automatic patching and secure data storage, reducing the security burden on organizations.

  • Easy integration with other services: Managed services integrate seamlessly with other services, allowing organizations to leverage the full suite of cloud services to build and deploy their applications.

  • Cost-effectiveness: Managed services offer a cost-effective solution for deploying and managing applications, with flexible pricing models and the ability to pay for only the resources used.

  • Global availability: Managed services are designed to be globally available, providing fast and reliable access to applications from anywhere in the world.

MPA Architecture (Managed Services)

Next – Single Page Application with Worker Process

Previous – Backend for SPA and Mobile App (Serverless)

Home

Backend for SPA and Mobile App (Serverless)

Introduction

Single Page Applications (SPAs) and mobile apps can use APIs to communicate with a server and retrieve or manipulate data. This can be used to display data on the frontend, or to send data to the server to be stored.

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

API Technologies

For the backend of a mobile app or SPA, various API technologies can be used, including:

  • REST (Representational State Transfer): This is a popular, lightweight, and scalable API technology that uses HTTP requests to perform operations on resources.

  • GraphQL: This is a newer API technology that provides a more flexible and efficient alternative to REST, allowing clients to request only the data they need.

  • gRPC: This is a high-performance, open-source framework for building scalable APIs. It uses the Protocol Buffers data format and supports a variety of programming languages.

  • SOAP (Simple Object Access Protocol): This is an XML-based protocol for exchanging structured information in the implementation of web services.

These API technologies can be used to create APIs that can be consumed by mobile apps or SPAs. The choice of technology depends on the specific requirements of the project, such as performance, security, and data exchange requirements.

Architecture

The architecture for all the above API technologies will be almost the same. We are considering the REST API for now as that is the most popular option.

There are different solutions and services to host the SPA Backend on cloud, here are some of the popular:

  • VM (eg: EC2)
  • Container Services (eg: ECS)
  • Managed Services (eg: Elastic Beanstalk)
  • Serverless (eg: Lambda)
  • Kubernetes (eg: EKS)

Among the above list, we’re covering only Serverless and Managed Services.

Serverless

Using a serverless architecture has several benefits, including:

  • Cost-effectiveness: Serverless architectures allow you to pay only for the resources you actually use, making it a cost-effective solution for both small and large scale applications.

  • Scalability: Serverless architectures automatically scale to meet changing demand, eliminating the need for manual scaling and allowing organizations to focus on delivering value to their customers.

  • Reduced operational overhead: By outsourcing infrastructure management to the cloud provider, organizations can reduce operational overhead and focus on writing code and delivering features.

  • Improved time-to-market: Serverless architectures allow developers to focus on writing code, rather than managing infrastructure, improving time-to-market for new features and applications.

  • Flexibility: Serverless architectures provide a flexible and modular approach to building applications, allowing organizations to easily modify and extend their applications as needed.

  • High availability: Serverless architectures are designed to be highly available, with automatic failover and replication to ensure that applications remain available even in the event of a failure.

  • Improved security: Serverless architectures provide built-in security features, such as automatic patching and secure data storage, reducing the security burden on organizations.

  • Easy integration with other services: Serverless architectures integrate seamlessly with other cloud services, allowing organizations to leverage the full suite of cloud services to build and deploy their applications.

Backend Architecture (Serverless)

A complete architecture diagram with frontend and backend would be as follows:

SPA Architecture (Serverless)

Next – Multi Page Application (Integrated Web)

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

Home

Backend for SPA and Mobile App (Managed Services)

Introduction

Single Page Applications (SPAs) and mobile apps can use APIs to communicate with a server and retrieve or manipulate data. This can be used to display data on the frontend, or to send data to the server to be stored.

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

API Technologies

For the backend of a mobile app or SPA, various API technologies can be used, including:

  • REST (Representational State Transfer): This is a popular, lightweight, and scalable API technology that uses HTTP requests to perform operations on resources.

  • GraphQL: This is a newer API technology that provides a more flexible and efficient alternative to REST, allowing clients to request only the data they need.

  • gRPC: This is a high-performance, open-source framework for building scalable APIs. It uses the Protocol Buffers data format and supports a variety of programming languages.

  • SOAP (Simple Object Access Protocol): This is an XML-based protocol for exchanging structured information in the implementation of web services.

These API technologies can be used to create APIs that can be consumed by mobile apps or SPAs. The choice of technology depends on the specific requirements of the project, such as performance, security, and data exchange requirements.

Architecture

The architecture for all the above API technologies will alomost same. We are considering the REST API for now as that is the most popular option.

There are different solutions and services to host the SPA Backend on cloud, here are some of the popular:

  • VM (eg: EC2)
  • Container Services (eg: ECS)
  • Managed Services (eg: Elastic Beanstalk)
  • Serverless (eg: Lambda)
  • Kubernetes (eg: EKS)

Among the above list, we’re covering only Serverless and Managed Services.

Managed Services

Using managed services like Amazon Web Services (AWS) Elastic Beanstalk and Microsoft Azure App Service provides several benefits, including:

  • Simplified deployment and management: Managed services take care of infrastructure management and deployment, allowing developers to focus on writing code and delivering features.

  • Automated scaling: Managed services automatically scale application instances based on demand, providing high availability and performance without manual intervention.

  • Reduced operational overhead: By outsourcing infrastructure management, organizations can reduce operational overhead and focus on delivering value to their customers.

  • Improved security: Managed services provide built-in security features, such as automatic patching and secure data storage, reducing the security burden on organizations.

  • Easy integration with other services: Managed services integrate seamlessly with other services, allowing organizations to leverage the full suite of cloud services to build and deploy their applications.

  • Cost-effectiveness: Managed services offer a cost-effective solution for deploying and managing applications, with flexible pricing models and the ability to pay for only the resources used.

  • Global availability: Managed services are designed to be globally available, providing fast and reliable access to applications from anywhere in the world.

Backend Architecture (Managed Services)

A complete architecture diagram with frontend and backend would be as follows:

SPA Architecture (Managed Services)

Next – Backend for SPA and Mobile App (Serverless)

Previous – Single Page Application Frontend

Home

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

Architecture References for Web Apps

Introduction

This document provides a comprehensive guide to common and standard architecture patterns used in modern software development. The purpose of this document is to serve as a reference for developers and tech leads in IT industry, and to provide a common understanding of the different architecture patterns that can be used to design, build, and deploy scalable and reliable applications.

The document includes 5 to 6 different types of architecture patterns that have proven to be effective and efficient for a variety of use cases. Each architecture pattern includes a high-level overview, common use cases, and considerations for implementation, making it easier for you to understand the strengths and weaknesses of each pattern and choose the right one for your specific needs.

Whether you are designing a new application, refactoring an existing one, or simply looking to improve your understanding of architecture patterns, this document is an essential resource. By providing a comprehensive overview of the most common and effective architecture patterns, it helps you make informed decisions and ensures that your applications are built to meet the demands of modern users and the ever-evolving technology landscape.

Architecture Patterns

Here are the initial few architecture patterns we have shortlisted. We plan to add more patterns in the future.

Cloud Services

The architecture diagrams are created utilizing AWS components, however, alternative services for Azure and GCP are also mentioned here.

Service Type AWS Azure GCP
Virtual Machine EC2 Azure VM Compute Engine
Serverless (FaaS) Lambda Azure Functions Cloud Functions
Queue SQS Azure Service Bus Cloud Tasks
Job scheduling EventBridge Azure Scheduler Cloud Scheduler
Container Services ECS ACI Cloud Run
PaaS (Managed Service) Elastic Beanstalk App Service App Engine
RDBMS RDS Azure Database Cloud SQL
NoSQL DynamoDb CosmosDb Firestore
Load Balancing ELB ALB Cloud Load Balancing
API Management API Gateway API Management API Gateway
CDN CloudFront Azure Content Delivery Network Cloud CDN
Static Storage S3 Azure Blob Storage Cloud Storage

Next – Single Page Application Frontend

Home