SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
Arquitecturas
Adaptativas de
Componentes Web
Madrid 23-24 Noviembre
Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
Arquitecturas Sólidas
de Componentes Web
Madrid 23-24 Noviembre
Los componentes son el resultado de un
minucioso proceso de diseño. Algo que
representa nuestra realidad
Arquitecturas Sólidas de Componentes Web3
La Tecnología de Componentes ha
venido a resolver los problemas de
modularidad para hacer
Aplicaciones Web
Arquitecturas Sólidas de Componentes Web4
Formas de Adaptación
Estático Dinámico
Ayer Hoy
Fijo
Sólido
Estanco
Cambiante
Flexible
Fluido
La experiencia de uso debe adaptarse a
las condiciones espaciales del entorno
donde se ubica
Adaptación Espacial
Arquitecturas Sólidas de Componentes Web5
También es importante dar soporte a un
acceso continuo y permanente a la
experiencia de uso
Adaptación Temporal
Puntual Permanente
Ayer Hoy
Discreto
Instantáneo
Faseado
Continuo
Duradero
Constante
Formas de Adaptación
Arquitecturas Sólidas de Componentes Web6
Las experiencias de hoy se desarrollan
dentro del plano social de usuarios
conectados
Adaptación Social
Individual Social
Ayer Hoy
Personal
Privado
Propio
Grupal
Público
Colectivo
Formas de Adaptación
Arquitecturas Sólidas de Componentes Web7
Centralizado Distribuido
Ayer Hoy
Focalizado
Local
Único
Dispersas
Ubicuo
Múltiple
Se pretende hacer dispersión de las
actividades de negocio a lo largo de
toda la Web
Adaptación Contextual
Formas de Adaptación
Arquitecturas Sólidas de Componentes Web8
Aislado Inmersivo
Ayer Hoy
Acotado
Limitado
Accesible
Pervasivo
Completo
Vinculante
Las nuevas formas de experiencia
digital proponen soluciones inmersivas
brutales
Adaptación Ambiental
Formas de Adaptación
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
1
Single Responsibility
YX Z
A
B
C
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
2
Single Responsibility
Open Close Design
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
3
Single Responsibility
Open Close Design
Liskov Substitution
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
4
Single Responsibility
Open Close Design
Liskov Substitution
Interface Segregation
on ()
off()
on ()
off()
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
5
Single Responsibility
Open Close Design
Liskov Substitution
Interface Segregation
Dependency Inversion
Arquitecturas Sólidas de Componentes Web
Arquitecturas Sólidas
de Componentes Web
1
Single Responsibility
Open Close Design
Liskov Substitution
Interface Segregation
Dependency Inversion
S
O
L
I
D
Arquitecturas Sólidas de Componentes Web15
La Adaptación Como
Arquitectura
Necesitamos Idear Nuevas Formas
de Desarrollo de Software
Centradas en la Adaptación
Arquitecturas Adaptativas
de Componentes Web
Madrid 23-24 Noviembre
Existe otra forma de hacer arquitecturas.
Una en la que los componentes se
adaptan a cada contexto de uso
Arquitecturas Adaptativas de Componentes Web
Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
17
Arquitecturas Adaptativas
de Componentes Web
Arquitecturas Adaptativas de Componentes Web18
Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
Arquitecturas Adaptativas
de Componentes Web
Arquitecturas Adaptativas de Componentes Web19
Arquitecturas Adaptativas
de Componentes Web
Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas
de Componentes Web
Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
Arquitecturas Adaptativas de Componentes Web21
Core
CORE
Componentes &
Extensión Adaptativa
El sujeto de la
extensión adaptativa
class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}
Arquitecturas Adaptativas de Componentes Web
Extensión
La lógica de
extensión adaptativa
El sujeto de la
extensión adaptativa
Core
CORE
EXTENSION
Componentes &
Extensión Adaptativa class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}
function Ext (core) {
}
core.map = function (fn) {}
core.reduce = function (fn) {}
core.filter = function (fn) {}
core.every = function (fn) {}
core.some = function (fn) {}
Arquitecturas Adaptativas de Componentes Web
Contrato Extensión
La colección de
capacidades del
core
La colección de
capacidades
del core
Contrato Core
CORE
EXTENSION
Componentes &
Extensión Adaptativa class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}
function Ext (core) {
}
core.map = function (fn) {}
core.reduce = function (fn) {}
core.filter = function (fn) {}
core.every = function (fn) {}
core.some = function (fn) {}
Arquitecturas Adaptativas de Componentes Web
Componentes &
Extensión Adaptativa
Dependencias que
hacen operar a la
extensión
Contrato de
Extensión Adaptativa
Symbol.iterator
class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}
function Ext (core) {
}
core.map = function(fn) {
let ys = []
for (let x of this)
ys = [...ys, fn(x)]
return ys
}
core.reduce = function (fn) {}
core.filter = function (fn) {}
core.every = function (fn) {}
core.some = function (fn) {}
CORE
EXTENSION
Arquitecturas Adaptativas de Componentes Web
Componentes &
Extensión Adaptativa
La forma en que la
extensión trasforma
al core
Técnica Extensión
Symbol.iterator
class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}
function Ext (core) {
}
core.map = function(fn) {
let ys = []
for (let x of this)
ys = [...ys, fn(x)]
return ys
}
core.reduce = function (fn) {}
core.filter = function (fn) {}
core.every = function (fn) {}
core.some = function (fn) {}
CORE
EXTENSION
Arquitecturas Adaptativas de Componentes Web
Adición Intercesión
Especialización Delegación
TécnicasEstáticas
EarlyBinding
TécnicasDinámicas
LateBinding
Adaptación en Anchura Adaptación en Profundidad
Structural Adaptation Behavioural Adaptation
Extensión
Core
Extensión
Core
Core
Extensión
Extensión
Core
Hooks de Extensión
Adaptativa
Arquitecturas
Adaptativas en Acción
Madrid 23-24 Noviembre
Es posible convertir las técnicas
adaptativas en una realidad dentro del
mundo del desarrollo front
Arquitecturas Adaptativas en Acción
Qué
Necesitamos
Arquitecturas Adaptativas
en Requisitos
Arquitecturas Adaptativas en Acción
Arquitecturas Adaptativas
en Requisitos
La construcción de soluciones basadas en
componentes adaptativos debería resultar
lo más declarativa posible
Extensión Declarativa
A B
A+B
Cada componente y extensión adaptativa
debería operar como una caja negra para
el diseñador de producto
Extensión Encapsulada
Sabe cómo
extender
Sabe cómo
conectarse
Arquitecturas Adaptativas en Acción
Arquitecturas Adaptativas
en Requisitos
Deberían poderse instalar extensiones
de forma transparente en tiempo de
carga
Extensión Estática
Igualmente debería ser posible
adaptar los componentes en tiempo
de ejecución a nivel de clase e
instancia
Extensión Dinámicaimport C
C E
Importar
ExtensionExportar
Adaptación
Arquitecturas Adaptativas en Acción
Arquitecturas Adaptativas
en Requisitos
La construcción de soluciones adaptativas
debería basarse en la mera aplicación de
extensiones de catálogo.
Extensión Modular
Las extensiones implementan patrones de
composición por medio de la adaptación
de los componentes del entorno
Extensión Compositiva
Catálogo de
Extensiones
Catálogo de
Componentes
Patrón de
composición
Arquitecturas Adaptativas en Acción
Arquitecturas Adaptativas
en Requisitos
La instalación de extensiones sobre
componentes debería ser un proceso
reversible y permutable
Extensión Reversible
La actividad adaptativa es una cuestión de
perspectivas. Una extensión es también
un artefacto candidato a ser adaptado
Extensión Recurrente
A B CB
Eliminar y seguir
operando
A B C
Arquitecturas Adaptativas en Acción
Arquitecturas Adaptativas
en Requisitos
La lógica adaptativa implementada dentro
de cada extensión debería poder ser
configurable por parámetros ambientales
Extensión Contextual
Origami
Chameleon
PROD
TEST
TEST
PROD
Comportamiento
Paramétrico
Arquitecturas Adaptativas en Acción
Fran Diana Jorge
Component
Developer
Me dedico a crear sistemas de
componentes para mi compañía.
Trato que mis diseños maximicen su
reutilización
Extension
Developer
Mi labor es definir lógica de
extensión adaptativa que fomente la
reutilización de los componentes de
nuestro catálogo
Product
Developer
Mi trabajo consiste en consumir
componentes y extensiones del
catálogo y crear productos
alucinantes
Los Roles de
Origami Chameleon
Arquitecturas Adaptativas en Acción35
Diseño de Extensiones
Adaptativas
Traits
Roles
Subjects
Mixins
Aspects
Lo que resulta fantástico de Origami Chameleon es
que me permite centrarme en diseñar la lógica
adaptativa de nuestro catálogo de extensiones sin
preocuparme de cómo ésta será instalada
Diana
Arquitecturas Adaptativas en Acción
Modelo de Mixins
MIXINS
Cada extensión
se añade como
clase base
Las extensiones
aparecen en el
contrato público
@Mixin
class Storable {
constructor (core) {
this.core = core
this.load ()
}
@Override load () {}
@Override save () {}
}
@Mixin
class Showable {
constructor (core) {
this.core = core
this.show ()
}
@Discard show () {}
@Discard hide () {}
}
Diseño de Extensiones
Adaptativas
Arquitecturas Adaptativas en Acción37
TRAITS
this
this
Modelo de Traits
Las extensiones
aparecen en el
contrato público
Cada extensión
gestiona su
propio contexto
@Trait
class Sequenceable {
constructor (core) {
this.core = core
this.size = this.max-this.min
}
@Before previous() { this.core.value-- }
@Before next () { this.core.value++ }
}
@Trait
class Randomizable {
constructor (core) {}
@Before change() {
let r = random (2)
isOdd(r) && this.previous();
!isOdd(r) && this.next();
}
}
Diseño de Extensiones
Adaptativas
Arquitecturas Adaptativas en Acción38
ASPECTOS
Modelo de Aspectos
Las extensiones
se enganchan a
hooks
provided
except
before
around
after
fnfn
A cada función se
añade hooks de
intercesión
const Previous = 'previous'
const Next = 'next'
@Aspect
class Notifiable {
constructor (core) {}
@Before(Previous) fn(){ fire(Previous) }
@Before(Next) gn(){ fire(Next) }
}
const ANY = '*'
@Aspect
class Async {
constructor (core) {}
@Around(Any) async(fn, ...args){
return new Promise(function (ok, ko) {
setTimeout (function () {
ok(fn(...args))
}, 0)
})
}
}
Diseño de Extensiones
Adaptativas
Arquitecturas Adaptativas en Acción39
SUBJECTS
Modelo de Subjects
Las extensiones
aparecen en el
contrato público
Las extensiones
se acceden
desde una
puerta trasera
@Subject
@Point('Views')
class Views {
constructor (core) {}
get view ( ){}
set view (n){}
set views(views){}
}
@Subject
@Point('Events')
class Events {
constructor (core){}
bind (type, fn) {}
unbind (type, fn) {}
fire (e){}
} Utils(core).Events
.bind (Click, (e)=>{})
.bind (Focus, (e)=>{})
.fire (e)
Utils(core).Views.view =
3
Diseño de Extensiones
Adaptativas
Arquitecturas Adaptativas en Acción40
ROLES
Modelo de Roles
Los eventos de
salida son
notificaciones
emitidas desde
el core
Los eventos del core
mueven el ciclo de
vida reactivo
in
out
init
inject
e1
e2
init(ctx)
inject(ctx)
e3
resolve
@Role
class Rendering {
@State
@Begin
@Guard ('load')
@Route ('data' , 'context')
@Route ('error', 'error')
resolve(){}
@State
@Route ('context', 'context')
@Route ('error' , 'data')
context(){}
@State @End
render(){}
@State @End
error(){}
}
Diseño de Extensiones
Adaptativas
Arquitecturas Adaptativas en Acción41
Diseño de Componentes
Adaptativos
Extensiones
Componentes
Para mi lo verdaderamente formidable de Origami
Chameleon es lo sencillo que resulta diseñar
componentes de forma modular. Escojo unas cuantas
extensiones del catálogo e indico que quiero que
formen parte de mi componente
Fran
Arquitecturas Adaptativas en Acción42
COMPONENT
import Storable from ...
import Loggable from ...
@Component
@Extends(Storable)
@Extends(Loggable)
class Core {
constructor () {}
fx () {}
fy () {}
}
Las
extensiones se
instalan durante
la carga
El componente
se define como
extensible
Las extensiones se
importan como
módulos JS
El componente
está extendido
Core
Storable
Loggable
Diseño de Componentes
Adaptativos
EXTENDS
let cx = new Core ()
let cy = new Core ()
cx.load ()
cy.load ()
import C
Importar
ExtensionExportar
Componente
Extensión Estática Declarativa
Interna
Arquitecturas Adaptativas en Acción
import Reflect from Chameleon
import Storable from ...
import Loggable from ...
@Component
class Core {
constructor () {
if (isWeeked) {
Reflect(this).extensions
.install(Storable)
.install(Loggable)
}
}
fx () {}
fy () {
Reflect(this).extensions
.install(Sortable)
}
}
43
Extensión
dinámica
condicional
Core
Storable
Loggable
Extensión
dinámica
Diseño de Componentes
Adaptativos
REFLECT
import
import
Extensión Dinámica Imperativa
Interna
Arquitecturas Adaptativas en Acción
Componentes
44
Diseño de Productos
Adaptativos
Con Origami Chameleon he conseguido alcanzar
cotas de productividad que antes ni podía imaginar.
Los componentes de nuestro catálogo se descubren y
operan juntos con poco más que aproximarlos
Jorge
Extensiones
Arquitecturas Adaptativas en Acción45
Video CarouselSequenceable
Extensión a
nivel de Clase
sólo si video es
@Component
El Carousel es capaz
de mover cualquier
objeto Sequenceable
Diseño de Productos
Adaptativos
REFLECT
Extensión Estática Imperativa
Externa
import Reflect from Chameleon
import Carousel from ...
import Video from ...
import Sequenceable from ...
import
Reflect(Video).extensions
.install(Sequenceable)
.install(Showable)
let video = new Video()
let carousel = new Carousel(video)
carousel.start()
previous()
next()
new Video():v
install
new Carousel(v)
v.next()
v.previous()
Arquitecturas Adaptativas en Acción46
Extensión a
nivel de objeto
Solo la instancia video
es Sequenceable
Diseño de Productos
Adaptativos
REFLECT
Extensión Dinámica Imperativa
Externa
previous()
next()
new Video():v
install
new Carousel(v)
v.next()
v.previous()
import Reflect from Chameleon
import Carousel from ...
import Video from ...
import Sequenceable from ...
import
let video = new Video()
let carousel = new Carousel(video)
Reflect(video).extensions
.install(Sequenceable)
.install(Showable)
carousel.start()
Video
CarouselSequenceable
Arquitecturas Adaptativas en Acción47
Origami Chameleon en
Acción
Arquitecturas Adaptativas en Acción48
Origami Chameleon en
Acción
Showable Zoomable Tiltable Minimizable
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
on ()
off()
Arquitecturas Adaptativas en Acción49
Origami Chameleon en
Acción
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
Example 05
Focussable
on ()
off()
on ()
off()
Focussable
ZoomableShowable Tiltable Minimizable
Arquitecturas Adaptativas en Acción50
Origami Chameleon en
Acción
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
Example 05
Focussable
Example 06 - 07
Coordinable
on ()
off()
on ()
off()
ZoomableShowable Tiltable Minimizable
Coordinable
click click
Focussable
View BView A
Arquitecturas Adaptativas en Acción51
Origami Chameleon en
Acción
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
Example 05
Focussable
Example 06 - 07
Coordinable
Example 08 - 09
Playable
Sequenceable
Runnable
on ()
off()
on ()
off()
ZoomableShowable Tiltable Minimizable
Coordinable
click click
Focussable
View B
Playable Runnable
next
previous ()
next ()
View A
Sequenceable
Arquitecturas Adaptativas en Acción52
State
Componentes
sólidos
Extensión
Adaptativa
Control
Adaptativo
Modelo de Arquitectura
en Origami Chameleon
A B C
Estado de la
Adaptación
Coordinación
Adaptativa
Condiciones
Ambientales
Arquitecturas
Adaptativas de
Componentes Web
Madrid 23-24 Noviembre
Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com

Más contenido relacionado

Similar a Arquitecturas Adaptativas de Componentes Web

Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Luis Fernando Aguas Bucheli
 
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxLuis Fernando Aguas Bucheli
 
Visual Studio2005
Visual Studio2005Visual Studio2005
Visual Studio2005hvillarreal
 
Commit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine LearningCommit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine LearningRafa Hidalgo
 
Patrones de diseño I
Patrones de diseño IPatrones de diseño I
Patrones de diseño Ijjegonzalezf
 
038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasosGeneXus
 
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...SOFTENG
 
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...FidelValeriano1
 
CrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETCrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETAlberto Diaz Martin
 
Cross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netCross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netAlberto Diaz Martin
 
How To Split The Monolith - From monolith to microservices
How To Split The Monolith - From monolith to microservicesHow To Split The Monolith - From monolith to microservices
How To Split The Monolith - From monolith to microservicesOliver Fierro
 
Ponencia conic 2009_darc
Ponencia conic 2009_darcPonencia conic 2009_darc
Ponencia conic 2009_darcJorge Rodriguez
 
Material teorico
Material teoricoMaterial teorico
Material teoricoJonny Jara
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes WebJavier Vélez Reyes
 
Lanzamiento Visual Studio 2008
Lanzamiento Visual Studio 2008Lanzamiento Visual Studio 2008
Lanzamiento Visual Studio 2008Tonymx
 
Unidad 4
Unidad 4Unidad 4
Unidad 4mi casa
 
Lanzamiento Adobe AIR y Flex 3
Lanzamiento Adobe AIR y Flex 3Lanzamiento Adobe AIR y Flex 3
Lanzamiento Adobe AIR y Flex 3juanozz
 

Similar a Arquitecturas Adaptativas de Componentes Web (20)

Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700
 
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
 
Visual Studio2005
Visual Studio2005Visual Studio2005
Visual Studio2005
 
Commit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine LearningCommit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine Learning
 
Patrones de diseño I
Patrones de diseño IPatrones de diseño I
Patrones de diseño I
 
Asp.net 4
Asp.net 4Asp.net 4
Asp.net 4
 
038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos
 
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...
RoadShow-Azure-PartnersMicrosoft-Nov-2010-Caso de éxito de Softeng Portal Bul...
 
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...
Eric Evans 2003 - Domain-Driven Design - Tackling Complexity in the Heart of ...
 
CrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETCrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NET
 
Cross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netCross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.net
 
How To Split The Monolith - From monolith to microservices
How To Split The Monolith - From monolith to microservicesHow To Split The Monolith - From monolith to microservices
How To Split The Monolith - From monolith to microservices
 
Ponencia conic 2009_darc
Ponencia conic 2009_darcPonencia conic 2009_darc
Ponencia conic 2009_darc
 
Material teorico
Material teoricoMaterial teorico
Material teorico
 
Material de apoyo
Material de apoyoMaterial de apoyo
Material de apoyo
 
Extendiendo Xamarin.Forms
Extendiendo Xamarin.FormsExtendiendo Xamarin.Forms
Extendiendo Xamarin.Forms
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes Web
 
Lanzamiento Visual Studio 2008
Lanzamiento Visual Studio 2008Lanzamiento Visual Studio 2008
Lanzamiento Visual Studio 2008
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Lanzamiento Adobe AIR y Flex 3
Lanzamiento Adobe AIR y Flex 3Lanzamiento Adobe AIR y Flex 3
Lanzamiento Adobe AIR y Flex 3
 

Más de Javier Vélez Reyes

El futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebEl futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebJavier Vélez Reyes
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosJavier Vélez Reyes
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosJavier Vélez Reyes
 
Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónJavier Vélez Reyes
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptJavier Vélez Reyes
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScriptJavier Vélez Reyes
 

Más de Javier Vélez Reyes (10)

El futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebEl futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo Web
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
 
Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de Composición
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
 
El Proyecto Polymer
El Proyecto PolymerEl Proyecto Polymer
El Proyecto Polymer
 
La Web Orientada a Componentes
La Web Orientada a ComponentesLa Web Orientada a Componentes
La Web Orientada a Componentes
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 

Último

contabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superiorcontabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superiorDalia Rodriguez
 
El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)Samuel Solís Fuentes
 
Especificación casos de uso del negocio
Especificación  casos de uso del negocioEspecificación  casos de uso del negocio
Especificación casos de uso del negocioMagemyl Egana
 
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxUPSE
 
Tipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfTipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfCarlosSanchez452245
 
Modelado de Casos de uso del negocio
Modelado de  Casos  de  uso  del negocioModelado de  Casos  de  uso  del negocio
Modelado de Casos de uso del negocioMagemyl Egana
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfUPSE
 
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...juanforero141
 

Último (8)

contabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superiorcontabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superior
 
El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)
 
Especificación casos de uso del negocio
Especificación  casos de uso del negocioEspecificación  casos de uso del negocio
Especificación casos de uso del negocio
 
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
 
Tipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfTipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdf
 
Modelado de Casos de uso del negocio
Modelado de  Casos  de  uso  del negocioModelado de  Casos  de  uso  del negocio
Modelado de Casos de uso del negocio
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
 
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
 

Arquitecturas Adaptativas de Componentes Web

  • 1. Arquitecturas Adaptativas de Componentes Web Madrid 23-24 Noviembre Javier Vélez Reyes @javiervelezreye Javier.velez.reyes@gmail.com
  • 2. Arquitecturas Sólidas de Componentes Web Madrid 23-24 Noviembre Los componentes son el resultado de un minucioso proceso de diseño. Algo que representa nuestra realidad
  • 3. Arquitecturas Sólidas de Componentes Web3 La Tecnología de Componentes ha venido a resolver los problemas de modularidad para hacer Aplicaciones Web
  • 4. Arquitecturas Sólidas de Componentes Web4 Formas de Adaptación Estático Dinámico Ayer Hoy Fijo Sólido Estanco Cambiante Flexible Fluido La experiencia de uso debe adaptarse a las condiciones espaciales del entorno donde se ubica Adaptación Espacial
  • 5. Arquitecturas Sólidas de Componentes Web5 También es importante dar soporte a un acceso continuo y permanente a la experiencia de uso Adaptación Temporal Puntual Permanente Ayer Hoy Discreto Instantáneo Faseado Continuo Duradero Constante Formas de Adaptación
  • 6. Arquitecturas Sólidas de Componentes Web6 Las experiencias de hoy se desarrollan dentro del plano social de usuarios conectados Adaptación Social Individual Social Ayer Hoy Personal Privado Propio Grupal Público Colectivo Formas de Adaptación
  • 7. Arquitecturas Sólidas de Componentes Web7 Centralizado Distribuido Ayer Hoy Focalizado Local Único Dispersas Ubicuo Múltiple Se pretende hacer dispersión de las actividades de negocio a lo largo de toda la Web Adaptación Contextual Formas de Adaptación
  • 8. Arquitecturas Sólidas de Componentes Web8 Aislado Inmersivo Ayer Hoy Acotado Limitado Accesible Pervasivo Completo Vinculante Las nuevas formas de experiencia digital proponen soluciones inmersivas brutales Adaptación Ambiental Formas de Adaptación
  • 9. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 1 Single Responsibility YX Z A B C
  • 10. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 2 Single Responsibility Open Close Design
  • 11. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 3 Single Responsibility Open Close Design Liskov Substitution
  • 12. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 4 Single Responsibility Open Close Design Liskov Substitution Interface Segregation on () off() on () off()
  • 13. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 5 Single Responsibility Open Close Design Liskov Substitution Interface Segregation Dependency Inversion
  • 14. Arquitecturas Sólidas de Componentes Web Arquitecturas Sólidas de Componentes Web 1 Single Responsibility Open Close Design Liskov Substitution Interface Segregation Dependency Inversion S O L I D
  • 15. Arquitecturas Sólidas de Componentes Web15 La Adaptación Como Arquitectura Necesitamos Idear Nuevas Formas de Desarrollo de Software Centradas en la Adaptación
  • 16. Arquitecturas Adaptativas de Componentes Web Madrid 23-24 Noviembre Existe otra forma de hacer arquitecturas. Una en la que los componentes se adaptan a cada contexto de uso
  • 17. Arquitecturas Adaptativas de Componentes Web Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3 17 Arquitecturas Adaptativas de Componentes Web
  • 18. Arquitecturas Adaptativas de Componentes Web18 Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3 Arquitecturas Adaptativas de Componentes Web
  • 19. Arquitecturas Adaptativas de Componentes Web19 Arquitecturas Adaptativas de Componentes Web Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
  • 20. Arquitecturas Adaptativas de Componentes Web Arquitecturas Adaptativas de Componentes Web Contexto Arquitectónico #1 Contexto Arquitectónico #2 Contexto Arquitectónico #3
  • 21. Arquitecturas Adaptativas de Componentes Web21 Core CORE Componentes & Extensión Adaptativa El sujeto de la extensión adaptativa class Core { constructor () {} fx () {} fy () {} [Symbol.iterator] () {} }
  • 22. Arquitecturas Adaptativas de Componentes Web Extensión La lógica de extensión adaptativa El sujeto de la extensión adaptativa Core CORE EXTENSION Componentes & Extensión Adaptativa class Core { constructor () {} fx () {} fy () {} [Symbol.iterator] () {} } function Ext (core) { } core.map = function (fn) {} core.reduce = function (fn) {} core.filter = function (fn) {} core.every = function (fn) {} core.some = function (fn) {}
  • 23. Arquitecturas Adaptativas de Componentes Web Contrato Extensión La colección de capacidades del core La colección de capacidades del core Contrato Core CORE EXTENSION Componentes & Extensión Adaptativa class Core { constructor () {} fx () {} fy () {} [Symbol.iterator] () {} } function Ext (core) { } core.map = function (fn) {} core.reduce = function (fn) {} core.filter = function (fn) {} core.every = function (fn) {} core.some = function (fn) {}
  • 24. Arquitecturas Adaptativas de Componentes Web Componentes & Extensión Adaptativa Dependencias que hacen operar a la extensión Contrato de Extensión Adaptativa Symbol.iterator class Core { constructor () {} fx () {} fy () {} [Symbol.iterator] () {} } function Ext (core) { } core.map = function(fn) { let ys = [] for (let x of this) ys = [...ys, fn(x)] return ys } core.reduce = function (fn) {} core.filter = function (fn) {} core.every = function (fn) {} core.some = function (fn) {} CORE EXTENSION
  • 25. Arquitecturas Adaptativas de Componentes Web Componentes & Extensión Adaptativa La forma en que la extensión trasforma al core Técnica Extensión Symbol.iterator class Core { constructor () {} fx () {} fy () {} [Symbol.iterator] () {} } function Ext (core) { } core.map = function(fn) { let ys = [] for (let x of this) ys = [...ys, fn(x)] return ys } core.reduce = function (fn) {} core.filter = function (fn) {} core.every = function (fn) {} core.some = function (fn) {} CORE EXTENSION
  • 26. Arquitecturas Adaptativas de Componentes Web Adición Intercesión Especialización Delegación TécnicasEstáticas EarlyBinding TécnicasDinámicas LateBinding Adaptación en Anchura Adaptación en Profundidad Structural Adaptation Behavioural Adaptation Extensión Core Extensión Core Core Extensión Extensión Core Hooks de Extensión Adaptativa
  • 27. Arquitecturas Adaptativas en Acción Madrid 23-24 Noviembre Es posible convertir las técnicas adaptativas en una realidad dentro del mundo del desarrollo front
  • 28. Arquitecturas Adaptativas en Acción Qué Necesitamos Arquitecturas Adaptativas en Requisitos
  • 29. Arquitecturas Adaptativas en Acción Arquitecturas Adaptativas en Requisitos La construcción de soluciones basadas en componentes adaptativos debería resultar lo más declarativa posible Extensión Declarativa A B A+B Cada componente y extensión adaptativa debería operar como una caja negra para el diseñador de producto Extensión Encapsulada Sabe cómo extender Sabe cómo conectarse
  • 30. Arquitecturas Adaptativas en Acción Arquitecturas Adaptativas en Requisitos Deberían poderse instalar extensiones de forma transparente en tiempo de carga Extensión Estática Igualmente debería ser posible adaptar los componentes en tiempo de ejecución a nivel de clase e instancia Extensión Dinámicaimport C C E Importar ExtensionExportar Adaptación
  • 31. Arquitecturas Adaptativas en Acción Arquitecturas Adaptativas en Requisitos La construcción de soluciones adaptativas debería basarse en la mera aplicación de extensiones de catálogo. Extensión Modular Las extensiones implementan patrones de composición por medio de la adaptación de los componentes del entorno Extensión Compositiva Catálogo de Extensiones Catálogo de Componentes Patrón de composición
  • 32. Arquitecturas Adaptativas en Acción Arquitecturas Adaptativas en Requisitos La instalación de extensiones sobre componentes debería ser un proceso reversible y permutable Extensión Reversible La actividad adaptativa es una cuestión de perspectivas. Una extensión es también un artefacto candidato a ser adaptado Extensión Recurrente A B CB Eliminar y seguir operando A B C
  • 33. Arquitecturas Adaptativas en Acción Arquitecturas Adaptativas en Requisitos La lógica adaptativa implementada dentro de cada extensión debería poder ser configurable por parámetros ambientales Extensión Contextual Origami Chameleon PROD TEST TEST PROD Comportamiento Paramétrico
  • 34. Arquitecturas Adaptativas en Acción Fran Diana Jorge Component Developer Me dedico a crear sistemas de componentes para mi compañía. Trato que mis diseños maximicen su reutilización Extension Developer Mi labor es definir lógica de extensión adaptativa que fomente la reutilización de los componentes de nuestro catálogo Product Developer Mi trabajo consiste en consumir componentes y extensiones del catálogo y crear productos alucinantes Los Roles de Origami Chameleon
  • 35. Arquitecturas Adaptativas en Acción35 Diseño de Extensiones Adaptativas Traits Roles Subjects Mixins Aspects Lo que resulta fantástico de Origami Chameleon es que me permite centrarme en diseñar la lógica adaptativa de nuestro catálogo de extensiones sin preocuparme de cómo ésta será instalada Diana
  • 36. Arquitecturas Adaptativas en Acción Modelo de Mixins MIXINS Cada extensión se añade como clase base Las extensiones aparecen en el contrato público @Mixin class Storable { constructor (core) { this.core = core this.load () } @Override load () {} @Override save () {} } @Mixin class Showable { constructor (core) { this.core = core this.show () } @Discard show () {} @Discard hide () {} } Diseño de Extensiones Adaptativas
  • 37. Arquitecturas Adaptativas en Acción37 TRAITS this this Modelo de Traits Las extensiones aparecen en el contrato público Cada extensión gestiona su propio contexto @Trait class Sequenceable { constructor (core) { this.core = core this.size = this.max-this.min } @Before previous() { this.core.value-- } @Before next () { this.core.value++ } } @Trait class Randomizable { constructor (core) {} @Before change() { let r = random (2) isOdd(r) && this.previous(); !isOdd(r) && this.next(); } } Diseño de Extensiones Adaptativas
  • 38. Arquitecturas Adaptativas en Acción38 ASPECTOS Modelo de Aspectos Las extensiones se enganchan a hooks provided except before around after fnfn A cada función se añade hooks de intercesión const Previous = 'previous' const Next = 'next' @Aspect class Notifiable { constructor (core) {} @Before(Previous) fn(){ fire(Previous) } @Before(Next) gn(){ fire(Next) } } const ANY = '*' @Aspect class Async { constructor (core) {} @Around(Any) async(fn, ...args){ return new Promise(function (ok, ko) { setTimeout (function () { ok(fn(...args)) }, 0) }) } } Diseño de Extensiones Adaptativas
  • 39. Arquitecturas Adaptativas en Acción39 SUBJECTS Modelo de Subjects Las extensiones aparecen en el contrato público Las extensiones se acceden desde una puerta trasera @Subject @Point('Views') class Views { constructor (core) {} get view ( ){} set view (n){} set views(views){} } @Subject @Point('Events') class Events { constructor (core){} bind (type, fn) {} unbind (type, fn) {} fire (e){} } Utils(core).Events .bind (Click, (e)=>{}) .bind (Focus, (e)=>{}) .fire (e) Utils(core).Views.view = 3 Diseño de Extensiones Adaptativas
  • 40. Arquitecturas Adaptativas en Acción40 ROLES Modelo de Roles Los eventos de salida son notificaciones emitidas desde el core Los eventos del core mueven el ciclo de vida reactivo in out init inject e1 e2 init(ctx) inject(ctx) e3 resolve @Role class Rendering { @State @Begin @Guard ('load') @Route ('data' , 'context') @Route ('error', 'error') resolve(){} @State @Route ('context', 'context') @Route ('error' , 'data') context(){} @State @End render(){} @State @End error(){} } Diseño de Extensiones Adaptativas
  • 41. Arquitecturas Adaptativas en Acción41 Diseño de Componentes Adaptativos Extensiones Componentes Para mi lo verdaderamente formidable de Origami Chameleon es lo sencillo que resulta diseñar componentes de forma modular. Escojo unas cuantas extensiones del catálogo e indico que quiero que formen parte de mi componente Fran
  • 42. Arquitecturas Adaptativas en Acción42 COMPONENT import Storable from ... import Loggable from ... @Component @Extends(Storable) @Extends(Loggable) class Core { constructor () {} fx () {} fy () {} } Las extensiones se instalan durante la carga El componente se define como extensible Las extensiones se importan como módulos JS El componente está extendido Core Storable Loggable Diseño de Componentes Adaptativos EXTENDS let cx = new Core () let cy = new Core () cx.load () cy.load () import C Importar ExtensionExportar Componente Extensión Estática Declarativa Interna
  • 43. Arquitecturas Adaptativas en Acción import Reflect from Chameleon import Storable from ... import Loggable from ... @Component class Core { constructor () { if (isWeeked) { Reflect(this).extensions .install(Storable) .install(Loggable) } } fx () {} fy () { Reflect(this).extensions .install(Sortable) } } 43 Extensión dinámica condicional Core Storable Loggable Extensión dinámica Diseño de Componentes Adaptativos REFLECT import import Extensión Dinámica Imperativa Interna
  • 44. Arquitecturas Adaptativas en Acción Componentes 44 Diseño de Productos Adaptativos Con Origami Chameleon he conseguido alcanzar cotas de productividad que antes ni podía imaginar. Los componentes de nuestro catálogo se descubren y operan juntos con poco más que aproximarlos Jorge Extensiones
  • 45. Arquitecturas Adaptativas en Acción45 Video CarouselSequenceable Extensión a nivel de Clase sólo si video es @Component El Carousel es capaz de mover cualquier objeto Sequenceable Diseño de Productos Adaptativos REFLECT Extensión Estática Imperativa Externa import Reflect from Chameleon import Carousel from ... import Video from ... import Sequenceable from ... import Reflect(Video).extensions .install(Sequenceable) .install(Showable) let video = new Video() let carousel = new Carousel(video) carousel.start() previous() next() new Video():v install new Carousel(v) v.next() v.previous()
  • 46. Arquitecturas Adaptativas en Acción46 Extensión a nivel de objeto Solo la instancia video es Sequenceable Diseño de Productos Adaptativos REFLECT Extensión Dinámica Imperativa Externa previous() next() new Video():v install new Carousel(v) v.next() v.previous() import Reflect from Chameleon import Carousel from ... import Video from ... import Sequenceable from ... import let video = new Video() let carousel = new Carousel(video) Reflect(video).extensions .install(Sequenceable) .install(Showable) carousel.start() Video CarouselSequenceable
  • 47. Arquitecturas Adaptativas en Acción47 Origami Chameleon en Acción
  • 48. Arquitecturas Adaptativas en Acción48 Origami Chameleon en Acción Showable Zoomable Tiltable Minimizable Example 01 - 04 Showable Zoomable Tiltable Minimizable on () off()
  • 49. Arquitecturas Adaptativas en Acción49 Origami Chameleon en Acción Example 01 - 04 Showable Zoomable Tiltable Minimizable Example 05 Focussable on () off() on () off() Focussable ZoomableShowable Tiltable Minimizable
  • 50. Arquitecturas Adaptativas en Acción50 Origami Chameleon en Acción Example 01 - 04 Showable Zoomable Tiltable Minimizable Example 05 Focussable Example 06 - 07 Coordinable on () off() on () off() ZoomableShowable Tiltable Minimizable Coordinable click click Focussable View BView A
  • 51. Arquitecturas Adaptativas en Acción51 Origami Chameleon en Acción Example 01 - 04 Showable Zoomable Tiltable Minimizable Example 05 Focussable Example 06 - 07 Coordinable Example 08 - 09 Playable Sequenceable Runnable on () off() on () off() ZoomableShowable Tiltable Minimizable Coordinable click click Focussable View B Playable Runnable next previous () next () View A Sequenceable
  • 52. Arquitecturas Adaptativas en Acción52 State Componentes sólidos Extensión Adaptativa Control Adaptativo Modelo de Arquitectura en Origami Chameleon A B C Estado de la Adaptación Coordinación Adaptativa Condiciones Ambientales
  • 53. Arquitecturas Adaptativas de Componentes Web Madrid 23-24 Noviembre Javier Vélez Reyes @javiervelezreye Javier.velez.reyes@gmail.com