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

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

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
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
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
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
Example: Eclipse Architecture
Java
Development
Tools
Plugin
Development
Environment
JFace
SWT
Workbench
Workspace
Runtime
User Interface
Core

9
The UML way to model subsystems

10
The UML way to model Interfaces

12
Architettura minimale: Client-Server

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
Soluzione: Tre livelli concettuali

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
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
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
NdR Architecture: 2016 vs 2017

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
CodeMonkeys – Software Architecture team
Stefano Cortellessa
Sara Asgarova
Vincenzo Stoico

21
CodeMonkeys – Software Architecture team

22
Web Architecting =
= Technical skills
= Design Decisions
= Structure and Behavior Modeling

Component Diagram for SA
structure modeling

24
Component Diagram by example
https://www.sparxsystems.com.au/resources/uml2_tutorial/uml2_componentdiagram.html

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
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
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
Interfaces
Can be:
• Provided
• Characterize services that the component offers to its
environment
• Required
• Characterize services that the component expects from its
environment

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
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

35
the right architecture…
The one that satisfies at best the
requirements and constraints
The “less” risky one
35

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

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

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]

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

Recommended

Recommended

More Related Content

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

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

More from Henry Muccini

More from Henry Muccini (20)

Recently uploaded

Recently uploaded (20)

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