Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 35 Anzeige

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

Herunterladen, um offline zu lesen

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Web Engineering L6: Software Architecture for the Web (6/8) (20)

Weitere von Henry Muccini (20)

Anzeige

Aktuellste (20)

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

  1. 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. 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. 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
  4. 4. Software Architecture Design
  5. 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. 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. 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. 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. 9. MWT– Progettazione di Applicazioni Web Henry Muccini 9 The UML way to model subsystems
  10. 10. MWT– Progettazione di Applicazioni Web Henry Muccini 10 The UML way to model Interfaces
  11. 11. Web Architectures
  12. 12. MWT– Progettazione di Applicazioni Web Henry Muccini 12 Architettura minimale: Client-Server
  13. 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. 14. MWT– Progettazione di Applicazioni Web Henry Muccini 14 Soluzione: Tre livelli concettuali
  15. 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. 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. 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. 18. MWT– Progettazione di Applicazioni Web Henry Muccini 18 NdR Architecture: 2016 vs 2017
  19. 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. 20. MWT– Progettazione di Applicazioni Web Henry Muccini 20 CodeMonkeys – Software Architecture team Stefano Cortellessa Sara Asgarova Vincenzo Stoico
  21. 21. MWT– Progettazione di Applicazioni Web Henry Muccini 21 CodeMonkeys – Software Architecture team
  22. 22. MWT– Progettazione di Applicazioni Web Henry Muccini 22 Web Architecting = = Technical skills = Design Decisions = Structure and Behavior Modeling
  23. 23. Component Diagram for SA structure modeling
  24. 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. 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. 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. 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. 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. 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. 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. 31. MWT– Progettazione di Applicazioni Web Henry Muccini 31
  32. 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. 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. 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. 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]

×