Arquitecturas Adaptativas de Componentes Web

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
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

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

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

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

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

Aislado Inmersivo
Ayer Hoy
Acotado
Limitado
Accesible
Pervasivo
Completo
Vinculante
Las nuevas formas de experiencia
digital proponen soluciones inmersivas
brutales
Adaptación Ambiental

Arquitecturas Sólidas de Componentes Web
de Componentes Web
1
Single Responsibility
YX Z
A
B
C

de Componentes Web
2
Open Close Design

de Componentes Web
3
Open Close Design
Liskov Substitution

de Componentes Web
4
Open Close Design
Liskov Substitution
Interface Segregation
on ()
off()
on ()
off()

de Componentes Web
5
Open Close Design
Liskov Substitution
Dependency Inversion

de Componentes Web
1
Open Close Design
Liskov Substitution
Dependency Inversion
S
O
L
I
D

La Adaptación Como
Arquitectura
Necesitamos Idear Nuevas Formas
de Desarrollo de Software
Centradas en la Adaptación

Arquitecturas Adaptativas
de Componentes Web
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
de Componentes Web

Arquitecturas Adaptativas de Componentes Web18
de Componentes Web

de Componentes Web

Core
CORE
Componentes &
Extensión Adaptativa
El sujeto de la
extensión adaptativa
class Core {
constructor () {}
fx () {}
fy () {}
[Symbol.iterator] () {}
}

Extensión
La lógica de
El sujeto de la
Core
CORE
EXTENSION
Componentes &
Extensión Adaptativa class Core {
constructor () {}
fx () {}
fy () {}
}
function Ext (core) {
}
core.map = function (fn) {}
core.reduce = function (fn) {}
core.filter = function (fn) {}
core.every = function (fn) {}
core.some = function (fn) {}

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 () {}
}
}
core.map = function (fn) {}

Componentes &
Dependencias que
hacen operar a la
extensión
Contrato de
Symbol.iterator
class Core {
constructor () {}
fx () {}
fy () {}
}
}
core.map = function(fn) {
let ys = []
for (let x of this)
ys = [...ys, fn(x)]
return ys
}
CORE
EXTENSION

Componentes &
La forma en que la
extensión trasforma
al core
Técnica Extensión
Symbol.iterator
class Core {
constructor () {}
fx () {}
fy () {}
}
}
core.map = function(fn) {
let ys = []
for (let x of this)
ys = [...ys, fn(x)]
return ys
}
CORE
EXTENSION

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
Es posible convertir las técnicas
adaptativas en una realidad dentro del
mundo del desarrollo front

Arquitecturas Adaptativas en Acción
Qué
Necesitamos
en Requisitos

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

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

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

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

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

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

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 {
this.core = core
this.show ()
}
@Discard show () {}
@Discard hide () {}
}
Adaptativas

TRAITS
this
this
Modelo de Traits
Las extensiones
aparecen en el
contrato público
Cada extensión
gestiona su
propio contexto
@Trait
class Sequenceable {
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();
}
}
Adaptativas

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 {
@Before(Previous) fn(){ fire(Previous) }
@Before(Next) gn(){ fire(Next) }
}
const ANY = '*'
@Aspect
class Async {
@Around(Any) async(fn, ...args){
return new Promise(function (ok, ko) {
setTimeout (function () {
ok(fn(...args))
}, 0)
})
}
}
Adaptativas

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 {
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
Adaptativas

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(){}
}
Adaptativas

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

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
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

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
Adaptativos
REFLECT
import
import
Extensión Dinámica Imperativa
Interna

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

Video CarouselSequenceable
Extensión a
nivel de Clase
sólo si video es
@Component
El Carousel es capaz
de mover cualquier
objeto Sequenceable
Adaptativos
REFLECT
Extensión Estática Imperativa
Externa
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()

Extensión a
nivel de objeto
Solo la instancia video
es Sequenceable
Adaptativos
REFLECT
Extensión Dinámica Imperativa
Externa
previous()
next()
new Video():v
install
new Carousel(v)
v.next()
v.previous()
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

Origami Chameleon en
Acción

Acción
Showable Zoomable Tiltable Minimizable
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
on ()
off()

Acción
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
Example 05
Focussable
on ()
off()
on ()
off()
Focussable
ZoomableShowable Tiltable Minimizable

Acción
Example 01 - 04
Showable
Zoomable
Tiltable
Minimizable
Example 05
Focussable
Example 06 - 07
Coordinable
on ()
off()
on ()
off()
Coordinable
click click
Focussable
View BView A

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()
Coordinable
click click
Focussable
View B
Playable Runnable
next
previous ()
next ()
View A
Sequenceable

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

Más contenido relacionado

Similar a Arquitecturas Adaptativas de Componentes Web (20)

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

Último (9)

Arquitecturas Adaptativas de Componentes Web