Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Arquitectura y Patrones
para Aplicaciones Web
-APAW-
WebArchitecture
Jesús Bernal Bermúdez
Arquitectura :: Introducción 2
Arquitectura Web
¿Qué es la Arquitectura software?
• Classes
Code • Methods
• Attributes
Design
• Classes
Architecture
• Packages
• Artefacts
Arquitectura :: Introducción 4
Arquitectura Web
Capas
Layer Tier
Capa Lógica Capa Física
Arquitectura :: Introducción 5
Arquitectura por Capas
Aplicación de Múltiples Páginas
html
css
js
Presentation
Layer
json
Business Data Database
Layer Layer Layer
Presentation
Layer
Arquitectura :: Introducción 7
Hexagonal Architecture
Alistair Cockburn
Rest
HTTP
Web
output-port
Adaptador
Rest
2º
Service
Domain
input-port
Mobile
GraphQL Data
Adaptador
1º Database
Test
Arquitectura :: Introducción 8
Hexagonal Architecture
Dependencias
Service
Domain
Model
Arquitectura :: Introducción 9
Arquitectura Hexagonal
Alistair Cockburn
Adaptador Rest
Web
GraphQL HTTP
Domain
Rest Data
Mobile
SOAP Database
Arquitectura :: Introducción 10
Onion Architecture
Jeffrey Palermo
Web
User Interface
IApplication
IServices
Repository
Model
Database
Arquitectura :: Introducción 11
Clean Architecture
Uncle Bob
Web
Controllers
I-Use Cases
Input port Iterator
Entities
Database
Sychronous Asychronous
a(int) af(a(x)){
int f(int x){ return ag(a(x))**ah(a(x));
return g(x)+h(x); }
}
Arquitectura :: Introducción 13
Arquitectura dirigida por Eventos
Event Driven Architecture
Artefacto
Arquitectura :: Introducción 14
Aplicación Monolítica
Ventajas
Inconvenientes
Domain
• Complejidad aumenta en el tiempo: perdida
de producción
• Grandes equipos de desarrollo:
especialización y complejidad en la
interacción entre los equipos
• Replicación costosa con difícil balanceo de
carga
• Grandes BD: migraciones complejas
Database • Difícil reusabilidad de partes del proyecto
• Una sola tecnología y difícil migración
tecnológica
Arquitectura :: Introducción 15
Microservicios
Ventajas
•Fuertemente modular.
•Permite tener equipos mas pequeños, multidisciplinares.
•Filosofía de productos y no proyectos.
Domain
•Descentralización de BD y elimina la integración de BD.
•Despliegues independientes.
DB •Permite la evolución rápida y con menor riesgo.
•Replica de despliegues y balanceo de carga.
•Reusabilidad en diferentes proyectos.
•Diversidad tecnológica.
Domain •Permite cambiar de tecnología en la evolución del
proyecto con nuevos servicios.
Domain Domain
Inconvenientes
Tendencias…
Layers A.
Asyncronous P.
Functional P.
Hexagonal A.
Reactive P. Microservices
OOP - Data
Arquitectura :: Data 17
Persistencia
Adaptador de Bases de Datos
Service
Model
Arquitectura :: Data 18
Data
UML
Arquitectura :: Data 19
Data
UML
Arquitectura :: Data 20
Data
Principios de Robert Martin
𝑨𝒂
• 𝑬𝒔𝒕𝒂𝒃𝒊𝒍𝒊𝒅𝒂𝒅 = [1..0], 1 es
𝑨𝒂+𝑨𝒆
E=1 totalmente estable, 0 nada estable, es
decir, inestable.
• Aa - Acoplamiento aferente: Nº de clases de afuera que
dependen del paquete.
• Ae - Acoplamiento eferente: el paquete depende de un
Nº de clases de fuera.
Dependencias
• Inestabilidad = 1- Estabilidad
Arquitectura :: Data 22
Data
Principios de Robert Martin
𝑪𝒂
E≈A • Abstracción =
𝑪𝒕
E≈A •Ca = Nº de clases abstractas
•Ct = Nº total de clases
• Estabilidad ≈ Abstracción
E=1, A=1
Dependencias
Arquitectura :: Data 23
Data
Modelización
Métodos
•toString()
Atributos
•hashcode()
•id: clave •equals()
primaria
Relaciones
•Dirección
•Tipo
•Multiplicidad
Entidades
•Objetos
persistentes
Arquitectura :: Data 24
Data
Modelización
Después de liberar la
primera versión, el cliente
nos pide ahora que en un
libro se indique si está
recomendado. El pretende
recomendar cada mes una
serie de libros.
Biblioteca
Arquitectura :: Data 27
Modelización
{}
Mapeo de objetos
Mapeo
• Diferentes opciones…
• Rendimiento de memoria.
• Rendimiento de ejecución.
Dependencias
Entity SQL
MongoDB
Arquitectura :: Data
Data 30
Entity SQL
SQL MongoDB
Arquitectura :: Data
Data 31
Entity SQL
MongoDB MongoDB
Arquitectura :: Data 32
Data
Patrones
• Se garantiza que una clase sólo tenga una instancia y se proporciona un
Singleton acceso global a ella.
• Permite estructuras en árbol tratando por igual a las hojas que a los elementos
Composite compuestos.
• Define una abstracción para crear objetos, y son las subclases que deciden la
Method Factory clase concreta a instanciar.
Data Access Object - DAO • Desacoplar el Dominio de la aplicación del Adaptador de las Bases de Datos.
Atributo privado
estático de la propia
clase.
• Creación temprana
(eager).
Constructor
privado.
Método estático y
público para
Se garantiza que una clase sólo tenga una devolver el atributo.
instancia y se proporciona un acceso global a ella
• Creación perezosa (lazy)
Arquitectura :: Data 34
Singleton
Patrón Único
Atributos
obligatorios.
Atributos
opcionales.
Code Smell
• Constructores con
demasiados
parámetros
Builder • Muchos constructores
• Poco usables.
User user = new User("id1","Paco","Jose","De Miguel",25,666666666,"Profesor",
Arrays.asList("Director", "Socio", "Consejo"));
?
Arquitectura :: Domain 37
Builder
Propósito: Creación. Ámbito: objeto
{}
https://github.com/miw-upm/apaw
•Package: es.upm.miw.pd.builder
Builder in action
•User
•Soluciones
Ejercicios
¿Cumple
DOO?
•¿Cohesión?
•¿SOLID única
responsabilidad?
• Anti patrón:
Código espagueti
Composite •Añadir un nuevo
tipo de hoja!!!
Arquitectura :: Data 41
Composite
Propósito: Estructural. Ámbito: objeto
Rol Componente
• Clase padre abstracta, es
la única visible al cliente.
• Los posible métodos se
definen aquí.
Rol Hoja
• Hereda de Componente.
Rol compuesto
• Hereda de componente.
Permite estructuras en árbol tratando por igual a • Contiene una lista de
las hojas que a los elementos compuestos Componente.
Arquitectura :: Data 42
Composite
Propósito: Estructural. Ámbito: objeto
Rol Componente
• Clase padre abstracta, es
la única visible al cliente.
• Los posible métodos se
definen aquí.
Rol Hoja
• Hereda de Componente.
Rol compuesto
• Hereda de componente.
Permite estructuras en árbol tratando por igual a • Contiene una lista de
las hojas que a los elementos compuestos Componente.
Arquitectura :: Data 43
Composite
{}
Expresión
•5
• (1+(8*3))
• ((7+3) * (1+5))
Arquitectura :: Data 44
Composite
{}
Se parte de un código en
producción, y no se
quieren alterar las
clases existentes.
Aplicar el patrón
compuesto para realizar
agrupaciones en árbol
de solo artículos.
La agrupación de
artículos se identifican
Permite estructuras en árbol tratando por igual a con un nombre y los
las hojas que a los elementos compuestos artículos por su reference
Arquitectura :: Data 45
Factory Method
Motivación
El cliente:
FiguresManager,
debe tener la
responsabilidad
de crear figuras
• Dependencias
inadecuadas.
• Anti patrón:
Factory Method
código espagueti.
Arquitectura :: Data 46
Factory Method
Propósito: Creación. Ámbito: clase
Propósito
• Define una
abstracción para
crear objetos, y
son las subclases
que deciden la
clase concreta a
instanciar
Función lambda
Factory Method
• Supplier<T>
Arquitectura :: Data 47
Method Factory
{}
Solución
Arquitectura :: Data 51
Inversion Of Control
Inversión de Control
Spring - Data
Arquitectura :: Data 54
Data Acces Object
Spring - Test
IntegrationTest: IT SeedDatabaseService
Spring-Test seedDatabase()
JUnit5 deleteAll()
Arquitectura :: Data 55
Dominio
Modelo
Arquitectura :: Data
Shop 56
{} https://github.com/miw-upm/apaw-practice
Arquitectura :: Rest 57
Rest
Adaptador Rest
Service
Model
Arquitectura :: Rest 58
Rest
HTTP- Hyper Text Transfer Protocol
URI Header
•Server •Method Body?
•Path? •Params?
•Params?
HTTP - stateless
Header
• State Body?
• Params?
Arquitectura :: Rest 59
¿Qué es REST?
Representational State Transfer
Es un estilo de End-point
arquitectura software Cada una de las
sobre HTTP posibles peticiones
Arquitectura :: Rest 60
¿Qué es REST?
Estilo de arquitectura software sobre HTTP
Relación Cliente-
•El cliente realiza una petición y el servidor da una respuesta.
Servidor
Recursos ID Granularidad
• Autodescriptivos • Procurar id’s no • Controlar el tamaño
• Sustantivos en plural deducibles de la respuesta
GET /search/repo?q=tetris;language:java&sort=stars
Respuesta 204
Respuesta: 201 Respuesta: 200 Respuesta 200 Respuesta 200
(OK) sin
(OK) o el tipo de (OK) o el tipo de (OK) o el tipo de (OK) o el tipo de
contenido o el
error error error error
tipo de error
Se podría
Se podría Se podría
devolver una
devolver el devolver el
referencia o
recurso recurso
recurso
Arquitectura :: Rest 64
Rest
{}
•http://server.com/api/v0/*
•http://api.server.com/v0/**
End-points
Define el path y el
método del recurso
Reorganizar la recepción
de datos de la petición
Gestionar la validación de
Functional P.
los dtos
Delega en el Servicio la
ejecución de la petición
Arquitectura :: Rest 67
Rest
Spring
GET /users/666/name
GET /users/search?q=name:j&order=asc
Arquitectura :: Rest 68
Rest
Spring - Test
Spring-Test: WebTestClient
Exchange
expect*
• expectStatus, expectBody…
Arquitectura :: Rest 69
Shop
{}
https://github.com/miw-upm/apaw-practice
• main es.upm.miw.apaw_practice.adapters.rest.shop
• test es.upm.miw.apaw_practice.adapters.rest.shop
Arquitectura :: Domain 70
Domain
Service
Model
Arquitectura :: Domain
Domain 71
Programación Funcional
Subsistema
complejo, difícil de
utilizar. Librerías
de terceros.
En el desarrollo
del Cliente2 no se
puede reutilizar el
código del
Facade Cliente1.
Arquitectura :: Domain 74
Facade
Propósito: Estructural. Ámbito: objeto
Propósito
•Define un
conjunto de
algoritmo
haciéndolos
intercambiables
dinámicamente
Strategy
Arquitectura :: Domain 76
Observer
Propósito: Comportamiento. Ámbito: objeto
Propósito
• Se define una
dependencia entre
uno a muchos, del
tal manera, que
cuando cambie
avise a todos los
objetos
Observer: OOP
dependientes
Arquitectura :: Domain 77
Publisher
Propósito: Comportamiento. Ámbito: objeto
Propósito
• Se permite que un
publicador envíe
mensajes de forma
asincrónica a varios
subscriptores
interesados, sin
crear
dependencias.
Publisher: FP
Arquitectura :: Domain 78
Programación Reactiva
Reactive Programming
•Programación Funcional
•Programación Asíncrona
Arquitectura :: Domain 79
Programación Reactiva
Proyectos
ReactiveX
•JavaScript, Java, Python, C#, PHP, C++, Swift, Go, Kotlin, Ruby, Scala,…
•http://reactivex.io/
RxJS - Javascript
•Angular
•Clase: Observable
•https://rxjs.dev/guide/overview
Project-reactor - Java
•Java - Spring
•Clases: Mono & Flux
•https://projectreactor.io/docs/core/release/reference
•https://projectreactor.io/docs/core/release/api
Arquitectura :: Domain 80
Programación Reactiva
Sincronización Subscripción
Tecnología Proceso
Fusión Coleccionar
combineAll, subscribe
filter, skip, take
RxJS map, buffer, concatAll, •next
•error
pipe, catchError mergeAll •complete
Component
Service HTTP Rest Service Persistence
•subscribe()
createArticle() {
this.articleService.create(this.newArticle).subscribe(
item => this.item = item;
);
}
Arquitectura :: Domain 83
Programación Reactiva
Funciones
Arquitectura :: Domain 84
Programación Reactiva
{}
https://github.com/miw-upm/apaw
• Package: es.upm.miw.reactive
Reactive in action
• StreamAsynchronous
• ReactiveService
• ReactiveComponent
Ejercicios
https://github.com/miw-upm/apaw-practice
• main es.upm.miw.apaw_practice.business.services.shop
• test es.upm.miw.apaw_practice.business.services.shop
Arquitectura :: Adapter 90
¿Qué es GraphQL?
Es un lenguaje
de consulta y
modificación
de un API.
Arquitectura :: Adapter 91
GraphQL
Características
GraphQL
Datos Operaciones
Petición Respuesta
Arquitectura :: Adapter 93
GraphQL
Implementaciones
graphql-java-kickstart
• https://www.graphql-java-kickstart.com
• https://github.com/graphql-java-kickstart/samples
graphql-java
• https://www.graphql-java.com/
Arquitectura :: Adapter 94
GraphQL
{}
https://github.com/miw-upm/apaw-shop-architectures
• Proyecto: shop-three-layers-graphql
Reactive in action
• schema.graphqls
• *Query & *Mutation
Ejercicios
Service
Model
Arquitectura :: Presentation 96
Angular
Presentación
Arquitectura :: Presentation 97
Angular
Presentación
Arquitectura :: Presentation 98
Android
Presentación
Arquitectura :: Data 99
Por hacer…
Microservicios
•Pattern
•Spring-Cloud