Disertante:

Introducción a arquitecturas de aplicaciones web y

frameworksPrácticas, patrones y factores para la

elección del framework

Disertante:

symfony-community.com

Colaboradores:• Excedesoft S.A.• Lic. Fabian Castillo• Ing. Emiliano Viada

presentacióncomunidad

Destinatarios:• Estudiantes• Profesionales• Empresas - Instituciones

¿Quiénes somos?

Objetivo del seminario:

Proveer al estudiante, profesional o empresa con los conceptos necesarios

para poder elegir un framework.

Disertante:

Contenido(temario)

• Concepto de aplicación web• Evolución de las aplicaciones web• Aplicaciones cada vez mas complejas.

• Concepto de arquitectura• El rol del arquitecto.• Cuestiones

• Concepto de framework• Que es un framework? • Ventajas y desventajas de utilización de un framework.

• Patrones arquitecturales• Diferencia entre patrones computacionales y arquitecturales.• Patrones arquitecturales mas populares

• Factores comerciales-técnicos para la elección del framework.• Técnico y de gestión: arquitecturales, lenguajes, frameworks, prácticas, estándares,

escalabilidad, soporte• Institución o empresa: costos, portabilidad, curva de aprendizaje, • Comercialización: puntos de venta, ventajas competitivas.

• Demostración de conceptos en práctica..

Disertante:

Concepto Aplicación Web

Usuario

PC - Browser

Internet

Servidor

Solicita Pagina

RequerimientoURL

HTML, CSS, JS,Imágenes

RenderizaContenido

WebServer - Sesión

- Negocio- BD- Recursos

Cliente Medio - HTTP

Arquitectura Cliente - Servidor

Aplicación

Una aplicación web es un programa que se ejecuta sobre la plataforma web. Es decir, el usuario maneja dicho programa desde el explorador, que por medio dela red de internet (o intranet) se comunica con el servidor para el procesamiento

del requerimiento (tarea o función).

Disertante:

Evolución de aplicaciones

PC - Browser

Internet

Solicita Pagina

Requerimientos

HTML, CSS,Imágenes

RenderizaContenido

WebServer

MúltiplesAplicaciones

Móviles

PartnerServer

App InterfaceRica – JS Driven

B2B ContentJson, SOAP, XMLs

Nuevos tipos de aplicaciones:

• Web• Móviles• Servicios Web • APIs

Core Componets

Negocio

App App

Disertante:

Nuevos tipos de aplicacionesPC - Browser

WebServer

MúltiplesAplicaciones

Móviles

B2B-

B2C

Recursos Limitados (3G, hard..)App Interface Rica

Javascript - Ajax drivenUtilización de HTML5 – CSS3

Responsive designBackend – Rest calls – Busines layer

Interface para el desarrollador:Librerías que permiten la integración de

ambas aplicaciones.Funciona en combinación de web

services.

Core Componets

Negocio

App

App

Web Services

APIs

Características

Sin limitaciones.Mayor calidad gráfica,mas ancho de banda.

En su mayoría Backend Development.

RPC, Rest Calls (json, xml), SoapMecanismo de Autentificación.

App

Arquitectura

Disertante:

Tendencias. Más complejidad.

• Interfaces ricas, animadas, Interactivas

• Más diseño de la experiencia.

• Mas simplicidad.

• B2B o B2C• Alianzas Estratégicas.• Redes sociales• APIs

• Soporte múltiples dispositivos

• Diferentes formatos y tamaños de display.

• Diferentes capacidades.

• Internacionalización• Regionalización• Geo localización• Distribución

Global Portables

Experienciadel usuario

Integración estratégica

Arq

uit

ectu

ra

Disertante:

La importancia de la arquitectura

Una arquitectura es el conjunto de decisiones significativas sobre la

organización de la aplicación web que define los principios que guían el

desarrollo, los componentes principales del sistema, sus responsabilidades y la

forma en que se interrelacionan.

“

“

Disertante:

¿ Quién, Cuándo, y Cómo se gestionan estas complejidades arquitecturales?

Negocio

Estructura código

Acceso a datos

Escalabilidad

Performace

Integración con partnersAdaptable a los cambios

Calidad

Múltiples presentaciones

Cuál es nuestro alcance en términos técnicos?

Reutilización

Costos

CUANDO = YA !!• Análisis requerimientos

funcionales, operativos, etc.• Priorización, proyección features

y capacidades del sistema.

QUIEN = Arquitecto

COMO = Framework

• Si el framework es maduro, muchas de estas cuestiones ya vienen incorporadas y probadas.

• Queda por investigar los requerimientos tecnologicos nuevos y ponderar el riesgo.

Disertante:

¿Qué es un framework?• Librerías, componentes y herramientas• Provee dirección y límites.• Proveer una arquitectura madura, experiencias y

conocimiento.¿ Para qué?• Para la construcción de aplicaciones complejas• De manera rápida, escalable y mantenible.• Con calidad, testeables, robustas.

Disertante:

Features de un framework webArquitecturalmente:• Application controller, Filter• Enrutamiento• MVC• ORM

Componentes:• App.Setting• Forms• Web-services• Mailing• I18n y l10n

• Ajax Integration• Tasks • Generate-admin• Unit-testing

Consideraciones:

1. Licenciamiento

2. Escalable

3. Soportado (duración?)

4. Seguro

5. Estable

6. Documentado

Disertante:

Web Design Patterns & Best practices.Patrones Arquitecturales y Frameworks

Web Design Patterns

(Patrones/Framework)

Disertante:

¿Qué es un Patrón?Patterns

Un patrón es una solución general reutilizable para un problema que se repiteuna y otra vez dentro de un contexto dado.

- No es absoluto (sino conceptual)- Es un conjunto de buenas prácticas.

Estructura de un Patrón• Nombre. Es crucial, debe ser realmente descriptivo.• Propósito.• Esbozo del patrón. Generalmente, no siempre, un diagrama UML.

Computacionales • Resuelven problemas

algorítmicos

Arquitecturales• estructura – organización• performance de la aplicación• escalabilidad• alta disponibilidad, etc.

Tipos

Disertante:

Patrones Arquitecturales

Patterns

Los patrones arquitecturales son bien definidos en 3 grandes capas dentro de la arquitectura de software:

- Presentation layer: - Presentación de información - Gestión de interacciones.- Captura y validación entradas.

- Domain layer: - Gestión de negocio, reglas, transacciones

- Data source layer:- Gestión de la información, persistencia y

recuperación de los datos. - base de datos- messaging,- services, etc.

Domain Logic Pattern

Data source Patterns

Web Presentation Patterns

Distribution Patterns

Session State Patterns

Concurrency Patterns

Base Patterns

Disertante:

Patrones de Arquitectura más populares

Patterns

- Presentation Patterns:- Front Controller- MVC (Model-View-Controller)- Template View- Multi-step View

- Domain Logic Patterns:- Transaction script- Table Module- Domain Model

- Data Source Patterns:- Object-Relational Mapping (ORM)- Object-Document Mapping (ODM)

Disertante:

Application Controller

Presentation

Patterns

Usuario

http://www.myblog.com/• index.php?accion=contacto• index.php?accion=post-recientes• Index.php?accion=comentar-post

ApacheServer

result

Browser App. Controllerindex.php

contacto.php

request

URL

.htaccess

post-reciente.php

comentar.php

intancia

Propósito:- Única puerta de entrada

- Gestión de requests.- Enrutamiento de acción.- física del código de la URL.

Variantes:- Front-controller, Page-Controller

Disertante:

Ejemplo PHP

Presentation

Patterns

Consideraciones:

- Utilización de .htaccess para forzar la redirección al index.php

- Los archivos .php por si mismos no deberian ejecutar ninguna lógica.

Disertante:

Model-View-Controller

Presentation

Patterns

Propósito:- Organiza la aplicación en tres capas físicas-lógicas.- La primera gestionará los requerimientos (controlador)- Una capa de negocio (modelo)- Y la ultima de presentación (vista)

Model View

ControllerA demanda

Datos

REQUESThttp – cli, et

RESPONSEHtml, rss, xmlJson, etc

Browser

Disertante:

Model-View-ControllerPresentation

Patterns

Browser AC Controller Model View

Invoca acciónInvoca método

Prepara datos

Renderiza(datos)

HTML

request

GET - POST

Disertante:

Model View Controller

Presentation

Patterns

Usuario

ApacheServer

result

Browser App. Controller

Controller

Model

View

request

request response

• Controller = App. Controller + Actions• Model = Clases de negocio + Persistencia• View = Presentación

Disertante:

Model View Controller

Presentation

Patterns

Consiste de 3 niveles:

- El Modelo representa la información con la cuál la aplicación opera, es decir, su lógica de negocio.

- La Vista se encarga de presentar la información del Modelo dentro de una página web para la interacción con el usuario.

- El Controlador responde a las acciones del usuario y lleva a cabo los cambios en el Modelo o en la Vista según sea necesario.

El patrón MVC separa la lógica de negocio (model) y la presentación (view),dándonos una gran mantenabilidad de la aplicación. Por ejemplo, si una aplicaciónnecesita presentar la data en diferentes vistas (standard browsers, mobile, consola),solo se necesita una nueva vista manteniendo el controlador y el modelo.El controlador ayuda a ocultar el protocolo usado (HTTP, Consola, Emailing, etc)del modelo y de la vista; y el Modelo abstrae la lógica de negocio.

Disertante:

Propósito:- Lograr URL amigables- Independizar la ubicación

física del código de la URL.- Flexibilidad – mantenabilidad de rutas.

URL RoutingPresentation

Patterns

Usuario

ApacheServer

result

Browser

ActionController

Model

View

request

request

responseRouting

App. Controller

Mapear un requerimiento (URL) con una acción. (Caso de Uso)

Disertante:

Antes

Frameworks

Pensemos en esta url:http://www.myblog.com/publico/abms/post.php?id=123456

Desventajas:- Revelamos parte de la arquitectura de la aplicación.- No es amigablemente legible.- Si una url debe de ser cambiada (porque el nombre del script cambió), cada link que apunta a dicha url debe de ser modificado.

Disertante:

Después

Frameworks

URL amigable:http://www.myblog.com/post/symfony-framework

Beneficios:- Las urls son más amigables y fácil de recordar.- Podemos cambiar el formato de la url independientemente.- Si cambiamos el nombre de un script, podemos mantener la misma url.

Disertante:

Multi-step ViewPresentation

Patterns

Template + View Logic + Layout = Presentación

header

template

header

template

footer

+ =

footer

layout layout

templatetemplate

+ =

Contenido Estático

Contenido Dinámico

Contenido-Vista Final

Resulta de la acción especifica

- Propone organizar la vista- Separa el contenido resultante de una acción especifica del contenido

estático

Disertante:

Propósito:- Separación- Mantenabilidad – orden. - Reutilización.

Multi-Step ViewPresentation

Patterns

Usuario

ApacheServer

result

Browser

ActionController

Model

Template

request

request

responseRouting

App. Controller

Integración con MVC.

Layout

Disertante:

Transaction Script

Domain

Patterns

Usuario

ApacheServer

result

Browser

subscripcion.phprequest

URL

post-reciente.php

comentar.php

Propósito:- Negocio se piensa en términos de

transacciones- Colección de scripts- Cada script se corresponde con la petición

del usuario

<> Transaction script

<< Transaction script

>> Transaction script

Disertante:

Domain Model

Domain

Patterns

Propósito:- Negocio se piensa en términos de entidades de negocio y sus

relaciones- Cada entidad maneja su propia lógica de negocio.- Orientación a objetos.

Usuario Post

Comment

1 *1

*

1

*

Disertante:

Domain ModelDomain

Patterns

Disertante:

Persistencia

Propósito:- Simplicidad, escritura código en

términos de negocio.- Independencia de plataforma

Implementaciones:- Java: Hibernate Ebean - PHP: Doctrine, Propel , PdoMap

Object Relat. MappingPresentation

Patterns

Usuario

ApacheServer

result

Browser

ActionController

Template

request

request

responseRouting

App. Controller

Capa de abstracción. Permite mapear las clases de dominio con la base de datos relacional.

Layout

Mapping

Domain Model

MySql,Oracle, etc

Disertante:

ORM - DoctrinePresentation

Patterns

Conexión

Utilización

Mapeo

Disertante:

ORM

Data Source

Patterns

El patrón Object-Relational Mapping nos permite acceder a base de datosrelacionales en una manera orientada a objetos, proveyendo una interfaz que nospermite traducir lógica de los objetos en lógica relacional y viceversa.

Un ORM nos facilita un conjunto de objetos que nos dan acceso a la dataalmacenada en una base de datos, manteniendo las reglas del negocio en ellos.

Uno de los mayores beneficios al utilizar un ORM es la capa de abstracción dedatos, la cual previene utilizar una sintáxis específica a un motor de base de datosdado. Automáticamente, traduce las acciones realizadas por objetos a la queryoptimizada para la base de datos.

La capa de abstracción encapsula la lógica de la data. El resto de la aplicación nonecesita saber de las consultas SQL que se llevan a cabo.

Disertante:

Routing

Propósito:- Forzar la ejecución y orden de

tareas comunes a cada request.- Extensión del funcionalidad

común.

Implementaciones:- Chain or responsibility- Security, Routing, Loging,

Caching, Rendering

FilterPresentation

Patterns

Usuario

ApacheServer

result

Browser

ActionController

Template

request

request

response

Filtros

App. Controller

Ejecución de múltiples tareas, previo y post la ejecución de la acción.

Layout

Model

Disertante:

FiltrosFrameworks

Los filtros implementan el patrón de diseño Chain of Responsability, el cual le permite a un objeto enviar una petición sin conocer el objeto que lo recibirá y manejará. La petición es enviada desde un objeto a otro, formando ambos partes de la cadena, en la cuál cada objeto de esta cadena puede manejar la petición, enviarla a otro objeto o hacer ambas.

Routing

ActionController

Template

request

response

Filtros

App. Controller

Layout

Model

SecurityCatching

LoggingCustom

Disertante:

Factores comerciales y técnicosVentajas competitivas

ComercialY técnico

Disertante:

Ventajas comerciales

Puntos de venta

• Mantenible y escalable• Independencia del equipo de

desarrollo. • Codificación bajo estándares y

mejores practicas de la industria.

• Soporte

Gestión y producción

• Paradigma de convención• Escalar un equipo• Minimiza la curva de

aprendizaje.• Setup del entorno.

• Productividad• Scarfolding – Generación de

código• Menos errores• Menos costos

• Calidad

Disertante:

Bibliografíay referencias.

BibliografíaY referencias

Disertante:

Bibliografía

Libros: URL Referencia:

• Patterns of Enterprise Application Architecture. Martin Fowler. ISBN 0-321-12742-0.

• Pattern-Oriented Software Architecture.

Wiley, 2000.

• http://martinfowler.com/eaaCatalog/• http://www.symfony-project.org• http://www.phpframeworks.com/

Disertante:

Antes de finalizar.

Gracias

Disertante:

Colaboración Muchas Gracias

www.symfony-community.com

Disertante:

Conclusion?Which will be your primary focus?

© your company name. All rights reserved.

Title of your presentation