Ingeniera Web

Arquitecturas de una
Aplicacion Web

Copyright2017EdwinValencia
 Visin General

Arquitecturas de una aplicacin web

Introduccin
Arquitecturas de Software
Desarrollo de arquitecturas
Patrones y frameworks
Especificaciones de las Aplicaciones web
Arquitecturas de una Aplicacin Web
Tipos de Architecturas
MVC, Client-Server, N-Layer, JSP Model 1 and 2,
Apache Struts, JSF
Resumen
Copyright2017EdwinValencia
 Que es entiendes por arquitectura?

INTRODUCCION

Copyright2017EdwinValencia
 Arquitecturas de Software

Una Arquitectura se define [...] como la organizacin fundamental

de un sistema, embebida en sus componentes, sus relaciones
entre si y con el entorno, y los principios que gobiernan su diseo
y evolucion.(IEEE Architecture Working Group, P1471, 1999)
Las Arquitecturas describen la estructura:
Componentes de software de sistemas, sus interfaces y
relaciones
Aspectos dinamicos y estticos
Diseo de sistemas software
Las Arquitecuras conectan fases del desarrollo de
software
Requirimientos mapeados iterativamente a componentes y sus
relaciones

Copyright2017EdwinValencia
 Arquitecturas de Software

La Arquitectura es el conjunto de decisiones de diseo [...] que

mantienen sus implementadores y encargados de mantenimiento, donde
el ejercicio de la creatividad no es necesaria.(Desmond F. DSouza and
Alan C. Wills, 1999)
Las arquitecturas describen diferentes puntos de vista
Vista conceptual: entidades del dominio de la aplicacion y sus
relaciones
Vista de procesos: ejecucion de sistemas, concurrencia, sincronizacion
Vista de implementacin: artefactos de software (subsistemas,
componentes, codigo fuente)
Vista en tiempo de ejecucin: componentes en tiempo de ejecucion y
su comunicacion
Las arquitecturas hacen los sistemas comprensibles y
controlables
Estructurandolos acorde a diferentes puntos de vista
Permite la comunicacion entre diferentesstakeholders
Copyright2017EdwinValencia
 Desarrollando Arquitecturas
Influencias sobre las Arquitecturas

Requerimientos Funcionales
Clientes
Usuarios
Otros Stakeholders

Arquitectura

Requerimientos No Funcionales
Rendimiento
Escalabilidad
Reusabilidad
Otros?

6
Copyright2017EdwinValencia
 Desarrollando Arquitecturas
Influencias sobre las Arquitecturas

Aspectos Tecnicos
Sistema Operativo
Middleware
Legacy Systems
Otros?

Arquitectura

Experiencia con
Arquitecturas existentes
Patrones
Administracion de Proyectos
Otros?

7
Copyright2017EdwinValencia
 Desarrollando Arquitecturas

Recordar, los requerimientos estan sujetos a

cambios
Cambio organizacional y entorno
Requerimientos iniciales ambiguos

Por lo tanto, los enfoques iterativos son los

medios sugeridos para el desarrollo
Pro: Ayuda a mitigar los riesgos de diseo
Precaucin: No garantiza una buena arquitectura

Copyright2017EdwinValencia
 Patrones y Frameworks

Patrones describen problemas de diseo

recurrentes
Hay 3 tipos de patrones
Patrones arquitecturales (e.g. MVC)
Patrones de diseo (e.g. Publisher-Subscriber)
Lenguaje (e.g. Counted-Pointer in C++)
Son una guia, la implementacin debe estar
conectada con el problema especfico
Los Patrones deben estar integrados entre
si!
Copyright2017EdwinValencia
 Patrones y Frameworks

Frameworks: otra opcion para reutilizar

arquitecturas existentes
Algo que proporciona un marco para ser completado!
Reutilizacion de objetos de software
existente que solo necesitan configurarse
apropiadamente
Atado a una tecnologia especfica
Requiere entrenamiento
Alto costo de interrupcion
Nivel de personalizacion no siempre aceptable

Copyright2017EdwinValencia
 Especificaciones de la Web apps

Altas demandas de calidad

Seguridad
Extensibilidad
Adaptabilidad
Estabilidad
Rendimiento
Amplio rango de soluciones tecnicas que
pueden ser integradas.
Dificil evaluar demandas de calidad (varios
componentes)
Dificil de resolver (donde est el problema?)
Copyright2017EdwinValencia
 Especificaciones de la Web apps

Falta de homogeneidad e inmadurez de las

soluciones tecnicas
Rapidos ciclos de vida de productos
Muchos componentes: open source calidad?
Falta de estandares

Requerimientos Globales
Multi linguas
Adaptacion Cultural?
E.g. Google for Korea

Copyright2017EdwinValencia
 ARQUITECTURAS DE
UNA APLICACION WEB

Copyright2017EdwinValencia
 Tipos de Arquitecturas

Aspecto de Capas
Separacin de intereses
A cuantos usuarios concurrentes serviremos?
Compartir necesidades entre multiples aplicaciones?
(e.g., securidad)
Aspecto de datos
Que tipo(s) de datos seran entregados?
Structurados vs. no estructurados
Bajo demanda vs. tiempo real
Cuales son los requerimientos de ancho de banda?
Tamao y naturaleza de los datos
Una vez mas, intereses del pblico
Copyright2017EdwinValencia
 Tipos de Arquitecturas

Arquitectura de una Plataforma Web (WPA)

Plataforma = Infraestructura
Hardware
Modulos y configuraciones de Software
Seleccion de una plataforma software (e.g., J2EE,
python, javascript, .NET)
Arquitectura de una Aplicacin Web (WAA)
Vista conceptual de como los procesos clave del
negocio y necesidades son separadas e
implementadas
Muchas veces de dominio especfico
Mayor complejidad requiere mayor modularidad
Copyright2017EdwinValencia
 Ejemplo de una WAA

Web Application

Presentation BusinessLogic DataManagement

Personalization Security Search

Copyright2017EdwinValencia
 Arquitectura (Plataforma) web generica

La plataforma esta basado en

TCP/IP
HTTP
HTML
Es esencialmente una arquitectura Client/Server
En terminos de patrones una de las mas sencillas
Pero aun as las cosas pueden ser complejas
Componentes en la red (firewall, proxy, balanceo de
carga)
Componentes en la intranet (Web server, application
server, data base, legacy systems, web services)
Copyright2017EdwinValencia
 Modelo Vista Controlador

Patron arquitectural para Smalltalk (1979)

Separa datos y presentacin
Facilita el desarrollo

Copyright2017EdwinValencia
 Modelo Vista Controlador
Modelo
Encapsula el estado de la aplicacion
Responde a consultas del estado
Expone la funcionalidad de la aplicacin
Notifica cambios a la vista
Vista
Interpreta los modelos
Solicita actualizaciones a los modelos
Envia la interaccion del usuario al controlador
Permite al controlador seleccionar una vista
Controlador
Define el comportamiento de la aplicacin
Mapea acciones del usuario y actualiza el modelo
Selecciona la vista para responder
Uno por cada funcionalidad
Copyright2017EdwinValencia
 Arquitecturas Web: Especificaciones
Limitaciones tecnologicas
HTTP
Amplia variedad de soluciones tecnicas
Servidores de aplicacin, proxies, firewalls, legacy applications
Dificultad para verificar la calidad
e.g., rendimiento dependen de varios componentes, como base de datos,
ancho de banda de la red, procesador, memoria, codigo,
Dificultad para mejorar la calidad
e.g., el rendimiento del cdigo no puede cambiar de forma sustancial el
rendimiento general
Soluciones tecnicas no homogeneas e inmaduras
Cortos ciclos de vida del producto
Falta de estandares impiden la integracion de componentes de diferentes
fabricantes
Muchas soluciones son open source: continuidad de desarrollo, extensibilidad,

Acceso global a aplicaciones web
Internacionalizacion, diferencias culturales

Copyright2017EdwinValencia
 Modelo-Vista-Controlador 2 (MVC 2)

Adaptacion del MVC para la Web

Conexion sin estado entre el cliente y servidor
Notificacion de cambios en la vista
Volver a consultar el servidor para descubir
modficaciones del estado de la aplicacin

Copyright2017EdwinValencia
 Client/Server (2-Layer)

Client

Client

Server

Web/App Server Services

Database Dynamic HTML

Static HTML

Copyright2017EdwinValencia
 Arquitecturas de N-Capas
Client

Firewall

Proxy

Presentation Layer
Web Server

Business Layer
Application Server Backend
(Business Logic, Connectors,
(Legacy Application,
Personalization, Data Access)
Enterprise Info System)

Data Layer
DBMS B2B

Copyright2017EdwinValencia
 Porque una Arquitectura de N-Capas?

La separacion de servicios en la capa de

negocios promueve la reutilizacion entre
aplicaciones
Pobre acoplamiento cambios reducen el impacto en
todo el sistema.
Mas mantenibilidad (en terminos de codigo)
Mas extensible (modular)
Ventajas y desventajas
Complejidad innecesaria
Mas puntos de falla

Copyright2017EdwinValencia
 Arquitectura JSF

2
5
Copyright2017EdwinValencia
 Middleware

2
6
Copyright2017EdwinValencia
 Arquitectura: vista funcional (Frontend
Backend)

2
7
Copyright2017EdwinValencia
 Arquitectura: componentes y tecnologa

2
8
Copyright2017EdwinValencia
 Arquitectura vista de despliegue

Tanto el Frontend como el Backend se

despliegan en el mismo servidor de
aplicaciones, el cual permitir el acceso a la
aplicacin a travs del protocolo HTTP,
soportado por todos los navegadores web

2
9
Copyright2017EdwinValencia
 FINALMENTE

Copyright2017EdwinValencia
 Cosas a tener en cuenta
(resumen)

Buen diseo de la arquitectura es crucial

Puedes aprovechar patrones y frameworks
Ambos tienen ventajas y desventajas
El diseo web esta restringido a la
infraestructura
MVC es un patron usado comunmente

Copyright2017EdwinValencia
 Bibliografia

Lectura obligatoria
Kappel, G., Proll, B. Reich, S. & Retschitzegger, W.
(2006). Web Engineering, Wiley & Sons. 4th Chapter

Web links
Model-View-Controller pattern
http://en.wikipedia.org/wiki/Model-View-Controller

Copyright2017EdwinValencia
 Preguntas?

Copyright2017EdwinValencia
 Preparacin del entorno de desarrollo

Node.js and NPM de https://nodejs.org/en/ Entorno de

ejecucin javascript open-source y su gestor de paquetes.
Verificar la instalacin: C:\Users\Edwin>node -v
Angular CLI Interface de lnea de comandos para angular
JDK AND ECLIPSE for Java EE Developers, utilizaremos
la versin jdk 1.8 y eclipse neon.3
TypeScript plugin for EclipseA typed superset of
JavaScript that compiles to plain JavaScript.
Terminal plugin for EclipseA fully working command-
line Terminal inside Eclipse.
Basic TypeScript, HTML and Eclipse usage knowledge

Copyright2017EdwinValencia