Web Engineering L6: Software Architecture for the Web (6/8)
0 likes168 views
The document outlines the principles and practices of web application architecture as part of a master's course in web technology. It discusses software architecture design, emphasizing the importance of defining system components and interactions to meet functional and non-functional requirements, along with various architectural models. Additionally, it highlights potential pitfalls of specific models like client-server architecture and suggests a three-tier conceptual solution for improved scalability and adaptability.
![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](https://image.slidesharecdn.com/webengineeringl6softwarearchitecture-180415103407/85/Web-Engineering-L6-Software-Architecture-for-the-Web-6-8-3-320.jpg)
![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]](https://image.slidesharecdn.com/webengineeringl6softwarearchitecture-180415103407/85/Web-Engineering-L6-Software-Architecture-for-the-Web-6-8-35-320.jpg)
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]