SlideShare a Scribd company logo
VISUALIZING
SOFTWARE
ARCHITECTU
RE
BY PETER OMONDI
0714130512
TABLE OF CONTENTS
SOFTWARE
ARCHITECTURE
01 CLIENT-SERVER
MODEL
02
MONOLITHIC
03
MICROSERVICES
04
UML DIAGRAMS
05
CASE STUDY
06
Visualizing Software Architecture and visualizations
WHAT IS SOFTWARE
ARCHITECTURE?
The software architecture of a system represents the design
decisions related to overall system structure and behavior.
Simply,
software architecture refers to how you organize stuff in the
process of creating software.
For example:
Implementation Design e.g. Relational or Non-Relational
DB? technologies Django or Node?
What’s the Client-Server
Model?
Client-server is a model that structures the tasks or
workloads of an application between a resource or
service provider (server) and a service or resource requester
(client).
Client – Frontend
Server - Backend
Visualizing Software Architecture and visualizations
Another important concept to know is that clients and
servers are part of the same system, but each is an
application/program on its own. Meaning they can be
developed, hosted, and executed separately.
And this brings us to APIs
What’s an API?
An API is nothing more than a set of defined rules that
establishes how an application can communicate with another.
It's like a contract between the two parts that says "If you send
A, I'll always respond B. If you send C, I'll always respond D..."
and so on.
There're different ways in which an API can be implemented.
The most commonly used are REST, SOAP and GraphQl.
RESTful APIs
RESTful APIs are designed to be simple, scalable, and flexible.
They are often used in web and mobile applications, as well as
in Internet of Things (IoT) and microservices architectures.
RESTful APIs
RESTful APIs
A request is sent from the client to the server via a web URL,
using one of the HTTP methods. The server then responds
with the requested resource, which could be HTML, XML,
Image, or JSON, with JSON being the most commonly used
format for modern web services.
HTTP Methods used in RESTful APIs
In HTTP, there are five methods that are commonly used in a
REST-based Architecture, i.e., POST, GET, PUT, PATCH, and
DELETE. These correspond to create, read, update, and delete
(or CRUD) operations, respectively.
03
MONOLITHIC
ARCHITECTUR
E
In Monolithic, we have a single server that will receive requests
from all three client apps, communicate with the database
when necessary, and respond to each front-end accordingly.
MONOLITHIC ARCHITECTURE
We are going to use Netflix which is a typical video streaming
application, in which the user can watch movies, series,
documentaries and so on. The user can use the app in web
browsers, in a mobile app, and on a TV app, too.
The main services included in our app will
be authentication (so people can create accounts, login, and
so on), payments (so people can subscribe and access the
content and streaming of course (so people can actually watch
what they're paying for).
CASE STUDY
DEPICTING THE SAME USING MONOLITHIC
ARCHITECTURE
We have a single server that will receive requests from all three client
apps, communicate with the database when necessary, and respond to
each front-end accordingly.
This kind of architecture is called a monolith because there's a single
server application that is responsible for all the features of the system.
In our case, if a user wants to authenticate, pay us, or watch one of
our movies, all the requests are going to be sent to the same server
application.
The main benefit of a monolithic design is its simplicity. The
functioning of it and the set up required is simple and easy to follow,
and this is why most applications start out in this way.
MONOLITHIC ARCHITECTURE
WHAT HAPPENS WHEN OUR USERS
INCREASES?
Requests Made to the server increases.
Due to this, users may experience delays if
not well handled.
Also, as the code base grows, it becomes
huge and complex to work with.
To solve the above problems, we'll
implement a microservices architecture
04
MICROSERVIC
ES
ARCHITECTUR
E
MICROSERVICES ARCHITECTURE
Following our example, before we only had a single server responsible
for all features (a monolithic architecture). After implementing
microservices we'll have a server responsible for authentication,
another responsible for payments, another for streaming, and the last
one for recommendations.
The client-side apps will communicate with the authentication server
when a user wants to login, with the payments server when the user
wants to pay, and with the streaming server when the user wants to
watch something.
All this communication happens through APIs just like with a
regular monolithic server (or through other communication systems
like kAFKA or RabbitMQ). The only difference is that now we have
different servers responsible for different actions instead of a single
MICROSERVICES ARCHITECTURE
● Features will be more loosely coupled, which means we'll
be able to develop and deploy them independently.
● The codebase for each server will be much smaller
and simpler. Which is nice for the dev folks that have been
working with us from the start, and also easier and quicker
for new developers to understand.
MICROSERVICES ARCHITECTURE
● Microservices is an architecture that is more complex to set
up and manage, which is why it makes sense only for very
big projects. Most projects will start out as monoliths and
migrate to microservices only when needed for
performance reasons.
MICROSERVICES ARCHITECTURE
● One problem that comes up when implementing microservices is
that the communication with front-end apps gets more complex.
Now we have many servers responsible for different things, which
means front-end apps would need to keep track of that info to
know who to make requests to.
● Normally this problem gets solved by implementing an
intermediary layer between the front-end apps and the
microservices. This layer will receive all the front-end requests,
redirect them to the corresponding microservice, receive the
microservice response, and then redirect the response to the
corresponding front-end app.
BACKEND FOR FRONTEND (BFF)
MICROSERVICES ARCHITECTURE USING BFF
05
UNIFIED
MODELING
LANGUAGE
WHAT IS UML?
Unified Modeling Language (UML) is a standardized visual
modeling language that is a versatile, flexible, and user-friendly
method for visualizing a system’s design. Software system
artifacts can be specified, visualized, built, and documented
with the use of UML.
We use UML diagrams to show the behavior and structure of a
system.
UML helps software engineers, businessmen, and system
architects with modeling, design, and analysis.
TYPES OF UML DIAGRAMS
BENEFITS OF USING UML
Developers and stakeholders may communicate using a single
visual language thanks to UML’s standardized approach to
system model representation.
Developers, designers, testers, and business users are just a
few of the stakeholders with whom UML diagrams may
effectively communicate.
UML diagrams make it easier to see the linkages, processes,
and parts of a system.
One useful tool for documentation is a UML diagram. They
offer an ordered and systematic method for recording a
system’s behavior, architecture, and design, among other
element
MOST COMMONLY USED UML DIAGRAMS
USE CASE
DIAGRAMS
CLASS DIAGRAMS
SEQUENCE
DIAGRAMS
USE CASE DIAGRAM
A use case diagram describes how a system interacts with the
outside actors
It is a graphical representation of the interaction among the
elements and the system
Each use case provides a piece of functionality that a a system
provides to its users.
It’s main purpose is to capture the dynamic aspects of the
system
It defines the scope of the system you are building
USE CASE DIAGRAM NOTATIONS
USE CASE DIAGRAM NOTATIONS
USE CASE DIAGRAM NOTATIONS
CLASS DIAGRAM
A class model captures the static structure of a system by
characterizing the objects in a system , the relationship
between the objects and operations for each class of
objects.
They are easy to understand and work well in practice.
Class diagrams are the backbone of almost every object-
oriented method including UML.
CLASS DIAGRAM NOTATIONS
CLASS DIAGRAM NOTATIONS
CLASS DIAGRAM NOTATIONS
SEQUENCE DIAGRAM
Sequence Diagram models the dynamic aspects of a software
system.
The emphasis is on the “sequence” of messages rather than
relationship between objects.
A sequence diagram maps the flow of logic or flow of control
within a usage scenario into a visual diagram enabling a
software architect to both document and validate the logic
during the analysis and design stages.
SEQUENCE DIAGRAM NOTATIONS
SEQUENCE DIAGRAM NOTATIONS
SEQUENCE DIAGRAM NOTATIONS
CASE STUDY
Ministry of Health and Population is willing to computerize its
system. This new system will be able to tell the population of
the country, zone and district and even of the ward of
specific place. The system will update its data in monthly
basis so that the birth rate and death rate can be easily
seen.
The home page is displayed when a person enters to the
system. Administrators can enter to the admin panel by
logging in with an ID and a password. He/she has privileges
to enter and modify the data into the database.
On the other hand, normal users can view the data but not
modify them. They can also visualize the data in graphical
form with animated charts, maps as well as in tabular form
based on their selection of data. Besides, they can also view
RESOURCE
S
TOOLS FOR DRAWING UML DIAGRAMS
LucidChart
Visual Paradigm
Star UML
Draw IO
RESOURCES
RESOURCES
https://blog.bytebytego.com/p/free-system-design-pdf-158-pages
THANK YOU
Do you have any questions?
peterochieng008@gmail.com
0714130512
https://hillcrest01.github.io/portfolio/

More Related Content

Similar to Visualizing Software Architecture and visualizations (20)

PPTX
The Big Picture - Integrating Buzzwords
Alessandro Giorgetti
 
PPTX
Final project presentation at arba minch university (3).pptx
LiulAbera
 
PDF
Software Architecture for Robotics
Lorran Pegoretti
 
PPTX
Design patterns are reusable solutions to common software design.pptx
Manonmani40
 
PDF
Modern webtechnologies
Besjan Xhika
 
PDF
Meetup6 microservices for the IoT
Francesco Rago
 
PPTX
Pattern oriented architecture for web based architecture
shuchi tripathi
 
PPTX
Cs 1023 lec 2 (week 1) edit 1
stanbridge
 
PPTX
Cs 1023 lec 2 (week 1) edit 1
stanbridge
 
PDF
Object Oriented Database
Megan Espinoza
 
PDF
CONFIGURATION INERPSAAS MULTI-TENANCY
ijcseit
 
PDF
International Journal of Computer Science, Engineering and Information Techno...
ijcseit
 
PDF
Configuration inerpsaas multi tenancy
ijcseit
 
PPTX
Software architecture patterns
Md. Sadhan Sarker
 
PDF
General Methodology for developing UML models from UI
ijwscjournal
 
PDF
General Methodology for developing UML models from UI
ijwscjournal
 
PDF
General Methodology for developing UML models from UI
ijwscjournal
 
PDF
General Methodology for developing UML models from UI
ijwscjournal
 
PDF
General Methodology for developing UML models from UI
ijwscjournal
 
PPTX
Microservices with mule
alfa
 
The Big Picture - Integrating Buzzwords
Alessandro Giorgetti
 
Final project presentation at arba minch university (3).pptx
LiulAbera
 
Software Architecture for Robotics
Lorran Pegoretti
 
Design patterns are reusable solutions to common software design.pptx
Manonmani40
 
Modern webtechnologies
Besjan Xhika
 
Meetup6 microservices for the IoT
Francesco Rago
 
Pattern oriented architecture for web based architecture
shuchi tripathi
 
Cs 1023 lec 2 (week 1) edit 1
stanbridge
 
Cs 1023 lec 2 (week 1) edit 1
stanbridge
 
Object Oriented Database
Megan Espinoza
 
CONFIGURATION INERPSAAS MULTI-TENANCY
ijcseit
 
International Journal of Computer Science, Engineering and Information Techno...
ijcseit
 
Configuration inerpsaas multi tenancy
ijcseit
 
Software architecture patterns
Md. Sadhan Sarker
 
General Methodology for developing UML models from UI
ijwscjournal
 
General Methodology for developing UML models from UI
ijwscjournal
 
General Methodology for developing UML models from UI
ijwscjournal
 
General Methodology for developing UML models from UI
ijwscjournal
 
General Methodology for developing UML models from UI
ijwscjournal
 
Microservices with mule
alfa
 

Recently uploaded (20)

PPTX
Platform for Enterprise Solution - Java EE5
abhishekoza1981
 
PPTX
Comprehensive Guide: Shoviv Exchange to Office 365 Migration Tool 2025
Shoviv Software
 
PPTX
Tally_Basic_Operations_Presentation.pptx
AditiBansal54083
 
PDF
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
PPTX
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
PDF
Automate Cybersecurity Tasks with Python
VICTOR MAESTRE RAMIREZ
 
PPTX
Equipment Management Software BIS Safety UK.pptx
BIS Safety Software
 
PDF
Executive Business Intelligence Dashboards
vandeslie24
 
PPTX
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
PDF
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
PPTX
The Role of a PHP Development Company in Modern Web Development
SEO Company for School in Delhi NCR
 
PDF
Salesforce CRM Services.VALiNTRY360
VALiNTRY360
 
PPTX
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
PPTX
Migrating Millions of Users with Debezium, Apache Kafka, and an Acyclic Synch...
MD Sayem Ahmed
 
PPTX
How Apagen Empowered an EPC Company with Engineering ERP Software
SatishKumar2651
 
PDF
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
PDF
Efficient, Automated Claims Processing Software for Insurers
Insurance Tech Services
 
PPTX
Revolutionizing Code Modernization with AI
KrzysztofKkol1
 
DOCX
Import Data Form Excel to Tally Services
Tally xperts
 
PDF
Powering GIS with FME and VertiGIS - Peak of Data & AI 2025
Safe Software
 
Platform for Enterprise Solution - Java EE5
abhishekoza1981
 
Comprehensive Guide: Shoviv Exchange to Office 365 Migration Tool 2025
Shoviv Software
 
Tally_Basic_Operations_Presentation.pptx
AditiBansal54083
 
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
Automate Cybersecurity Tasks with Python
VICTOR MAESTRE RAMIREZ
 
Equipment Management Software BIS Safety UK.pptx
BIS Safety Software
 
Executive Business Intelligence Dashboards
vandeslie24
 
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
The Role of a PHP Development Company in Modern Web Development
SEO Company for School in Delhi NCR
 
Salesforce CRM Services.VALiNTRY360
VALiNTRY360
 
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
Migrating Millions of Users with Debezium, Apache Kafka, and an Acyclic Synch...
MD Sayem Ahmed
 
How Apagen Empowered an EPC Company with Engineering ERP Software
SatishKumar2651
 
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
Efficient, Automated Claims Processing Software for Insurers
Insurance Tech Services
 
Revolutionizing Code Modernization with AI
KrzysztofKkol1
 
Import Data Form Excel to Tally Services
Tally xperts
 
Powering GIS with FME and VertiGIS - Peak of Data & AI 2025
Safe Software
 
Ad

Visualizing Software Architecture and visualizations

  • 2. TABLE OF CONTENTS SOFTWARE ARCHITECTURE 01 CLIENT-SERVER MODEL 02 MONOLITHIC 03 MICROSERVICES 04 UML DIAGRAMS 05 CASE STUDY 06
  • 4. WHAT IS SOFTWARE ARCHITECTURE? The software architecture of a system represents the design decisions related to overall system structure and behavior. Simply, software architecture refers to how you organize stuff in the process of creating software. For example: Implementation Design e.g. Relational or Non-Relational DB? technologies Django or Node?
  • 5. What’s the Client-Server Model? Client-server is a model that structures the tasks or workloads of an application between a resource or service provider (server) and a service or resource requester (client). Client – Frontend Server - Backend
  • 7. Another important concept to know is that clients and servers are part of the same system, but each is an application/program on its own. Meaning they can be developed, hosted, and executed separately.
  • 8. And this brings us to APIs
  • 9. What’s an API? An API is nothing more than a set of defined rules that establishes how an application can communicate with another. It's like a contract between the two parts that says "If you send A, I'll always respond B. If you send C, I'll always respond D..." and so on.
  • 10. There're different ways in which an API can be implemented. The most commonly used are REST, SOAP and GraphQl.
  • 11. RESTful APIs RESTful APIs are designed to be simple, scalable, and flexible. They are often used in web and mobile applications, as well as in Internet of Things (IoT) and microservices architectures.
  • 13. RESTful APIs A request is sent from the client to the server via a web URL, using one of the HTTP methods. The server then responds with the requested resource, which could be HTML, XML, Image, or JSON, with JSON being the most commonly used format for modern web services.
  • 14. HTTP Methods used in RESTful APIs In HTTP, there are five methods that are commonly used in a REST-based Architecture, i.e., POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively.
  • 16. In Monolithic, we have a single server that will receive requests from all three client apps, communicate with the database when necessary, and respond to each front-end accordingly. MONOLITHIC ARCHITECTURE
  • 17. We are going to use Netflix which is a typical video streaming application, in which the user can watch movies, series, documentaries and so on. The user can use the app in web browsers, in a mobile app, and on a TV app, too. The main services included in our app will be authentication (so people can create accounts, login, and so on), payments (so people can subscribe and access the content and streaming of course (so people can actually watch what they're paying for). CASE STUDY
  • 18. DEPICTING THE SAME USING MONOLITHIC ARCHITECTURE
  • 19. We have a single server that will receive requests from all three client apps, communicate with the database when necessary, and respond to each front-end accordingly. This kind of architecture is called a monolith because there's a single server application that is responsible for all the features of the system. In our case, if a user wants to authenticate, pay us, or watch one of our movies, all the requests are going to be sent to the same server application. The main benefit of a monolithic design is its simplicity. The functioning of it and the set up required is simple and easy to follow, and this is why most applications start out in this way. MONOLITHIC ARCHITECTURE
  • 20. WHAT HAPPENS WHEN OUR USERS INCREASES?
  • 21. Requests Made to the server increases. Due to this, users may experience delays if not well handled. Also, as the code base grows, it becomes huge and complex to work with.
  • 22. To solve the above problems, we'll implement a microservices architecture
  • 25. Following our example, before we only had a single server responsible for all features (a monolithic architecture). After implementing microservices we'll have a server responsible for authentication, another responsible for payments, another for streaming, and the last one for recommendations. The client-side apps will communicate with the authentication server when a user wants to login, with the payments server when the user wants to pay, and with the streaming server when the user wants to watch something. All this communication happens through APIs just like with a regular monolithic server (or through other communication systems like kAFKA or RabbitMQ). The only difference is that now we have different servers responsible for different actions instead of a single MICROSERVICES ARCHITECTURE
  • 26. ● Features will be more loosely coupled, which means we'll be able to develop and deploy them independently. ● The codebase for each server will be much smaller and simpler. Which is nice for the dev folks that have been working with us from the start, and also easier and quicker for new developers to understand. MICROSERVICES ARCHITECTURE
  • 27. ● Microservices is an architecture that is more complex to set up and manage, which is why it makes sense only for very big projects. Most projects will start out as monoliths and migrate to microservices only when needed for performance reasons. MICROSERVICES ARCHITECTURE
  • 28. ● One problem that comes up when implementing microservices is that the communication with front-end apps gets more complex. Now we have many servers responsible for different things, which means front-end apps would need to keep track of that info to know who to make requests to. ● Normally this problem gets solved by implementing an intermediary layer between the front-end apps and the microservices. This layer will receive all the front-end requests, redirect them to the corresponding microservice, receive the microservice response, and then redirect the response to the corresponding front-end app. BACKEND FOR FRONTEND (BFF)
  • 31. WHAT IS UML? Unified Modeling Language (UML) is a standardized visual modeling language that is a versatile, flexible, and user-friendly method for visualizing a system’s design. Software system artifacts can be specified, visualized, built, and documented with the use of UML. We use UML diagrams to show the behavior and structure of a system. UML helps software engineers, businessmen, and system architects with modeling, design, and analysis.
  • 32. TYPES OF UML DIAGRAMS
  • 33. BENEFITS OF USING UML Developers and stakeholders may communicate using a single visual language thanks to UML’s standardized approach to system model representation. Developers, designers, testers, and business users are just a few of the stakeholders with whom UML diagrams may effectively communicate. UML diagrams make it easier to see the linkages, processes, and parts of a system. One useful tool for documentation is a UML diagram. They offer an ordered and systematic method for recording a system’s behavior, architecture, and design, among other element
  • 34. MOST COMMONLY USED UML DIAGRAMS USE CASE DIAGRAMS CLASS DIAGRAMS SEQUENCE DIAGRAMS
  • 35. USE CASE DIAGRAM A use case diagram describes how a system interacts with the outside actors It is a graphical representation of the interaction among the elements and the system Each use case provides a piece of functionality that a a system provides to its users. It’s main purpose is to capture the dynamic aspects of the system It defines the scope of the system you are building
  • 36. USE CASE DIAGRAM NOTATIONS
  • 37. USE CASE DIAGRAM NOTATIONS
  • 38. USE CASE DIAGRAM NOTATIONS
  • 39. CLASS DIAGRAM A class model captures the static structure of a system by characterizing the objects in a system , the relationship between the objects and operations for each class of objects. They are easy to understand and work well in practice. Class diagrams are the backbone of almost every object- oriented method including UML.
  • 43. SEQUENCE DIAGRAM Sequence Diagram models the dynamic aspects of a software system. The emphasis is on the “sequence” of messages rather than relationship between objects. A sequence diagram maps the flow of logic or flow of control within a usage scenario into a visual diagram enabling a software architect to both document and validate the logic during the analysis and design stages.
  • 47. CASE STUDY Ministry of Health and Population is willing to computerize its system. This new system will be able to tell the population of the country, zone and district and even of the ward of specific place. The system will update its data in monthly basis so that the birth rate and death rate can be easily seen. The home page is displayed when a person enters to the system. Administrators can enter to the admin panel by logging in with an ID and a password. He/she has privileges to enter and modify the data into the database. On the other hand, normal users can view the data but not modify them. They can also visualize the data in graphical form with animated charts, maps as well as in tabular form based on their selection of data. Besides, they can also view
  • 48. RESOURCE S TOOLS FOR DRAWING UML DIAGRAMS LucidChart Visual Paradigm Star UML Draw IO
  • 51. THANK YOU Do you have any questions? [email protected] 0714130512 https://hillcrest01.github.io/portfolio/