Using UML Sequence Diagrams

Model Cloud-Based Apps and Web Services

October 24, 2024

UML Sequence Diagrams October 24, 2024 1 / 14

Outline

1 Introduction

2 UML Sequence Diagrams Overview

3 Modeling a Cloud-Based Web Application

4 Key Considerations

5 Conclusion

UML Sequence Diagrams October 24, 2024 2 / 14

Introduction

Cloud-based web applications are increasingly integrating third-party

apps and web services.
UML Sequence Diagrams are used to visualize interactions between
components in these systems.
This presentation will explore how UML Sequence Diagrams can
model these interactions effectively.

UML Sequence Diagrams October 24, 2024 3 / 14

What is a UML Sequence Diagram?

A UML Sequence Diagram models the interaction between different

objects in a time sequence.
Shows how objects communicate with each other via messages.
Key elements:
Actors/Objects: Participants in the interaction.
Lifelines: Representation of the existence of an object at a point in
time.
Messages: Communication between objects.
Activation bars: Indicate periods an object is active.

UML Sequence Diagrams October 24, 2024 4 / 14

Web Application Architecture

Cloud-based web applications typically have several components:

Client: The user’s browser or mobile app.
Web Server: Handles requests and serves responses.
Application Server: Executes the business logic.
Third-Party Apps: External systems providing services (e.g., payment
gateways, social media integration).
Web Services: API-based communication for accessing functionalities
(e.g., REST or SOAP).
Each of these components can be represented in a sequence diagram.

UML Sequence Diagrams October 24, 2024 5 / 14

Modeling Interactions Using Sequence Diagrams

Sequence diagrams show the flow of interactions between these

components.
Useful for:
Identifying bottlenecks.
Defining API interactions between services.
Visualizing third-party app involvement.
Example: User submits a request, which is processed by the server,
interacts with a third-party app, and returns a response.

UML Sequence Diagrams October 24, 2024 6 / 14

Modeling Third-Party Interactions

Important to understand the behavior of external systems (e.g.,

third-party apps or web services).
Must account for:
Latency: Delays in response from third-party systems.
Errors: Handling failures from external services.
Authentication: Secure communication using tokens (OAuth, API
keys, etc.).
Sequence diagrams help in visualizing these interactions and
identifying potential issues.

UML Sequence Diagrams October 24, 2024 7 / 14

Sequence Diagrams: An Architectural Perspective

Lifelines and Roles

Each system component is suitably labeled. For example:
Client: Represents either a browser or mobile app, giving flexibility to
model different front-end interactions.
Web Server: Defined as the presentation layer, which handles requests
like user authentication, session management, API gateway, and load
balancing.
App Server: The core business logic layer responsible for managing the
application’s processing logic, validating requests, and handling
exceptions.
Payment Gateway: A third-party system for processing payments,
emphasizing external service considerations like latency, tokenization,
and security (HTTPS).

UML Sequence Diagrams October 24, 2024 8 / 14

Sequence Diagrams: An Architectural Perspective (2)

Detailed Messaging
Message descriptions are designed for clarity and precision:
The Client sends a payment initiation request using HTTP POST to
the Web Server (clearly indicating RESTful communication and data
exchange patterns).
The Web Server routes the request to the App Server where the
business logic is executed.
The App Server interacts with the Payment Gateway via a secure
HTTPS connection, often using tokenized information.
A confirmation (or failure) is sent back to the App Server, which
triggers a response to the Web Server and eventually the client.

UML Sequence Diagrams October 24, 2024 9 / 14

Sequence Diagrams: An Architectural Perspective (3)

Annotations for Architecture Concerns

Presentation Layer: Focuses on aspects such as session management,
API gateway routing, and cross-origin resource sharing (CORS), which
are important for web application architectures.
Business Layer: Handles core business logic, request validation,
transaction management, and error handling. Senior professionals
would consider this layer’s resilience, scaling, and response
management.
Third-Party Services: External payment gateway is emphasized for its
latency, retry mechanisms, security concerns (OAuth, tokenized
requests), and potential integration failure scenarios.

UML Sequence Diagrams October 24, 2024 10 / 14

Sequence Diagrams: An Architectural Perspective (4)

Activation Bars
Thick lines represent the time period where the participants are active,
indicating execution. This helps visualize which system is processing
at any given time, identifying potential delays or bottlenecks.
Error Handling and Latency Awareness
Professionals would be concerned with how the system handles failures
from the third-party service, latency issues, and timeouts.
For instance, they would focus on retries, exponential backoff
strategies, or alternative flows when the third-party payment gateway
fails.

UML Sequence Diagrams October 24, 2024 11 / 14

Web Server vs. Application/App Server
Feature Web Server Application Server
Primary Role Serves static content, Executes business logic,
handles HTTP requests processes dynamic content
Layer Presentation layer Business logic layer
Content Static Dynamic
(HTML, CSS, JS) (DB interactions, APIs)
Protocols HTTP, HTTPS HTTP, HTTPS, SOAP,
Supported JMS, database protocols
Common Apache, Nginx, IIS Apache Tomcat, JBoss,
Servers Node.js, .NET Core
Task Focus Request handling, Business logic, DB access,
load balancing, SSL transaction management
Scaling High concurrency Scales for business processes
for static content and computations
Example Serving e-commerce Processing user login,
Use Case homepage payment transactions
Table: Comparison ofUML
Web Server
Sequence and ApplicationOctober
Diagrams Server 24, 2024 12 / 14
Conclusion

UML Sequence Diagrams are an essential tool for modeling

interactions in a cloud-based web application.
They help visualize how components (client, web server, app server,
third-party apps, web services) communicate.
Enable developers to design and optimize the workflow of distributed
systems.

UML Sequence Diagrams October 24, 2024 13 / 14

Thank You

UML Sequence Diagrams October 24, 2024 14 / 14