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]