SlideShare a Scribd company logo
Progettazione di Applicazioni Web
corso del Master in Web Technology
a.a. 2017-2018
https://app.schoology.com/course/1511186315/
Henry Muccini
Università degli Studi dell’Aquila
6. Web Architecture Design
MWT– Progettazione di Applicazioni Web Henry Muccini
2
Copyright Notice
Il materiale riportato in queste slide puo’ essere
riutilizzato, parziale o totalmente, a patto che le fonti
e gli autori vengano citati
Henry Muccini
MWT– Progettazione di Applicazioni Web Henry Muccini
3
Progettazione
.web contents modeling [dati e contenuti]
.architecture modeling + tecnologies
.component diagrams
.sequence diagrams
.user centered design
.API description modeling
.design decisions
.UX modeling
Software Architecture Design
MWT– Progettazione di Applicazioni Web Henry Muccini
5
Software Architecture
The Software Architecture is the earliest
model of the whole software system created
along the software lifecycle
 A set of components and connectors
communicating through interfaces
 A set of architecture design decisions
 Focus on set of views and viewpoints
 Written according to architectural styles
MWT– Progettazione di Applicazioni Web Henry Muccini
6
Software Architecture Design
Software Architecture: defines system
components and their interactions so to
maximize functional and non functional
requirements
The internal of system components is elaborated
later, and only when the overall picture is completed
A wrong design impacts
implementation activities and
results in costly rework
MWT– Progettazione di Applicazioni Web Henry Muccini
7
STM-4/16
ADM
ADM
STM-1/4
ADM
ADM ADM
SXC
4/1
Urban Level
SXA
STM-1/4
ADM
ADM ADM
ADM
STM-4/16
ADM
ADM
Regional level
STM-1/4
ADM
ADM
ADM ADM
SXA
WDM
STM-4/16
ADM
ADM
SXA
WL
STM-16 Ring
National Level
ADM
ADM
ADM
ADM
ADMADM
ADM
ADMADM
WL
ADM
ADMADM
ADM
ADM
ADM
ADM
ADM
ADM
STM-16 Ring
TELECOM ITALIA NETWORK ARCHITECTURE
Example
MWT– Progettazione di Applicazioni Web Henry Muccini
8
Example: Eclipse Architecture
Java
Development
Tools
Plugin
Development
Environment
JFace
SWT
Workbench
Workspace
Runtime
User Interface
Core
MWT– Progettazione di Applicazioni Web Henry Muccini
9
The UML way to model subsystems
MWT– Progettazione di Applicazioni Web Henry Muccini
10
The UML way to model Interfaces
Web Architectures
MWT– Progettazione di Applicazioni Web Henry Muccini
12
Architettura minimale: Client-Server
MWT– Progettazione di Applicazioni Web Henry Muccini
13
Limiti dell’Approccio C/S
Ben presto ci si accorge che il modello
architetturale C/S e’ inadatto ad applicazione di tipo
Web
Nel modello C/S, l’interfaccia utente è totalmente
implementata sul client, il database management è
totalmente allocato sul server mentre il process
management è in un qualche modo suddiviso tra
client e server!
Cosa accade se vogliamo toccare la grafica senza
modificare la logica (o viceversa)?
 Tutto e mischiato e non sappiamo come muoverci
MWT– Progettazione di Applicazioni Web Henry Muccini
14
Soluzione: Tre livelli concettuali
MWT– Progettazione di Applicazioni Web Henry Muccini
15
Soluzione: Tre livelli concettuali
Livello Presentazione:
– si occupa di ricevere le GET e le POST dal server, per ottenere l’input
del programma
– costruisce i documenti HTML che costituiscono l’output del programma
Livello Logico:
– calcola l’output a partire dall’input e dai dati memorizzati nel terzo
livello
– definisce la funzione del programma
Livello Dati:
– costituito tipicamente da un database, mette a disposizione
dell’applicazione un supporto per memorizzare le informazioni
MWT– Progettazione di Applicazioni Web Henry Muccini
16
Vantaggi
Maggiore scalabililtà e modificabilità, dal momento
che, cambiando la business logic, non si devono
modificare tutti i clients
Clients leggeri, che forniscono soltanto funzionalità
per la rappresentazione di dati e l’interazione
dell’utente con il sistema
Possibilità di implementare logiche aggiuntive,
estremamente interessanti
MWT– Progettazione di Applicazioni Web Henry Muccini
17
Tante altre soluzioni, da analizzare
caso per caso…
Soluzioni con pattern MVC
Soluzioni con pattern Publish/Subscribe
Soluzioni con pattern Event-based
Soluzioni con DB SQL
Soluzioni con DB noSQL
Soluzioni miste
Soluzioni DB cloud
Soluzioni DB miste
MWT– Progettazione di Applicazioni Web Henry Muccini
18
NdR Architecture: 2016 vs 2017
MWT– Progettazione di Applicazioni Web Henry Muccini
19
Iacobelli Davide
Battista Federico
Berardini Daniele
Bug’s Life – Software Architecture team
PATTERN: Publisher / Subscriber
PATTERN: Event-based Producer/Consumer
PATTERN: Model-View-Controller
MWT– Progettazione di Applicazioni Web Henry Muccini
20
CodeMonkeys – Software Architecture team
Stefano Cortellessa
Sara Asgarova
Vincenzo Stoico
MWT– Progettazione di Applicazioni Web Henry Muccini
21
CodeMonkeys – Software Architecture team
MWT– Progettazione di Applicazioni Web Henry Muccini
22
Web Architecting =
= Technical skills
= Design Decisions
= Structure and Behavior Modeling
Component Diagram for SA
structure modeling
MWT– Progettazione di Applicazioni Web Henry Muccini
24
Component Diagram by example
https://www.sparxsystems.com.au/resources/uml2_tutorial/uml2_componentdiagram.html
MWT– Progettazione di Applicazioni Web Henry Muccini
25
UML Component Diagram
The purpose of the Component diagram is to define
software components and their relationships to one
another.
Doing so provides a means of defining software as a
set of modular, and interchangeable, reusable units
that may be assembled to create successively larger
modular, and interchangeable, units.
Components may represent anything from a single
class to applications, subsystems, and systems.
MWT– Progettazione di Applicazioni Web Henry Muccini
26
Components
– A component is an autonomous unit within a system
– The components can be used to define software systems of arbitrary
size and complexity
– UML component diagrams enable to model the high-level software
components, and the interfaces to those components
MWT– Progettazione di Applicazioni Web Henry Muccini
27
Component ELEMENTS
A component can have
– Interfaces
An interface represents a declaration of a set of
operations and obligations
– Usage dependencies
A usage dependency is relationship which one element
requires another element for its full implementation
– Ports
Port represents an interaction point between a component
and its environment
– Connectors
• Connect two components
• Connect the external contract of a component to the internal
structure
MWT– Progettazione di Applicazioni Web Henry Muccini
28
Interfaces
Can be:
• Provided
• Characterize services that the component offers to its
environment
• Required
• Characterize services that the component expects from its
environment
MWT– Progettazione di Applicazioni Web Henry Muccini
29
Dependencies
Usage Dependency
– A usage dependency is relationship which one element
requires another element for its full implementation
– Is a dependency in which the client requires the presence
of the supplier
– Is shown as dashed arrow with a <<use>> keyword
– The arrowhead point from the dependent component to
the one of which it is dependent
 Components can be
connected by usage
dependencies
MWT– Progettazione di Applicazioni Web Henry Muccini
30
Ports
• Specifies a distinct interaction point
• Between that component and its environment
• Between that component and its internal parts
• Internal view vs External view
• An external view (or black box view)
shows publicly visible properties and
operations
• An internal, or white box view of a
component is where the realizing
classes/components are nested
within the component shape
MWT– Progettazione di Applicazioni Web Henry Muccini
31
MWT– Progettazione di Applicazioni Web Henry Muccini
35
the right architecture…
The one that satisfies at best the
requirements and constraints
The “less” risky one
35
MWT– Progettazione di Applicazioni Web Henry Muccini
36
Why to care?
All the software systems have an architecture
 All the critical/complex systems must have it carefully and
explicitly specified
Architecture-level decisions impact the scalability,
performance, testability, functioning of the produced
system
Even if the code is perfectly written, a wrong
architecture produces a wrong system
MWT– Progettazione di Applicazioni Web Henry Muccini
37
Why to care?
A wrong architecture produces a wrong system
 Electronic Voting Systems
 Bad architecting of FT software:
 Tens of thousands of people around the large cities weren’t able to travel by
train Thursday morning. No trains from and to Amsterdam and Airport
Schiphol from early morning until after the morning rush hour. A failure in the
back-up system was the cause. The system therefore didn’t start. And then the
signals and switches could not be operated. Both primary and backup failed,
hence no operations. (april 2012)
 the Interim Report on Causes of the August 14th 2003 Blackout in the US
and Canada clearly shows that the problem was mostly caused by badly
designed fault tolerance, including various architectural issues: poor
diagnostics of component failures, longer-than-estimated time for
component recovery, failure to involve all necessary components in
recovery, inconsistent system state after recovery, failures of alarm systems.
(2003)
 Denver Airport
MWT– Progettazione di Applicazioni Web Henry Muccini
38
Why to care?
The Best Jobs of 2014
“For the first time, our No. 1 job
overall isn’t from the health care
industry, it’s a tech job.”
[http://goo.gl/WdxMjh]

More Related Content

Similar to Web Engineering L6: Software Architecture for the Web (6/8)

Web Development in Advanced Threat Prevention
Web Development in Advanced Threat PreventionWeb Development in Advanced Threat Prevention
Web Development in Advanced Threat Prevention
IRJET Journal
 
Review of Development done in Computerization of Electrical Specifications fo...
Review of Development done in Computerization of Electrical Specifications fo...Review of Development done in Computerization of Electrical Specifications fo...
Review of Development done in Computerization of Electrical Specifications fo...
ijsrd.com
 
Iaetsd pinpointing performance deviations of subsystems in distributed
Iaetsd pinpointing performance deviations of subsystems in distributedIaetsd pinpointing performance deviations of subsystems in distributed
Iaetsd pinpointing performance deviations of subsystems in distributed
Iaetsd Iaetsd
 
Analyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web FrameworksAnalyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web Frameworks
IRJET Journal
 
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
IRJET Journal
 
An approach of software engineering through middleware
An approach of software engineering through middlewareAn approach of software engineering through middleware
An approach of software engineering through middleware
IAEME Publication
 
www.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modelingwww.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modeling
webre24h
 
IRJET- MVC Framework: A Modern Web Application Development Approach and Working
IRJET- MVC Framework: A Modern Web Application Development Approach and WorkingIRJET- MVC Framework: A Modern Web Application Development Approach and Working
IRJET- MVC Framework: A Modern Web Application Development Approach and Working
IRJET Journal
 
V5I1-IJERTV5IS010514
V5I1-IJERTV5IS010514V5I1-IJERTV5IS010514
V5I1-IJERTV5IS010514
Samuel David Gonsalves
 
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
IRJET Journal
 
Advancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
Advancing Electrical Design in High-Rise Buildings with Revit 3D ModelingAdvancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
Advancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
IRJET Journal
 
elecworks for PTC Creo - Mechatronics software - 3D CAD software
elecworks for PTC Creo - Mechatronics software - 3D CAD softwareelecworks for PTC Creo - Mechatronics software - 3D CAD software
elecworks for PTC Creo - Mechatronics software - 3D CAD software
Guillem Fiter
 
Architectural reference model
Architectural reference modelArchitectural reference model
Architectural reference model
Suvendu Kumar Dash
 
Synopsis for Online Railway Railway Reservation System
Synopsis for Online Railway Railway Reservation SystemSynopsis for Online Railway Railway Reservation System
Synopsis for Online Railway Railway Reservation System
ZainabNoorGul
 
Authentication system with Decentralized chat app
Authentication system with Decentralized chat appAuthentication system with Decentralized chat app
Authentication system with Decentralized chat app
IRJET Journal
 
niharika saxena
niharika saxenaniharika saxena
niharika saxena
Niharika Saxena
 
149 152
149 152149 152
Website Development Using a Headless CMS - Sean Lamacraft, Distinction
Website Development Using a Headless CMS - Sean Lamacraft, DistinctionWebsite Development Using a Headless CMS - Sean Lamacraft, Distinction
Website Development Using a Headless CMS - Sean Lamacraft, Distinction
Kentico Software
 
Customizing Model of Mobile Service Computing on Cloud of Things
Customizing Model of Mobile Service Computing on Cloud of ThingsCustomizing Model of Mobile Service Computing on Cloud of Things
Customizing Model of Mobile Service Computing on Cloud of Things
IRJET Journal
 
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
AM Publications
 

Similar to Web Engineering L6: Software Architecture for the Web (6/8) (20)

Web Development in Advanced Threat Prevention
Web Development in Advanced Threat PreventionWeb Development in Advanced Threat Prevention
Web Development in Advanced Threat Prevention
 
Review of Development done in Computerization of Electrical Specifications fo...
Review of Development done in Computerization of Electrical Specifications fo...Review of Development done in Computerization of Electrical Specifications fo...
Review of Development done in Computerization of Electrical Specifications fo...
 
Iaetsd pinpointing performance deviations of subsystems in distributed
Iaetsd pinpointing performance deviations of subsystems in distributedIaetsd pinpointing performance deviations of subsystems in distributed
Iaetsd pinpointing performance deviations of subsystems in distributed
 
Analyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web FrameworksAnalyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web Frameworks
 
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
IRJET- An Sla-Aware Cloud Coalition Formation Approach for Virtualized Networks.
 
An approach of software engineering through middleware
An approach of software engineering through middlewareAn approach of software engineering through middleware
An approach of software engineering through middleware
 
www.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modelingwww.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modeling
 
IRJET- MVC Framework: A Modern Web Application Development Approach and Working
IRJET- MVC Framework: A Modern Web Application Development Approach and WorkingIRJET- MVC Framework: A Modern Web Application Development Approach and Working
IRJET- MVC Framework: A Modern Web Application Development Approach and Working
 
V5I1-IJERTV5IS010514
V5I1-IJERTV5IS010514V5I1-IJERTV5IS010514
V5I1-IJERTV5IS010514
 
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
 
Advancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
Advancing Electrical Design in High-Rise Buildings with Revit 3D ModelingAdvancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
Advancing Electrical Design in High-Rise Buildings with Revit 3D Modeling
 
elecworks for PTC Creo - Mechatronics software - 3D CAD software
elecworks for PTC Creo - Mechatronics software - 3D CAD softwareelecworks for PTC Creo - Mechatronics software - 3D CAD software
elecworks for PTC Creo - Mechatronics software - 3D CAD software
 
Architectural reference model
Architectural reference modelArchitectural reference model
Architectural reference model
 
Synopsis for Online Railway Railway Reservation System
Synopsis for Online Railway Railway Reservation SystemSynopsis for Online Railway Railway Reservation System
Synopsis for Online Railway Railway Reservation System
 
Authentication system with Decentralized chat app
Authentication system with Decentralized chat appAuthentication system with Decentralized chat app
Authentication system with Decentralized chat app
 
niharika saxena
niharika saxenaniharika saxena
niharika saxena
 
149 152
149 152149 152
149 152
 
Website Development Using a Headless CMS - Sean Lamacraft, Distinction
Website Development Using a Headless CMS - Sean Lamacraft, DistinctionWebsite Development Using a Headless CMS - Sean Lamacraft, Distinction
Website Development Using a Headless CMS - Sean Lamacraft, Distinction
 
Customizing Model of Mobile Service Computing on Cloud of Things
Customizing Model of Mobile Service Computing on Cloud of ThingsCustomizing Model of Mobile Service Computing on Cloud of Things
Customizing Model of Mobile Service Computing on Cloud of Things
 
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
 

More from Henry Muccini

Human Behaviour Centred Design
Human Behaviour Centred Design Human Behaviour Centred Design
Human Behaviour Centred Design
Henry Muccini
 
How cultural heritage, cyber-physical spaces, and software engineering can wo...
How cultural heritage, cyber-physical spaces, and software engineering can wo...How cultural heritage, cyber-physical spaces, and software engineering can wo...
How cultural heritage, cyber-physical spaces, and software engineering can wo...
Henry Muccini
 
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle SegreterieLa gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
Henry Muccini
 
Turismo 4.0: l'ICT a supporto del turismo sostenibile
Turismo 4.0: l'ICT a supporto del turismo sostenibileTurismo 4.0: l'ICT a supporto del turismo sostenibile
Turismo 4.0: l'ICT a supporto del turismo sostenibile
Henry Muccini
 
Sustainable Tourism - IoT and crowd management
Sustainable Tourism - IoT and crowd managementSustainable Tourism - IoT and crowd management
Sustainable Tourism - IoT and crowd management
Henry Muccini
 
Software Engineering at the age of the Internet of Things
Software Engineering at the age of the Internet of ThingsSoftware Engineering at the age of the Internet of Things
Software Engineering at the age of the Internet of Things
Henry Muccini
 
The influence of Group Decision Making on Architecture Design Decisions
The influence of Group Decision Making on Architecture Design DecisionsThe influence of Group Decision Making on Architecture Design Decisions
The influence of Group Decision Making on Architecture Design Decisions
Henry Muccini
 
An IoT Software Architecture for an Evacuable Building Architecture
An IoT Software Architecture for an Evacuable Building ArchitectureAn IoT Software Architecture for an Evacuable Building Architecture
An IoT Software Architecture for an Evacuable Building Architecture
Henry Muccini
 
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
Henry Muccini
 
Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)
Henry Muccini
 
Web Engineering L2: Requirements Elicitation for the Web (2/8)
Web Engineering L2: Requirements Elicitation for the Web (2/8)Web Engineering L2: Requirements Elicitation for the Web (2/8)
Web Engineering L2: Requirements Elicitation for the Web (2/8)
Henry Muccini
 
Web Engineering L1: introduction to Web Engineering (1/8)
Web Engineering L1: introduction to Web Engineering (1/8)Web Engineering L1: introduction to Web Engineering (1/8)
Web Engineering L1: introduction to Web Engineering (1/8)
Henry Muccini
 
Web Engineering L4: Requirements and Planning in concrete (4/8)
Web Engineering L4: Requirements and Planning in concrete (4/8)Web Engineering L4: Requirements and Planning in concrete (4/8)
Web Engineering L4: Requirements and Planning in concrete (4/8)
Henry Muccini
 
Collaborative aspects of Decision Making and its impact on Sustainability
Collaborative aspects of Decision Making and its impact on SustainabilityCollaborative aspects of Decision Making and its impact on Sustainability
Collaborative aspects of Decision Making and its impact on Sustainability
Henry Muccini
 
Engineering Cyber Physical Spaces
Engineering Cyber Physical SpacesEngineering Cyber Physical Spaces
Engineering Cyber Physical Spaces
Henry Muccini
 
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPISI progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
Henry Muccini
 
Exploring the Temporal Aspects of Software Architecture
Exploring the Temporal Aspects of Software ArchitectureExploring the Temporal Aspects of Software Architecture
Exploring the Temporal Aspects of Software Architecture
Henry Muccini
 
EasyLine: call4ideas_2016
EasyLine: call4ideas_2016EasyLine: call4ideas_2016
EasyLine: call4ideas_2016
Henry Muccini
 
The role of MDE in Software Architecture Descriptions
The role of MDE in Software Architecture DescriptionsThe role of MDE in Software Architecture Descriptions
The role of MDE in Software Architecture Descriptions
Henry Muccini
 
Euroweb+ meeting at the University of L'Aquila, Italy
Euroweb+ meeting at the University of L'Aquila, ItalyEuroweb+ meeting at the University of L'Aquila, Italy
Euroweb+ meeting at the University of L'Aquila, Italy
Henry Muccini
 

More from Henry Muccini (20)

Human Behaviour Centred Design
Human Behaviour Centred Design Human Behaviour Centred Design
Human Behaviour Centred Design
 
How cultural heritage, cyber-physical spaces, and software engineering can wo...
How cultural heritage, cyber-physical spaces, and software engineering can wo...How cultural heritage, cyber-physical spaces, and software engineering can wo...
How cultural heritage, cyber-physical spaces, and software engineering can wo...
 
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle SegreterieLa gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
La gestione dell’utenza numerosa - dalle Segreterie, ai Musei, alle Segreterie
 
Turismo 4.0: l'ICT a supporto del turismo sostenibile
Turismo 4.0: l'ICT a supporto del turismo sostenibileTurismo 4.0: l'ICT a supporto del turismo sostenibile
Turismo 4.0: l'ICT a supporto del turismo sostenibile
 
Sustainable Tourism - IoT and crowd management
Sustainable Tourism - IoT and crowd managementSustainable Tourism - IoT and crowd management
Sustainable Tourism - IoT and crowd management
 
Software Engineering at the age of the Internet of Things
Software Engineering at the age of the Internet of ThingsSoftware Engineering at the age of the Internet of Things
Software Engineering at the age of the Internet of Things
 
The influence of Group Decision Making on Architecture Design Decisions
The influence of Group Decision Making on Architecture Design DecisionsThe influence of Group Decision Making on Architecture Design Decisions
The influence of Group Decision Making on Architecture Design Decisions
 
An IoT Software Architecture for an Evacuable Building Architecture
An IoT Software Architecture for an Evacuable Building ArchitectureAn IoT Software Architecture for an Evacuable Building Architecture
An IoT Software Architecture for an Evacuable Building Architecture
 
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
Web Engineering L7: Sequence Diagrams and Design Decisions (7/8)
 
Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)
 
Web Engineering L2: Requirements Elicitation for the Web (2/8)
Web Engineering L2: Requirements Elicitation for the Web (2/8)Web Engineering L2: Requirements Elicitation for the Web (2/8)
Web Engineering L2: Requirements Elicitation for the Web (2/8)
 
Web Engineering L1: introduction to Web Engineering (1/8)
Web Engineering L1: introduction to Web Engineering (1/8)Web Engineering L1: introduction to Web Engineering (1/8)
Web Engineering L1: introduction to Web Engineering (1/8)
 
Web Engineering L4: Requirements and Planning in concrete (4/8)
Web Engineering L4: Requirements and Planning in concrete (4/8)Web Engineering L4: Requirements and Planning in concrete (4/8)
Web Engineering L4: Requirements and Planning in concrete (4/8)
 
Collaborative aspects of Decision Making and its impact on Sustainability
Collaborative aspects of Decision Making and its impact on SustainabilityCollaborative aspects of Decision Making and its impact on Sustainability
Collaborative aspects of Decision Making and its impact on Sustainability
 
Engineering Cyber Physical Spaces
Engineering Cyber Physical SpacesEngineering Cyber Physical Spaces
Engineering Cyber Physical Spaces
 
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPISI progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
I progetti UnivAq-UFFIZI, INCIPICT, e  CUSPIS
 
Exploring the Temporal Aspects of Software Architecture
Exploring the Temporal Aspects of Software ArchitectureExploring the Temporal Aspects of Software Architecture
Exploring the Temporal Aspects of Software Architecture
 
EasyLine: call4ideas_2016
EasyLine: call4ideas_2016EasyLine: call4ideas_2016
EasyLine: call4ideas_2016
 
The role of MDE in Software Architecture Descriptions
The role of MDE in Software Architecture DescriptionsThe role of MDE in Software Architecture Descriptions
The role of MDE in Software Architecture Descriptions
 
Euroweb+ meeting at the University of L'Aquila, Italy
Euroweb+ meeting at the University of L'Aquila, ItalyEuroweb+ meeting at the University of L'Aquila, Italy
Euroweb+ meeting at the University of L'Aquila, Italy
 

Recently uploaded

UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

Web Engineering L6: Software Architecture for the Web (6/8)

  • 1. Progettazione di Applicazioni Web corso del Master in Web Technology a.a. 2017-2018 https://app.schoology.com/course/1511186315/ Henry Muccini Università degli Studi dell’Aquila 6. Web Architecture Design
  • 2. MWT– Progettazione di Applicazioni Web Henry Muccini 2 Copyright Notice Il materiale riportato in queste slide puo’ essere riutilizzato, parziale o totalmente, a patto che le fonti e gli autori vengano citati Henry Muccini
  • 3. MWT– Progettazione di Applicazioni Web Henry Muccini 3 Progettazione .web contents modeling [dati e contenuti] .architecture modeling + tecnologies .component diagrams .sequence diagrams .user centered design .API description modeling .design decisions .UX modeling
  • 5. MWT– Progettazione di Applicazioni Web Henry Muccini 5 Software Architecture The Software Architecture is the earliest model of the whole software system created along the software lifecycle  A set of components and connectors communicating through interfaces  A set of architecture design decisions  Focus on set of views and viewpoints  Written according to architectural styles
  • 6. MWT– Progettazione di Applicazioni Web Henry Muccini 6 Software Architecture Design Software Architecture: defines system components and their interactions so to maximize functional and non functional requirements The internal of system components is elaborated later, and only when the overall picture is completed A wrong design impacts implementation activities and results in costly rework
  • 7. MWT– Progettazione di Applicazioni Web Henry Muccini 7 STM-4/16 ADM ADM STM-1/4 ADM ADM ADM SXC 4/1 Urban Level SXA STM-1/4 ADM ADM ADM ADM STM-4/16 ADM ADM Regional level STM-1/4 ADM ADM ADM ADM SXA WDM STM-4/16 ADM ADM SXA WL STM-16 Ring National Level ADM ADM ADM ADM ADMADM ADM ADMADM WL ADM ADMADM ADM ADM ADM ADM ADM ADM STM-16 Ring TELECOM ITALIA NETWORK ARCHITECTURE Example
  • 8. MWT– Progettazione di Applicazioni Web Henry Muccini 8 Example: Eclipse Architecture Java Development Tools Plugin Development Environment JFace SWT Workbench Workspace Runtime User Interface Core
  • 9. MWT– Progettazione di Applicazioni Web Henry Muccini 9 The UML way to model subsystems
  • 10. MWT– Progettazione di Applicazioni Web Henry Muccini 10 The UML way to model Interfaces
  • 12. MWT– Progettazione di Applicazioni Web Henry Muccini 12 Architettura minimale: Client-Server
  • 13. MWT– Progettazione di Applicazioni Web Henry Muccini 13 Limiti dell’Approccio C/S Ben presto ci si accorge che il modello architetturale C/S e’ inadatto ad applicazione di tipo Web Nel modello C/S, l’interfaccia utente è totalmente implementata sul client, il database management è totalmente allocato sul server mentre il process management è in un qualche modo suddiviso tra client e server! Cosa accade se vogliamo toccare la grafica senza modificare la logica (o viceversa)?  Tutto e mischiato e non sappiamo come muoverci
  • 14. MWT– Progettazione di Applicazioni Web Henry Muccini 14 Soluzione: Tre livelli concettuali
  • 15. MWT– Progettazione di Applicazioni Web Henry Muccini 15 Soluzione: Tre livelli concettuali Livello Presentazione: – si occupa di ricevere le GET e le POST dal server, per ottenere l’input del programma – costruisce i documenti HTML che costituiscono l’output del programma Livello Logico: – calcola l’output a partire dall’input e dai dati memorizzati nel terzo livello – definisce la funzione del programma Livello Dati: – costituito tipicamente da un database, mette a disposizione dell’applicazione un supporto per memorizzare le informazioni
  • 16. MWT– Progettazione di Applicazioni Web Henry Muccini 16 Vantaggi Maggiore scalabililtà e modificabilità, dal momento che, cambiando la business logic, non si devono modificare tutti i clients Clients leggeri, che forniscono soltanto funzionalità per la rappresentazione di dati e l’interazione dell’utente con il sistema Possibilità di implementare logiche aggiuntive, estremamente interessanti
  • 17. MWT– Progettazione di Applicazioni Web Henry Muccini 17 Tante altre soluzioni, da analizzare caso per caso… Soluzioni con pattern MVC Soluzioni con pattern Publish/Subscribe Soluzioni con pattern Event-based Soluzioni con DB SQL Soluzioni con DB noSQL Soluzioni miste Soluzioni DB cloud Soluzioni DB miste
  • 18. MWT– Progettazione di Applicazioni Web Henry Muccini 18 NdR Architecture: 2016 vs 2017
  • 19. MWT– Progettazione di Applicazioni Web Henry Muccini 19 Iacobelli Davide Battista Federico Berardini Daniele Bug’s Life – Software Architecture team PATTERN: Publisher / Subscriber PATTERN: Event-based Producer/Consumer PATTERN: Model-View-Controller
  • 20. MWT– Progettazione di Applicazioni Web Henry Muccini 20 CodeMonkeys – Software Architecture team Stefano Cortellessa Sara Asgarova Vincenzo Stoico
  • 21. MWT– Progettazione di Applicazioni Web Henry Muccini 21 CodeMonkeys – Software Architecture team
  • 22. MWT– Progettazione di Applicazioni Web Henry Muccini 22 Web Architecting = = Technical skills = Design Decisions = Structure and Behavior Modeling
  • 23. Component Diagram for SA structure modeling
  • 24. MWT– Progettazione di Applicazioni Web Henry Muccini 24 Component Diagram by example https://www.sparxsystems.com.au/resources/uml2_tutorial/uml2_componentdiagram.html
  • 25. MWT– Progettazione di Applicazioni Web Henry Muccini 25 UML Component Diagram The purpose of the Component diagram is to define software components and their relationships to one another. Doing so provides a means of defining software as a set of modular, and interchangeable, reusable units that may be assembled to create successively larger modular, and interchangeable, units. Components may represent anything from a single class to applications, subsystems, and systems.
  • 26. MWT– Progettazione di Applicazioni Web Henry Muccini 26 Components – A component is an autonomous unit within a system – The components can be used to define software systems of arbitrary size and complexity – UML component diagrams enable to model the high-level software components, and the interfaces to those components
  • 27. MWT– Progettazione di Applicazioni Web Henry Muccini 27 Component ELEMENTS A component can have – Interfaces An interface represents a declaration of a set of operations and obligations – Usage dependencies A usage dependency is relationship which one element requires another element for its full implementation – Ports Port represents an interaction point between a component and its environment – Connectors • Connect two components • Connect the external contract of a component to the internal structure
  • 28. MWT– Progettazione di Applicazioni Web Henry Muccini 28 Interfaces Can be: • Provided • Characterize services that the component offers to its environment • Required • Characterize services that the component expects from its environment
  • 29. MWT– Progettazione di Applicazioni Web Henry Muccini 29 Dependencies Usage Dependency – A usage dependency is relationship which one element requires another element for its full implementation – Is a dependency in which the client requires the presence of the supplier – Is shown as dashed arrow with a <<use>> keyword – The arrowhead point from the dependent component to the one of which it is dependent  Components can be connected by usage dependencies
  • 30. MWT– Progettazione di Applicazioni Web Henry Muccini 30 Ports • Specifies a distinct interaction point • Between that component and its environment • Between that component and its internal parts • Internal view vs External view • An external view (or black box view) shows publicly visible properties and operations • An internal, or white box view of a component is where the realizing classes/components are nested within the component shape
  • 31. MWT– Progettazione di Applicazioni Web Henry Muccini 31
  • 32. MWT– Progettazione di Applicazioni Web Henry Muccini 35 the right architecture… The one that satisfies at best the requirements and constraints The “less” risky one 35
  • 33. MWT– Progettazione di Applicazioni Web Henry Muccini 36 Why to care? All the software systems have an architecture  All the critical/complex systems must have it carefully and explicitly specified Architecture-level decisions impact the scalability, performance, testability, functioning of the produced system Even if the code is perfectly written, a wrong architecture produces a wrong system
  • 34. MWT– Progettazione di Applicazioni Web Henry Muccini 37 Why to care? A wrong architecture produces a wrong system  Electronic Voting Systems  Bad architecting of FT software:  Tens of thousands of people around the large cities weren’t able to travel by train Thursday morning. No trains from and to Amsterdam and Airport Schiphol from early morning until after the morning rush hour. A failure in the back-up system was the cause. The system therefore didn’t start. And then the signals and switches could not be operated. Both primary and backup failed, hence no operations. (april 2012)  the Interim Report on Causes of the August 14th 2003 Blackout in the US and Canada clearly shows that the problem was mostly caused by badly designed fault tolerance, including various architectural issues: poor diagnostics of component failures, longer-than-estimated time for component recovery, failure to involve all necessary components in recovery, inconsistent system state after recovery, failures of alarm systems. (2003)  Denver Airport
  • 35. MWT– Progettazione di Applicazioni Web Henry Muccini 38 Why to care? The Best Jobs of 2014 “For the first time, our No. 1 job overall isn’t from the health care industry, it’s a tech job.” [http://goo.gl/WdxMjh]