This lecture discusses Architectural aspects of Web engineering.
It covers:
- software architecture design
- software architecture for the web
- component model for software architecture description
The output of this course consists in a list of artifacts and principles to be used when engineering Web applications is listed at https://trello.com/b/z49P8z3b
Scanning the Internet for External Cloud Exposures via SSL Certs
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
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
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
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]