arquitecturas de componentes web. patrones de composición
TRANSCRIPT
JavierVélezReyes@javiervelezreye
PatronesdeComposición
ArquitecturasOrientadasaComponentesWeb
Noviembre2016
@javiervelezreye2
AutorPatronesdeComposición
LicenciadoporlaUPMdesdeelaño2001ydoctoreninformá<caporlaUNEDdesdeelaño2009,Javierconjugasuslaborescomoprofesore inves<gador con la consultoría y la formación técnica paraempresa. Su línea de trabajo actual se centra en la innovación ydesarrollodetecnologíasparalaWeb.Ademásrealizaac<vidadesdeevangelización y divulgación en diversas comunidades IT y escoordinadordevariosgruposdeámbitolocalcomoNodeJSMadridoMadridJS.FormapartedelprogramaPolymerPolytechnicSpeakeryesmentordelcapítulodeMadriddeNodeSchool.
¿QuiénSoy?
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes
JavierVélezReyes@javiervelezreye
1Introducción§ ArquitecturadeReferenciaparaComponentesWeb§ ArquitecturadeReferencia&Composición§ ElProblemadeComposición
Introd
ucción
Patron
esdeCo
mpo
sición
@javiervelezreye4
IntroducciónPatronesdeComposición
I.ArquitecturadeReferenciaParaComponentesWebUna arquitectura de referencia establece orientaciónacercadecómopuedenconstruirsesolucionesorientadasacomponentesWeb.
Data
Session
Offline
Integra<
on
Access
RoleBased
ChannelBased
ContextBased
View
Con
trol
Paging
Rou<
ng
Conten
t
Containe
rs
Interac<on
Performance Security
Monitoring Authe.&Autho.Op<miza<on WC&ResourceManagement
Layers
No<
fica<
on
UserBased
Channel
View
ers
Coop
era<
on
Coordina<on
Comunica<on
Composi<on
UniversalApp
s
@javiervelezreye5
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónLaComposiciónenPalabrasLa composición es el proceso por el cual se establece unconjuntodeenlacescomposi<vosentrecomponentesparapermi<rlacomunicación.
Qué
Lacomposiciónesunprocesolocalque,enprincipio,sóloatañealpardecomponentesenlosextremosdeunenlacecomposiBvo
AcRvidadbilateral
ComponentePar<cipante
Componenteobje<vo
Cubiertodichoespacioseposibilitalacomunicaciónentrecomponentesloqueasuvezdapasoacolaboraciones
Habilitarlacomunicación
@javiervelezreye6
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposición
Localización
Adaptación
Enlace
Contextualización
Descubrirloscomponentesdelavecindadorientadosacooperarconmigo
Localizar
Configurarelentornodecomposi-ciónparaoperarsobreuncontextoadecuado
Contextualizar
Vincularmealrestodecomponen-tesdemivecindadparahacerefecBvalacomunicación
Enlazar
Transformarmeyoymientornoparapoderencajarenelmarcoarquitectónico
Adaptar
Componenteobje<vo
ElProcesodeComposición.PerspecRvadeCajaBlancaInternamente, el proceso de composición se en<endecomo una sucesión de 4 fases que se desarrollan encascada:localizar,adaptar,enlazarycontextualizar.
Cómo
@javiervelezreye7
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónComposiciónEstáRca&DinámicaLacomposiciónestá<caseproduceunavezalprincipiodelciclo de vida. La composición dinámica se repiterecurrentementeenrespuestaacambiosambientales.
NiveldeDo
minio
Metacomponentes
NiveldeProyecto
ComposiciónEstáRca
ProcesodeComposición
Componenteobje<vo
Cuándo
NiveldeDo
minio
Metacomponentes
NiveldeProyecto
ProcesodeComposición
<empo
C.Dinámica
Fase#1 Fase#2 Fase#3
attached eventos attached
@javiervelezreye8
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónEnlaetapademadurezIeldesarrolloseorientaacliente,seoperaamuybajoniveldeabstraccióny los índicesdereu<lizaciónsoncasiinexistentes.
Dónde
addEventListener this.x++
this.setInterval
<p> <div>
<aside>
<h1> <a>
<img>
NaR
veW
eb
HTML JS
Diseño
EtapaI.
Desarrolloa
Med
ida
@javiervelezreye9
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónEnlaetapademadurezIIseconstruyencomponentesWebque encapsulan modelos de interacción recurrentes. Sefomentalaabstracciónylareu<lización.
Dónde
addEventListener this.x++
this.setInterval
<p> <div>
<aside>
<h1> <a>
<img>
HTML JS
Diseño
NaR
veW
eb
EtapaI.
Desarrolloa
Med
ida
HTML JS
Polymer
this.async
this.fire <content>
<template>
Construyo
EtapaII.
Creación
de
Compo
nentes
@javiervelezreye10
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónEnlaetapademadurezIII,lascorporacionesreconocenlasventajas de operar con un catálogo de componentes. Seconstruyenaplicacionesporcomposicióndeclara<va.
Dónde
Compo
nentesW
ebHTML
<shadow> <shadow> <shadow> <shadow>
CatálogoWC Uso
EtapaIII.
Gobierno
de
Compo
nentes
HTML JS
addEventListener this.x++
this.setInterval
<p> <div>
<aside>
<h1> <a>
<img>
Polymer
this.async
this.fire <content>
<template>
HTML JS
Diseño
Construyo
NaR
veW
eb
EtapaI.
Desarrolloa
Med
ida
EtapaII.
Creación
de
Compo
nentes
@javiervelezreye11
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónConstruir por composición consiste en combinarestratégicamente lógicareu<lizableencomponentesWebconlógicacomposi<vaespecífica
Dónde
Compo
nentesW
ebHTML
<shadow> <shadow> <shadow> <shadow>
EtapaIII.
Gobierno
de
Compo
nentes
SepretendearBcularunmodelodeinteracciónqueofrezcaunasensacióndeconBnuidadensuuso
ExperienciadeConRnuidad
LógicadeComposición
ComponentesReu<lizables
+Nivelde
Proyecto
Nivelde
Dominio
CómoconstruirsolucionescombinandocomponentesycódigopegamentodeformadeclaraBva
ConstrucciónporComposición
?
@javiervelezreye12
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónConstruir por composición consiste en combinarestratégicamente lógicareu<lizableencomponentesWebconlógicacomposi<vaespecífica.
DóndeA.ComposiciónCentralizada
B.ComposiciónDistribuida<shadow> <shadow>
<shadow> <shadow>
§ Abstracción§ Acoplamiento
§ Reu<lización§ Declara<vidad§ Composi<vidad
§ Produc<vidad
§ Abstracción§ Acoplamiento
§ Reu<lización§ Declara<vidad§ Composi<vidad
§ Produc<vidad
ModelodeComposición
PatrónMediator
HTML
HTML
JS
@javiervelezreye13
PatronesdeComposiciónPatronesdeComposición
III.ElProblemadeComposiciónConstrucciónporComposiciónConstruir por composición consiste en combinarestratégicamente lógicareu<lizableencomponentesWebconlógicacomposi<vaespecífica
Dónde
EtapaIII.
Gobierno
de
Compo
nentes
Compo
nentes
Web
HTML
<shadow> <shadow> <shadow> <shadow>
Códigopegamentorecurrentetambiéncomocomponentes
EncapsulacióndeLógicaComposiRva
LacomposicióncomounejerciciodeconfiguracióndeclaraBva
ConfiguracióndeclaraRva
Elcomportamientodelosartefactosdecomposiciónesflexibleyabierto
FlexibilidadcomposiRva
ComponentesPa
ra
Componer
Abstracción
Reu<lizació
n
Declara<vid
adComposi<
vidad
JavierVélezReyes@javiervelezreye
2PatronesdeComposición
§ ElProcesodeComposicióncomoMarcoOrganiza<vo§ PatronesdeLocalización&Adaptación§ PatronesdeEnlace&Contextualización
Patron
esdeCo
mpo
sición
Patron
esdeCo
mpo
sición
@javiervelezreye15
PatronesdeComposiciónPatronesdeComposición
I.PatronesdeComposición U<lizaremos el proceso de composición como marco
organiza<vo para ordenar los patrones que presentamosenestesubsistemaarquitectónico.
Localización
Adaptación
Enlace
Contextualización
@javiervelezreye16
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización Los patrones de localización exploran un espacio de
búsquedaparalocalizarotroscomponentesdelavecindadconlosqueestablecervínculoscomposi<vos.
Localización
Espa
ciosDOM
EspaciosdeDatos
AunquemenosuBlizados,tambiéndebenconsiderarseaquellosespaciosdeJSdondepuedenalojarsecomponentesacBvosenmemoria.EnestecasoseusantécnicasdeLookUp
TécnicasdeLookUp
MuchosdelosprocesosdelocalizaciónoperansobreespaciosDOMdonderesidenotros
componentesalojadosallíenBempodediseño.Sobreellosseaplicantécnicasdebúsqueda
exploratorias
TécnicasdeExploraciónLight DOM
Shadow DOM
Composite DOM
Host DOM
DOM
Local
Prototype
Lexical Scope
Global
AcRvidadesdeLocalización
@javiervelezreye17
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración Las técnicas de exploración operan sobre los espacios
DOM. Estás pueden clasificarse en localización odescubrimiento.
DOM
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
CompositeDOM
<wc-container>
</wc-container>
shadowRoot
EspaciosdeExploración TécnicasdeExploración
handle
estrategiascope
Componentesalcanzados
<wc-me>
<wc-container>
LightDOM ShadowDOM
<wc-me>
<wc-container>
seachsearchAll
wc-scout
@javiervelezreye18
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere llevar a cabo un proceso de exploración sobre undeterminado ámbito DOM u<lizando técnicas de exploración ycriteriosdeselecciónespecíficos.
El componente wc-scout es responsable dear<cularunprocesodebúsquedaexploratoriaparabuscarcomponentesenlavecindad.
ExploradorScout
El componente se configura indicando unaestrategia de búsqueda, un espacio sobre elquebuscaryuncriteriodebúsqueda.
<wc-scout result="{{out}}"> <wc-x strategy/> <wc-y handle/> <wc-z criteria/> </wc-scout>
Cadaunoauncomponenteimplementaráciertalógicadeestrategia,alcanceocriteriosegúncorrespondacomoveremosaconBnuación
wc-scout handle criteria strategy
getHandle()
getReference()
search(h,r)
h
r
xsfilter(xs)
xsxs
search()
@javiervelezreye19
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere llevara cabounprocesodeexploraciónbasadoenunaestrategiadescendenteparaencontrarcomponentesbajoelhandle.
El componente wc-falling implementa laestrategia de prospección clásica de la webbasadaenlocalizarelementosbajounnodo.
EstrategiadeCaída
El componente se configura indicandoesencialmente si la estrategia debe hacerprospecciónenloscontenidosenlasombra.
<wc-scout> <wc-falling strategy shadow/> <wc-y handle/> <wc-z criteria/> </wc-scout>
LaestrategiadescendentebuscaelementosquecaenbajoundeterminadonodoDOM
Estrategias
handle
scope
Estrategiadecaída
Componentesalcanzados
Indicaquelaestrategiadebehacerprospeccióntambiénenloscontenidosenlasombra
@javiervelezreye20
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere llevara cabounprocesodeexploraciónbasadoenuna estrategia ascendente para encontrar componentes en lacadenadeantecesoresdelhandle.
El componente wc-climbing implementa unaestrategia de escalado para encontrarelementosenlacadenadeantecesores.
EstrategiadeEscalado
El componente se configura indicandoesencialmente si la estrategia debe con<nuarelescaladoalllegaralnodoraíz.
<wc-scout> <wc-climbing strategy host/> <wc-y handle/> <wc-z criteria/> </wc-scout>
LaestrategiaascendentebuscaelementosquecaendentrodelacadenadeantecesoresdeundeterminadonodoDOM
Estrategias
handle
scope
Estrategiadeescalado
IndicaquelaestrategiadebeatravesarlaraízenlasombrayconBnuarascendiendoporelnodohost
Componentesalcanzados
ShadowDOM
HostDOM
[host]
@javiervelezreye21
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere llevara cabounprocesodeexploraciónbasadoenunaestrategia por inundaciónpara encontrar los componentesmáspróximosalhandle.
El componente wc-flooding aplica unaestrategia de búsqueda que alternarecursivamenteelescaladoylacaída.
EstrategiaporInundación
El componente se configura indicandoesencialmentesidebehacerprospecciónenlasombrayescaladohaciaelhost.
<wc-scout> <wc-flooding strategy host shadow/> <wc-y handle/> <wc-z criteria/> </wc-scout>
LaestrategiaascendentebuscaelementosquecaendentrodelacadenadeantecesoresdeundeterminadonodoDOM
Estrategias
SeuBlizanlosmismosflagsqueaparecíanenlasestrategiasdecaídayescalado
ShadowDOM
HostDOM
[host]
handle
scope
Estrategiaporinundación
Componentesalcanzados
@javiervelezreye22
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere iden<ficar el handle correspondiente a la propiaubicación donde reside el componenteswc-scout. Es frecuentear<cularestrategiasdebúsquedaquecomienzanendicholugar.
El componente wc-self iden<fica el elementodelDOMcorrespondienteal componentewc-scout.
HandledeAuto-referencia
Laconfiguracióndelcomponentesólorequiereindicar el valor de la referencia CSS que seráu<lizadaparareferiralhandle.
<wc-self/>
Handles
Referenciaalaubicaciónencurso
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-self>
</wc-self>
@javiervelezreye23
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere iden<ficar un handle a través del uso de unareferenciaCSS.Dichareferenciaesrela<vaalpuntodondeseusaelcomponente.
El componente wc-reference iden<fica unelementodelDOMatravésdeunareferenciaCSSrela<vaalaposicióndeestae<queta.
HandlePorReferencia
Laconfiguracióndelcomponentesólorequiereindicar el valor de la referencia CSS que seráu<lizadaparareferiralhandle.
<wc-reference ref="#A" handle/> <wc-reference ref="[[x]]" handle/>
Handles
Lareferenciaapuntaalnodohandle
Lareferenciaeselnodohandle
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-reference>
id="A" </wc-reference>
@javiervelezreye24
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Serequiere iden<ficarelhandlecorrespondientealnodopadredesdeelquerealizamoslaaplicacióndeestrategiasdebúsquedaporexploración.
El componentewc-parent iden<fica el handleque corresponde al padre directo de estae<queta.
HandleParent
La configuración indica el número de saltosascendentesyeldesplazamientodescendentequeserealizaráunavezlocalizadoelhost.
<wc-parent handle steps="3" offset="#A"/>
Handles
Trasalcanzarelpadreescala3nodos.Después,dirígetea#Aparaalcanzarelhandle
Losparámetros(steps)y(offset)sonopcionales
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-host>
</wc-host>
<div>
</div>
@javiervelezreye25
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Serequiereiden<ficarelhandlecorrespondientealnodoraízdelque cuelga el contenido en la sombra que corresponde alespacioDOMdondenosencontramos.
El componente wc-root iden<fica el handleque corresponde al nodo raíz que aloja elcontenidoenlasombradondeestamos.
HandleRoot
La configuración indica el número de saltosascendentesyeldesplazamientodescendentequeserealizaráunavezlocalizadoelhost.
Handles
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-root>
</wc-root>
<wc-root handle steps="3" offset="#A"/>
Trasalcanzarlaraízescala3nodos.Después,dirígetea#Aparaalcanzarelhandle
Losparámetros(steps)y(offset)sonopcionales
@javiervelezreye26
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere iden<ficar el handle correspondiente al nodo hostque man<ene al contenido en la sombra que corresponde alespacioDOMdondenosencontramos.
El componente wc-host iden<fica el handlequecorrespondealnodoanfitriónquealojaelcontenidoenlasombradondeestamos.
HandleHost
La configuración indica el número de saltosascendentesyeldesplazamientodescendentequeserealizaráunavezlocalizadoelhost.
Handles
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-host>
</wc-host>
<wc-host handle steps="3" offset="#A"/>
Trasalcanzarelhostescala3nodos.Después,dirígetea#Aparaalcanzarelhandle
Losparámetros(steps)y(offset)sonopcionales
@javiervelezreye27
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere iden<ficar el handle correspondiente al nodoprincipal del documento HTML desde el que realizamos laexploración.
El componente wc-document iden<fica elhandlequecorrespondealdocumentoraízdelaaplicaciónWeb.
HandleDocument
La configuración indica el desplazamientodescendente que se realizará una vezlocalizadoelnododocument.
<wc-document handle offset="#A"/>
Handles
Trasalcanzardocumentdirígetea#Aparaalcanzarelhandle
Elparámetro(offset)esopcionales
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-host>
</wc-host>
document
@javiervelezreye28
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Paralocalizarunhandleserequierellevaracabounprocesoderecorrido por pasos sobre la estructura de espacios DOM. Encadapasoseaplicaunhandledelosanteriores.
El componente wc-road aplica encadena ensecuencia una colección de operaciones dehandlingparaalcanzarelhandledeseado.
HandleRoad
El componente se configura indicando lacolección de operaciones de handling quedebenaplicarseparallegaralhandlefinal.
<wc-road handle> <wc-host/> <wc-host/> <wc-parent offset="#A"/> </wc-road>
Handles
Cadapasodehandlingseaplicasobreelresultadoquearrojolaoperacióndehandlinganteriorenlacadena.Ejemplo:
§ Primero, alcanza el host § Una vez en el, alcanza el host § Ahora sube al padre § Desplazate hasta localizar #A
HostDOM
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
CompositeDOM
<wc-host>
</wc-host>
<div>
</div>
<wc-a>
<wc-me>
</wc-me>
@javiervelezreye29
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Serequiereaplicaruncriteriodebúsquedaclásicobasadoenelusode referencias CSS. La consulta será rela<va al handle y seaplicarálaestrategiaestablecida.
El componente wc-query, permite definir uncriterio de búsqueda basado en el uso dereferenciasCSS.
BúsquedaPorConsulta
El componente se configura indicando elcriterio de búsqueda que se desea aplicarsobreelespacio.
Criteria
<wc-scout> <wc-x strategy/> <wc-y handle/> <wc-query criteria ref=".A"/> </wc-scout>
Sobreelhandleydeacuerdoalaestrategiadeexploraciónestablecida,buscaa#A
handle
scope
Estrategiadecaída
Componentesalcanzados
@javiervelezreye30
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere localizar componentes que respondan a undeterminadoproto<poJavaScript.Este<podebúsquedaofrecegaraniasdeunciertocomportamientoycaracterís<cas.
El componente wc-prototype devuelve lareferencia universal (*) al scout. Despuésaplica técnicasdefiltropara seleccionar a loscandidatosadecuados.
BúsquedaPorProtoRpo
El componente se configura indicandoesencialmenteel<poo<posdeproto<poquesedeseabuscar.
Criteria
<wc-scout> <wc-x strategy/> <wc-y handle/> <wc-prototype criteria type="wcA"/> </wc-scout>
<wc-scout> <wc-x strategy/> <wc-y handle/> <wc-prototype criteria in="wcA wcB wcC"/> </wc-scout>
Sintaxisdebúsqueda
única
SintaxisdebúsquedadisyunBva
wc-prototype strategy
getRefernce()'*'
xs
filter(xs)
wc-scout
search(h,'*')xs
filter(xs)xs
@javiervelezreye31
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeExploración
Se requiere localizar componentes que respondan a undeterminado perfil JavaScript. Este <po de búsqueda ofrecegaraniasdeunciertocomportamientoycaracterís<cas.
El componente wc-prototype devuelve lareferencia universal (*) al scout. Despuésaplica técnicasdefiltropara seleccionar a loscandidatosadecuados.
BúsquedaPorPerfil
El componente se configura indicandoesencialmente el perfil buscado, como unacoleccióndecaracterís<cas
Criteria
<wc-scout> <wc-x strategy/> <wc-y handle/> <wc-profile criteria profile="{{pf}}"/> </wc-scout>
<wc-scout> <wc-x strategy/> <wc-y handle/> <wc-profile criteria> <wc-rule feature="p"/> <wc-rule feature="q"/> </wc-profile> </wc-scout>
SintaxisdinámicacomoarraydecaracterísBcas
SintaxisestáBcaconenumeración
explícita
wc-prototype strategy
getRefernce()'*'
xs
filter(xs)
wc-scout
search(h,'*')xs
filter(xs)xs
@javiervelezreye32
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp Las técnicas de Look up ar<culan procesos de búsqueda
sobre los espacios de memoria que ges<ona JS. Sedis<nguenentreserviciosdepáginasblancasyamarillas.
EspaciosdeLookUp TécnicasdeLookUp
Polymer (
(function () {
return {
is : 'wc-me'
ready : function () {
}
};
})();
);
Global
RetenciónLéxica
Localthis.x =
protoRpothis.prototype.y =
A B
PáginasBlancas
A B
PáginasAmarillas
<wc-a>
<wc-b>
<wc-c>
P. Blancas
§ A
§ B
§ C
<wc-a>
<wc-b>
<wc-c>
P. Amarillas
§ [p, q]
§ [q]
§ [r, s]
Sebuscancomponentespormetadatosde
capacidadesyservicios
Sebuscauncomponenteporclave
deregistro
Accesoindividual
Accesoglobal
AccesoporBpo
@javiervelezreye33
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Se requiere disponer de unmecanismo sencillo para compar<rdatos con agnos<cismo de su disposición geográfica en losespaciosDOM.
El behavior wc-single proporciona una formasencilla de proporcionar acceso en lógicasingletonaunalmacéndedatos.
AccesoÚnico
Se declara una variable (single) a nivel deproto<po para que sea compar<da por todaslasinstanciasdelmismo<podecomponente.
Behaviors = Behaviors || {};
Behaviors ['wc-single'] = {
ready : function () {
this.init (this.prototype.single);
}
};
Polymer ({
is : 'wc-store',
behaviors : [
Behaviors ['wc-single']
],
init : function (single) {
single = {}
...
}
});
SeregistraenelprotoBpouna
variable(single)Lavariablesepasacomoparámetroaunmétodoinitpara
suinicialización
wc-store
wc-store
DOM#1
DOM#2
WcStore(prototype)
single = {}
@javiervelezreye34
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Serequieredisponerdeunmecanismopararegistraryrecuperarcomponentes con agnos<cismode sudisposición geográficaenlosespaciosDOM.
El componente wc-registry proporciona unadiccionario de datos para realizar tareas deregistroyrecuperaciónesenciales
RegistrodeComponentes
El componente se configura indicandoentradaspordefectoparalaconfiguracióndelregistro.
wc-registry
get(k)set(k,c)
wc-client-a
wc-client-b
DOMComún <wc-registry> <wc-rule key="A" target="{{c1}}"/> <wc-rule key="B" target="{{c2}}"/> <wc-rule key="C"> <wc-c></wc-c> </wc-rule> <wc-rule key="C"> <wc-reference ref="#D"/> </wc-rule> </wc-registry>
DisBntasformasdeintroducirentradaspordefectoenunregistrodecomponentes
DatosvoláBlesencuantosalimosdel
espacioDOM
@javiervelezreye35
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Se requiere disponer de un almacén de componentes pararegistraryrecuperarcomponentesconfacilidadesdeaccesodepáginasblancas.
El componente wc-whites es una interfaz deacceso al registro que proporciona al clientecapacidadesdepáginasblancas.
PerfildePáginasBlancas
Elcomponenteseconfiguraindicandoquiénesel registro de componentes que se u<lizasobreelqueseopera.
wc-registry
get(k)set(k,c)
wc-white
findById(id)findAll()has(c)has(id)
<wc-white registry="[[reg]]"> </wc-white>
Sesuponeaccesoalregistro.Elcomponentesoloesun
adaptadorqueproporcionaunainterfazapropiadaparadarserviciosdepáginasblancas
Solounejemplodecómopuedeadaptarselainterfazderegistro
@javiervelezreye36
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Se requiere disponer de un almacén de componentes pararegistraryrecuperarcomponentesconfacilidadesdeaccesodepáginasamarillas.
El componentewc-yellows es una interfaz deacceso al registro que proporciona al clientecapacidadesdepáginasamarillas.
PerfildePáginasAmarillas
Elcomponenteseconfiguraindicandoquiénesel registro de componentes que se u<lizasobreelqueseopera.
wc-registry
get(k)set(k,c)
wc-yellow
findByType(type)findAllByType(type)hasByType(type)
findByService(profile)findAllByService(profile)hasByService(profile)
Solounejemplodecómopuedeadaptarselainterfazderegistro
<wc-yellow registry="[[reg]]"> </wc-yellow>
Sesuponeaccesoalregistro.Elcomponentesoloesun
adaptadorqueproporcionaunainterfazapropiadaparadarserviciosdepáginasblancas
@javiervelezreye37
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Se requiere disponer de un almacén de componentes pararegistraryrecuperarcomponentesconfacilidadesdecontroldeversiones
El componente wc-cvs es una interfaz deacceso al registro que proporciona al clientecapacidadesdecontroldeversiones.
PerfildeControldeVersiones
Elcomponenteseconfiguraindicandoquiénesel registro de componentes que se u<lizasobreelqueseopera.
wc-registry
get(k)set(k,c)
wc-cvs
tag()revert()
findById(id)findAll()
Solounejemplodecómopuedeadaptarselainterfazderegistro
<wc-cvs registry="[[reg]]"> </wc-cvs>
Sesuponeaccesoalregistro.Elcomponentesoloesun
adaptadorqueproporcionaunainterfazapropiadaparadarserviciosdepáginasblancas
@javiervelezreye38
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Serequiereproporcionarunmecanismoparaaccederdemanerasencillaaunúnico registrodecomponentesen todoelespaciodememoriadelaaplicación.
Elcomponentewc-contextproporcionaaccesounitario a un registro de componentes. Paraellou<lizaelhehaviorwc-single.
ContextodeComponentes
El componente fabrica su propia instancia deregistro de manera interna y transparente yofrece serviciodepaginasblancaso amarillassegúnseconfigure.
wc-registry
wc-white
[wc-single]
Elcomponentedecontextoadquierelosmétodosdeaccesoexpuestosporwc-whitedemaneraqueparaelclienteestransparentelaexistenciadeinfraestructurapordetrás
wc-context
wc-a
<wc-context registry="[[white]]"> </wc-context>
Laconfiguracióndelregistrosóloesnecesariahacerlaunavez
wc-context[wc-single]
wc-b
DOM#1 DOM#2
@javiervelezreye39
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Serequiereproporcionarunmecanismoparaaccederdemanerasencillaaunacolecciónderegistrosdecomponentesentodoelespaciodememoriadelaaplicación.
Elcomponentewc-context-providerdaaccesoa una colección de contextos diferentesorganizadosenunespaciodenombres.
ProveedordeContexto
El componente se configura indicando lacoleccióndecontextosquedebenserincluidospordefectoenelentorno.
wc-registry
wc-white
wc-context-provider[wc-single]
wc-a
DOM#1
getContext('C1')
[wc-single]wc-context-provider
wc-a
DOM#2
getContext('C1')
Elcomponentedecontextoadquierelosmétodosdeaccesoexpuestosporwc-whitedemaneraqueparaelclienteestransparentelaexistenciadeinfraestructurapordetrás
<wc-context-provider registry="[[w]]"> <wc-rule key="C1" context="[[c1]]"/> <wc-rule key="C1" context="[[c2]]"/> <wc-rule key="C1" context="[[c3]]"/> </wc-context-provider>
Laconfiguracióndelregistrosóloesnecesariahacerlaunavez
@javiervelezreye40
PatronesdeComposiciónPatronesdeComposición
III.PatronesdeAdaptación Los patrones de adaptación realizan transformaciones
sobre los componentes para que encajen en el contextoarquitectónicodeuso.
Adaptación
Proceso Restricciones
genera
Componente Componentes
CajaNegraArquitectura
transforma
Componente Componente
{ } Js Ca
jaGrisModelode
Componente
CajaBlancaPlan<llas
crea
Componente Crea<vidaddeldiseñador
Flexibilida
d
+
Complejidad
+
Tiem
pode
Ejecución
Tiem
pode
Diseño
@javiervelezreye41
PatronesdeComposiciónPatronesdeComposición
III.PatronesdeAdaptación
Serequiereadaptarunmétododeuncomponenteparaquenouse parámetros en su llamada y así pueda ser invocadoasíncronamentecomouncomandoporotroscomponentes.
El componente wc-comand transforma sucontrato para recibir los parámetros delmétodo como propiedades y genera unmétodo(execute)querealicelainvocación.
OrientaciónaComando
La configuración recibe el componenteobje<vo (target) y elmétodo sobre el que sedeseagenerarelcomando(method).
<wc-command target="#C" method="m"> <wc-rule key="a"/> <wc-rule key="b"/> <wc-rule key="c"/> </wc-command>
SeindicaelcomponenteyelmétodoobjeBvo
LasreglasindicanporordenposicionalenquéatributoHTMLsemapeacadaparámetro
wc-a
p(x,y,z)
c-command
abcexecute()
Laspropiedades(a,b,c)semapeanenlosparámetrosformales(x,y,z)
Elmétodoexecuteinvocaap
@javiervelezreye42
PatronesdeComposiciónPatronesdeComposición
III.PatronesdeAdaptación
Se requiere adaptar el contrato de un componente demaneraque pueda ser explotado en el marco de un nuevo contextoarquitectónicodeuso.
Elcomponentewc-adapteradaptasucontratopara crear nuevos métodos de alias sobreaquellosqueexistenenelmismo.
AdaptadordeContrato
El componente se configura indicandoesencialmente el perfil buscado, como unacoleccióndecaracterís<cas
<wc-adapter target="#A"> <wc-rule key="x" as="a"/> <wc-rule key="y" as="b"/> <wc-rule key="z" as="c"/> </wc-adapter>
Lasreglasindicanlalógicadetransformaciónquedebeaplicarse
Eltargethacereferenciaalcomponentesobreelqueseaplicalaadaptación
wc-a
x()y()z()
wc-adapter
a()b()c()
Losmétodos(a,b,c)semapeanenlosmétodosdedesBno(x,y,z)
@javiervelezreye43
PatronesdeComposiciónPatronesdeComposición
III.PatronesdeAdaptación
Serequieregenerarunnuevocomponentequeinyectelógicadeintercesión para que se ejecute en algúnmomento durante lainvocacióndelosmétodosdeuncomponente.
Elcomponentewc-proxyseencargaderealizaroperacionesde intercesiónparaqueejecutenoperaciones antes, durante o después de losmétodosdeuncomponente
ProxydeContrato
Elcomponenterecibeeltargetsobreelquesehace la intercesión y el componente quecon<ene el código a inyectar. Las reglas dandetallessobrelainyección.
<wc-proxy target="#A" aspect="#B"> <wc-rule key="x" with="a" before/> <wc-rule key="y" with="b" after/> <wc-rule key="z" with="c" around/> </wc-proxy>
SeindicaelcomponenteobjeBvoyelqueconBenelosaspectosainyectar
Lasreglasindicanquémétodosdelaspectodebenejecutarse(with)cuandoseinvocacadamétododeltarget(key)
Seindicacuandoseejecutacadadecoración.Antes(before),durante
(around)odespués(aier)
wc-a
x()y()z()
wc-proxy
x()y()z() a()
b()c()
Lasclaves(key)puedenusarexpresionesregularespara
referirsubconjuntosdepropiedades
Entrelainvocacióndecadamétododeproxyyelmétodooriginalseinterponeelcódigo
dedecoración(a,b,c)
Wc-b
@javiervelezreye44
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Serequierealterarelcontratodeuncomponentepormediodelaadquisicióndinámicadenuevascaracterís<casdefinidasenloscontratosdeotroscomponentes.
El componente wc-mix da respuesta a estanecesidad de manera completamentedeclara<va.
MixindeContratos
El componente recibe en base a reglas deconfiguración cada uno de los componentesquehaymezclar.
<wc-mix target="#A" policy="overide"> <wc-rule with="#C1"/> <wc-rule with="#C2"/> <wc-rule with="#C3"/> </wc-mix>
SeindicaelcomponenteobjeBvoyelqueconBenelosaspectosainyectar
LaspolíBcasindicancómoprocedercuandoexistenproblemasdecolisióndeclaves
wc-mixin
wc-c1 Wc-c2 wc-c3
uv
st
xy
wc-a
st
uv
xy
@javiervelezreye45
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace Los patrones de enlace se encuentran estrechamente
condicionados con la forma de comunicación quepretendamosestablecer.
Enlace
Eventos
DataBinding
Mensajes
e B
A
q
B A
p
LacomposiciónaquíconsisteenregistraraAcomoescuchador
deloseventosdeBpoequeemiteB
EnlaceporEventos
DadoqueBBenepermisoparaescribirenx,lacomposiciónaquíconsisteenregistraraAcomointeresadoenloscambiosdex
EnlaceporDatos
LacomposiciónenestecasoenlazaelcomportamientodeAyBinvocandoamdesden
EnlaceporMensajes
{{x}}
AB
@javiervelezreye46
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Serequiererealizarunenlacecomposi<voporeventosparaqueun componente responda reac<vamente ante cierto <po deeventosemi<doporotrocomponente.
Elcomponenteobje<vodeberegistrarsecomoescuchador de los eventos de cierto <poemi<dosporelcomponenteemisor.
EnlacePorEventos
Lalógicadecomposiciónencapsulaunregistrode eventos convencional u<lizando losmecanismosdelaWeb.
e B
A
ElcomponenteAseregistracomoescuchadordeloseventosdeBpoeemiBdosporB
SeasumequeAhasidolocalizadoporBportécnicasexploratoriasodelookup.
function bind (self) {
return {
eventBind : function (binding) {
var {target, on} = binding;
target.addEventListener (
on, self.execute);
} ... };
}
Porconvenio,elmanejadoresunmétodo(execute)queresideelclientedondeseimplementatodalalógicareacBva
@javiervelezreye47
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Serequiererealizarunenlacecomposi<vopordatosparaqueuncomponente responda actualizando una de sus propiedades alvaloradquiridoporotrapropiedadenotrocomponente.
Elcomponenteobje<vodeberegistrarsecomoescuchador de cambios de propiedadesmientras que el emisor debe configurar supropiedadno<fyatrue.
EnlacePorDatos
La lógica de composición consisteahora enescuchar eventos de cambio y procederactualizandounadesuspropiedades.
x-changed B
A
ElcomponenteAseregistracomoescuchadordeloseventosdeBpox-changedemiBdosporB
Loscambiossobrelapropiedadxemiteneventosdelaformax-changed
function bind (self) {
return {
dataBind : function (binding) {
var {target, from, to} = binding;
var on = from + '-changed';
target.addEventListener (on,
function (e, ctx) {
self[to] = ctx.value;
}
);
} ... }; }
LareacciónconsisteenactualizarlavariabledesBnocuandocambialadeorigen
@javiervelezreye48
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Se requiere realizar un enlace composi<vo por mensajes paraque la llama a unmétodo de un componente desencadene lainvocacióndeotrométododelcomponenteobje<vo.
El componente obje<vo debe registrar unaintercesiónfuncionalsobreelmétododeotrocomponenteparaqueenalgúnpuntoinvoqueaunodesusmétodos.
EnlacePorMensajes
Existen 3 <pos de estrategias de intercesiónsobre unmétodo. Before, aoer y aroundquellaman, respec<vamente, al obje<vo antes,después y durante la ejecución de dichométodo.
ElmétodoqdeAenbeforeesnormal,enaierdebeesperarunparámetrocorrespondientealresultado.Enaround,unocorrespondientealapropiafunciónp
AlinvocaralmétodopdeBsepretendequeseejecuteelmétodoqdeA.EstaintercesiónresultatransparenteparaB
q
B A
p
function bind (self) {
return {
messageBind : function (binding) {
var {target, on, to, when} = binding;
var fn = self[to];
target[on] = function (...args) {
if (when === BEFORE) fn.apply(self, args);
var r = target[on].apply (target, args);
if (when === AFTER) fn.apply(self. [...args, r]);
} } } }
Detallesen'MetaprogramaciónenJavaScript'.JSDay2015
@javiervelezreye49
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Serequiereproporcionarunmecanismodeclara<voparadefinirtodos los<posdeenlacescomposi<vosquepresentaunenlaceconsuvecindad.
El componente wc-bind permite cubrir estanecesidad ar<culando los 3 <pos de enlacecomposi<voanteriores.
EnlaceExterno
Las reglas de configuración determinan quéenlaces hay que hacer con cada componentede la vecindad. (for) marca el componenteobje<vo.
<wc-bind for="A"> <wc-rule event with="B" on="e"/> <wc-rule data with="C" from="x" to="y"/> <wc-rule message with="D" on="q" to="f" before/> <wc-rule message with="D" on="q" to="g" after/> </wc-bind>
fg
D
A
Pq
B Ce
x = {{v}}
y = [[v]]
Bindingporeventos
Bindingpormensajes
Bindingpordatos
LasreglasdeconfiguraciónprescribetodalalógicadeenlacecomposiBvoqueesnecesarioarBcular
@javiervelezreye50
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Se requiere proporcionar un mecanismo para permi<r a loscomponentes definir sus propios enlaces composi<vos con loscomponentesdesuvecindad.
El behavior wc-composable proporcionamétodosdebindingparaqueestospuedanserinvocados desde la lógica de composición delcomponente.
EnlaceInterno
Las capacidades de binding del behabior seusan al principio en el ciclo de vida. Tambiénsuelen usarse en conjunción con el behabiorconfigurabledentrodelmétodoconfig.
[wc-binding]A
B e
ready: function () {
this.bind ({ type : 'event', ref : B on : 'e' });
}
[wc-binding][wc-configurable]
ABe
config: function (rules) {
rules.forEach (rule => {
this.bind (binding (rule)); });
}
Behaviors ['wc-composable'] = (function () {
var Binds = {
event : function eventBind () {...},
data : function dataBind () {...},
message : function messageBind () {...}
};
return {
bind : function (binding) {
Binds[binding.type] (binding);
}
};
})();
@javiervelezreye51
PatronesdeComposiciónPatronesdeComposición
IV.PatronesdeEnlace
Serequiereproporcionarunmecanismosencilloparaespecificarsecuencias de composición entre componentes de formacompletamentedeclara<va
El componente wc-chain proporciona unamanera sencilla de crear cadenas decomposicióndeformadeclara<va.
CadenadeComposición
Se asume que la lógica de composición porpares es siempre la misma y puedefactorizarseenunwc-bindexterno.
<wc-chain binder="#bnd"> <wc-x/> <wc-y/> <wc-z/> </wc-chain > <wc-bind id="bnd"> <wc-rule event on="e"/> <wc-rule data from="x" to="y"/> <wc-rule message on="f" to="g" before/> </wc-bind>
wc-a
wc-b
wc-cElcomponenteiterasobreloselementosdelacadenaylosenlazasecuencialmentede
acuerdoalalógicadeenlaceenelbind
Lalógicadecomposiciónconsisteenestecasoenunenlaceporeventoe,otropordatos(x,y)yunopormensajeenbefore(f,g)
LógicadecomposicióncomúnparaseraplicadaiteraBvamenteporcadaparensecuencia
Losparámetros(for)y(with)dewc-bindsoninyectadosporwc-chain
@javiervelezreye52
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización Los patrones de contextualización permiten interpretar
cadacolaboraciónentrecomponentesdentrodelcontextodeusoadecuado.
Contextualización
Configuración
TargeRng
LaLógicadeconfiguraciónprescribecomoseadquiereelcomponenteuna
parametrizaciónprecisaparaelcontextodeuso
Configuración
EltargeBngrefierealaconfiguracióndelcontextoarquitectónicosobreelcuallaoperaBvadelcomponentedebetenerefecto
TargeRng
@javiervelezreye53
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración Enrelacióna lasestrategiadeconfiguraciónsedis<nguen
tres niveles de madurez. A con<nuación exponemos loscriteriosquedefinencadanivel.
ConfiguraciónM.Componente Configuración Inyección
NivelII.
Centralización
Confi
guración
NivelIII.
Inyección
Automá<
ca
ModelodeComponenteconvencional
ConfiguraciónexplícitaenHTMLporatributosyLightDOM
Alinstanciarelcomponenteseincluyelaconfiguración
NivelI.
Confi
guración
Manualproperties
methods
HTML attributes Light DOM
Cascade Configurable Rules Registrable Register
Context ContextProvider Config
Factory
Injector Injectable
Configuracióncentralizadaenartefactos
externos
ConstrucciónautomáBcaa
travésdeinyector
Construcciónexplícitaatravésdeinyectorbajo
demandadelcliente
@javiervelezreye54
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Serequierehomogenizarelprocesodeconfiguraciónestá<cadelos componentes y facilitar su procesamiento de formasemiautomá<ca.
El componentewc-rule cubrir lasnecesidadesde homogenización en la configuración. Elbehaviorwc-configurableasisteenelproceso.
ConfiguraciónEstáRcaPorReglas
Cualquier componente con lógica deconfiguración compleja usa reglas pararealizarladeformaasis<da.
NivelI
<wc-x> <wc-rule key="users" source="#ds1"/> <wc-rule key="prods" source="#ds2"/> ... </wc-x>
Estenoesmásqueunejemplodecomponenteconconfiguraciónporreglas
Losatributosdecadareglasongenéricos.Noestásprefijadoscomopropiedades.DeestamaneralareglaesunartefactoreuBlizableymuyflexible
Behaviors = Behaviors || {};
Behaviors ['wc-configurable'] = {
ready : function () {
var rules = getRules ();
this.config (rules);
}
};
config: function (rules) {
// process config
}
});
[wc-configurable]
@javiervelezreye55
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere realizar un proceso de configuración por reglas demaneraquesiseproducencambiosenlaconfiguración,estossepropaguenparaactualizarelcomponente.
El componente wc-rule cubrir ahora lasnecesidades de reconfiguración dinámica alpropagarporeventosloscambios.
ConfiguraciónDinámicaPorReglas
Cualquier componente con lógica deconfiguración compleja usa reglas pararealizarladeformaasis<da.
NivelI
Behaviors = Behaviors || {};
Behaviors ['wc-reconfigurable'] = {
listeners: { change: onChange },
onChange: function (e) {
var rules = getRules (e);
this.config (rules);
}
};
config: function (rules) {
// process config
}
});
[wc-configurable]
Rules
e
<wc-x> <wc-rule key="users" source="#ds1"/> <wc-rule key="prods" source="[[ds2]]"/> ... </wc-x>
Estenoesmásqueunejemplodecomponenteconconfiguraciónporreglas
Cadacomponenteregladisparauneventodecambiocadavezqueseproduceuncambioenlosatributos
@javiervelezreye56
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Serequierequeelprocesodeconfiguraciónporreglaspuedaserreinterpretadoenelmarcodeotrocomponente recibidocomoparámetrodeconfiguración.
Elbehaviorwc-contextualizableañadeademásun atributo de contexto que permite reinter-pretarlaconfiguracióndelcomponente.
ContextualizacióndeReglas
Elbehaviorincorporaalcomponenteunnuevoatributo que indica el nuevo contexto dondedebeinterpretarselaconfiguración.
NivelI
Lalógicadeconfiguraciónseinterpretaahoraenelmarcodeotrocontexto
<wc-x context="[[ctx]]"> <wc-rule key="users" source="#ds1"/> <wc-rule key="prods" source="[ds2]"/> ... </wc-x>
Losvaloresentrecorchetes[]soninterpretadoscomopropiedadesdentrodelnuevocontexto
Behaviors ['wc-contextualizable'] = {
properties : {
context : Object
},
ready : function () {
var rules = getRules ();
this.config (
this.context (rules)
);
},
context: function (rule) {
// Contextualize Rule
} };
@javiervelezreye57
<wc-X config="{{cx}}">
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
La lógica de configuración de los componentes internos a unesquema de fuerte anidamiento DOM reside en el padre. Serequiereunmecanismodeconfiguraciónsencillo.
El componente wc-cascade permite arrastrarla información de configuración en cascadaaplicándolaacadapaso.
ConfiguraciónenCascada
Serecogeunaconfiguracióndeentrada(in),seaplicaenelcomponenteencursoygeneraunaconfiguracióndesalida (out)parael siguientecomponenteencascada.
NivelI
</wc-X>
LightDOM ShadowDOM
</wc-Y>
<wc-Y config="{{cy}}">
shadowRoot
LightDOM ShadowDOM
shadowRoot
<wc-cascade in="{{cx}}" out="{{cy}}"/>
<wc-cascade in="{{cx}}" out="{{cy}}"> <wc-rule key="x" to="a" out/> <wc-rule key="y" to="b" out/> <wc-rule key="z" to="c"/> </wc-cascade>
(key)eselnombredeunapropiedadencx.(to)indicaenquepropiedaddelcomponenteseinyecta.(out)determinasielvalornodebecopiarseency
Serecogelaconfiguracióncx,seprocesaysepasaawc-yelrestocy
@javiervelezreye58
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere proporcionar un mecanismo para que loscomponentesllevenacabosuprocesoderegistroenelcontextodeconfiguracióndeformaautónoma.
El behavior wc-registrable proporcionafacilidadesderegistroautomá<coquequedanvinculadasalciclodevidadelcomponente.
RegistroInterno
El behavior se encarga de llevar a cabo elproceso de registro en el contexto deconfiguracióndeformaautomá<ca.
NivelI
ShadowDOM
<wc-a>
</wc-a>
<wc-b>
</wc-b>
wc-context
wc-a
[wc-registrable]
Behaviors = Behaviors || {};
Behaviors ['wc-registrable'] = {
ready : function () {
var props = getProperties (this);
this.register (props);
},
register : function () {
// register props
}
};
wc-aseregistraautónomamenteporqueesregistrable
wc-besuncomponentenoregistrable
@javiervelezreye59
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere proporcionar un mecanismo para que un agenteexterno lleve a cabo las tareas de registro en el contexto deconfiguracióndeformaautónoma.
El componente wc-register permite llevar acabo las tareas de registro automá<co conasistenciadetécnicasexploratorias.
RegistroExterno
Internamente, el registro u<liza un wc-scoutpor lo que su lógica de configuración, debeincluirunhandle.
NivelI
ShadowDOM
<wc-a register>
</wc-a>
<wc-b register>
</wc-b>
<wc-c>
</wc-c>
wc-register
wc-context
wc-awc-b
<wc-register target="#container" ref="[register]"> </wc-register>
Porconvenienciaelnombredelatributohandlesellama(target)enestecomponente
SóloloscomponenteseBquetadosconelrol
'register'sonregistrados
@javiervelezreye60
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere un mecanismo para encapsular la lógica deconfiguracióncorrespondienteauncomponentedemaneraquepuedaseralmacenadayaplicadaposteriormente.
El componente wc-config permite encapsularlógica de configuración y persis<rla en uncontextodeconfiguracióndeterminado.
EncapsulacióndelaConfiguración
El componente recoge la configuraciónexplícitaquenecesitauncomponenteparasergenerado.
NivelII
<wc-config name="a" type="A"> <wc-rule key="x" value="[[r]]"/> <wc-rule key="y" value="[[s]]"/> <wc-rule key="z" value="3"/> <wc-rule key="b" type="B" prototype/> <wc-rule key="c" type="C" single/> </wc-config>
NombreyBpodelcomponenteaconstruir
Configuracióndepropiedadesenlaconstrucción.PuedenservaloresconcretosoBposdeartefactosaconstruir
wc-config
x,y,zb,c
type='A'
ElcontextoBenecomomisión,enestenivel,almacenarlas
configuracionesdecomponentesparaseruBlizadasenprocesosde
inyecciónposterior
wc-context Elcomponenteesunalmacéndeinformacióndeconfiguración
@javiervelezreye61
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere un mecanismo para construir bajo demanda lasinstancias de componentes que van a operar dentro delcontenidoenlasobradeuncomponentepadre.
Elcomponentewc-factorydarespuestaaestanecesidad por medio del uso de lasconfiguracionesenelcontexto.
InyecciónBajoDemanda
Elcomponentefactoríaseconfiguraindicandosobre que contexto DOM requiere operar.Consultetarge<ngmásadelante.
NivelII
<wc-factory target="#here"> </wc-factory>
Dentrodeesteespacioseinstancianloscomponentesqueesnecesariocreardentrodelcontenidoenlasombra
Elcomponentepadreesresponsabledecrear
lasexplícitamente
wc-factorywc-confi
ga
wc-context
create(k)
ShadowDOMwc-container
create('a')
<wc-a>
</wc-a>
Lafactoríaesunsinglequeserecuperaporlookup
@javiervelezreye62
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.Configuración
Se requiere proporcionar un mecanismo para que loscomponentes lleven a cabo su proceso de inyección dedependenciasdeformaautónoma.
El behavior wc-injectable proporcionafacilidades de configuración automá<ca quequedanvinculadasalciclodevida.
InyecciónInterna
El behavior se encarga de llevar a cabo elproceso de configuración del componente demaneraautomá<ca.
NivelIII
ShadowDOM
<wc-a>
</wc-a>
<wc-b>
</wc-b>
wc-context
[wc-injectable]
Behaviors = Behaviors || {};
Behaviors ['wc-injectable'] = {
ready : function () {
this.config (ctx);
},
config: function (ctx) {
var cfg = ctx.get (this.is);
// inject dependencies
// using wc-context
}
};
wc-aseconfiguraautónomamenteporqueesinjectable
wc-besuncomponentenoinjectable
@javiervelezreye63
PatronesdeComposiciónPatronesdeComposición
II.PatronesdeLocalización.TécnicasdeLookUp
Se requiere proporcionar un mecanismo para que un agenteexternolleveacabolastareasdeinyeccióndedependenciasdeformaautónoma.
El componente wc-injector llevar a cabo lastareas de configuración automá<co conasistenciadetécnicasexploratorias.
InyecciónExterna
Internamente, el registro u<liza un wc-scoutpor lo que su lógica de configuración, debeincluirunhandle.
NivelIII
ShadowDOM
<wc-a inject>
</wc-a> <wc-b>
</wc-b>
wc-injector
wc-context <wc-register target="#container" ref="[register]"> </wc-register>
Porconvenienciaelnombredelatributohandlesellama(target)enestecomponente
SóloloscomponenteseBquetadosconelrol
'register'sonregistrados
wc-configa
wc-a?
wc-configa
@javiervelezreye64
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.TargeRng Lospatronesdetarge<ngpermitenespecificarelcontexto
arquitectónico sobre el cual la opera<vadel componentedebetenerefecto.
TargeRng DOM#1
HostDOM
<wc-me>
</wc-me>
LightDOM ShadowDOM
<wc-container>
</wc-container>
shadowRoot
DOM#2
wc-context
distribución
templa<ng
invasión
trasvase
@javiervelezreye65
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.TargeRng
Se requiereproporcionar unmecanismoparaque el contenidoHTML generado por un componente pueda ser ubicado en untargetdiferente.
El behavior targatable incorpora un atributotarget que se u<liza para capturar el nuevodes<nodeloscontenidosgenerados.
Targatable
Laconfiguracióndeeste<podecomponentesrequiere especificar el des<no de loscontenidosenel(target).
<wc-x target="#container"> </wc-x>
Elbehaviorincorporaalcomponenteelatributo(target)
Esteesuncomponentegenéricoquehaceusodelcomportamiento
targatable
Behaviors ['wc-targatable'] = {
properties : {
target: Object
},
ready : function () {
this.render (target);
}, };
Polymer ({
is : 'wc-x',
behaviors : [
Behaviors ['wc-targatable']
],
render: function (target) {
// Render
}
});
@javiervelezreye66
PatronesdeComposiciónPatronesdeComposición
V.PatronesdeContextualización.TargeRng
Se requiere adaptar el contrato de un componente demaneraquesuusooperenosobreelpropiocomponentesinosobreotrocomponentedes<natario.
Elcomponentewc-contextulizerseencargaderealizar esta opera<va de recontextualizaciónparaqueoperesobreotrocomponente
ContextualizadordeContrato
El componente se configura indicando elcomponente original (target) y el que operacomonuevodes<no(context).
<wc-contextualizer target="#A" context="#B" keys="x y z"> </wc-contextualizer>
(keys)indicalosmétodosquedebencontextualizarse.CuandoseomiteesteatributoseenBendequedebenrecontextualizarsetodoslosmétodos
wc-contextualizer
wc-a
wc-a
Contextofunction (target, ctx) { Object.keys(target) .filter (isFunction) .forEach (fn => fn.bind (ctx); ); }
JavierVélezReyes@javiervelezreye
3LaComposiciónenlaPrácCca
§ ComposiciónDirectaporEventos§ ComposiciónIndirectaporDatos§ ComposicióndeFlujosdeEventos&Datos
LaCom
posición
enlaPrácCca
Patron
esdeCo
mpo
sición
@javiervelezreye68
LaComposiciónEnLaPrác<caPatronesdeComposición
I.ComposiciónDirectaporEventos<wc-button id="btn"> </wc-button>
Click
wc-buron#btn[wc-composable]
wc-color
<wc-color target="#btn" on="tap"> </wc-color>
on-tap
§ 2componentesindependientes§ Unodeellosescomposable§ Configurandosusatributostarget&onseconsiguelaopera<va
<wc-color target="#btn" on="tap"> </wc-color>
execute: function () { this.style.background = 'CCC'; }
A.ComposiciónInterna
@javiervelezreye69
LaComposiciónEnLaPrác<caPatronesdeComposición
I.ComposiciónDirectaporEventos<wc-button id="btn"> </wc-button>
Click
wc-buron#btnwc-color
on-tap
<wc-color> </wc-color>
execute: function () { this.style.background = 'CCC'; }
wc-bind
§ 2componentesindependientes§ Unodeellosescomposable§ Configurandoelbinderseconsiguelaopera<va
<wc-bind for="wc-color"> <wc-rule event with="#btn" on="tap"/> </wc-bind>
B.ComposiciónExterna
@javiervelezreye70
LaComposiciónEnLaPrác<caPatronesdeComposición
I.ComposiciónDirectaporEventos<wc-button id="A"> </wc-button>
Click
wc-buron#A
on-tap
<wc-color> </wc-color>
execute: function () { this.style.background = 'CCC'; }
<wc-bind for="wc-color"> <wc-rule event with="#A" on="tap"/> <wc-rule event with="#B" on="tap"/> </wc-bind>
wc-bind
§ Varioscomponentesindependientes§ Unodeellosescomposable§ Configurandoelbinderseconsiguelaopera<va
<wc-button id="B"> </wc-button>
Click
wc-buron#B
on-tap
C.ComposiciónMúlRple
wc-color
@javiervelezreye71
LaComposiciónEnLaPrác<caPatronesdeComposición
I.ComposiciónDirectaporEventos<wc-button id="btn"> </wc-button>
Click
wc-buron#btn
on-tap
<wc-video id="#v"> </wc-video>
execute: function () { (#v).play (); }
<wc-adapter target="#v"> <wc-rule key="play" as="execute"/> </wc-adapter>
wc-bind
§ 2componentesindependientes§ Ningunodeellosescomposable§ Configurandoelbinderseconsiguelaopera<va
wc-adapter<wc-bind for="wc-color"> <wc-rule event with="#btn" on="tap"/> </wc-bind>
D.ComposiciónAdaptaRva
wc-video#v
@javiervelezreye72
LaComposiciónEnLaPrác<caPatronesdeComposición
II.ComposiciónIndirectaporDatos <wc-i18n register> </wc-i18n>
<wc-login> </wc-login>
<wc-bind for="wc-color"> <wc-rule data with="i18n" from="language" to="language"/> </wc-bind>
DOM#2
language: 'es' onLanguage: function (e) {
this.i18n (getResource(
this.language
)); }
wc-factory
wc-context
DOM#1
wc-i18n
{{i18n.login}}
wc-login
{{i18n.pwd}}
{{i18n.ok}}
[wc-i18n-able]
[wc-i18nable]:
wc-bind
{{language}} crea
wc-i18nregister
wc-register
set(i18n)
get(i18n)
§ Componentesconunperfili18n-able§ Composiciónindirectaatravésdememoria§ Bindingdedatos
DOM#1
DOM#2
<wc-register> </wc-register>
<wc-factory> </wc-factory>
<wc-i18n> </wc-18n>
A.InyecciónBajoDemandaData
@javiervelezreye73
LaComposiciónEnLaPrác<caPatronesdeComposición
II.ComposiciónIndirectaporDatos <wc-i18n register> </wc-i18n>
<wc-login inject> </wc-login>
DOM#2
language: i18n ready: function () { (#bnd).bind (...) } onLanguage: function (e) { ... }
wc-injector
wc-context
DOM#1
[wc-login]:
wc-i18n
{{i18n.login}}
wc-logininject
{{i18n.pwd}}
{{i18n.ok}} wc-bind
{{language}}
Injecti18n
wc-i18nregister
wc-register
set(i18n)
get(i18n)
§ Componentesconunperfili18n-able§ Composiciónindirectaatravésdememoria§ Bindingdedatos
DOM#1
DOM#2
<wc-register> </wc-register>
B.InyecciónAutomáRca
<wc-injector> </wc-injector>
Data
@javiervelezreye74
LaComposiciónEnLaPrác<caPatronesdeComposición
III.ComposicióndeFlujosdeEventos&Datos
§ Unacoleccióndecomponentescondis<ntaresponsabilidad§ Seencadenancomposi<vamenteporeventosparaoperar§ Seconectanalcomponentetwirerporeventos
wc-twirer#V
page-up
page-down
wc-event-client#cl
wc-pager
wc-data-source
wc-command-provider
wc-rest
A.FlujoEntrante
command
command
page-uppage-down
<wc-chain binder="#in"> <wc-even-client id="cl".../> <wc-pager.../> <wc-data-source.../> </wc-chain>
get
<wc-twitter id="V"> </wc-twitter>
<wc-bind for="#V"> <wc-rule event with="#cl" on="page-up"/> <wc-rule event with="#cl" on="page-down"/> </wc-bind>
<wc-command-provider> </wc-command-provider> <wc-rest> </wc-rest>
getCommand
<wc-bind id="in"> <wc-rule event on="command"/> </wc-bind>
@javiervelezreye75
LaComposiciónEnLaPrác<caPatronesdeComposición
III.ComposicióndeFlujosdeEventos&Datos
§ Larespuestadelafuentededatosesasíncrona§ Losresultadosseemitenporeventosdata§ Elpuertodedatosrecogelosdatosdeeventos§ Seconectaelpuertodedatosconlapropiedad{{tweets}}de#V
wc-twirer#V
page-up
page-down
wc-rest#ds
B.FlujoSaliente
<wc-twitter id="V"> </wc-twitter> ...
data
{{tweets}}tweets
<wc-bind for="#V"> <wc-rule data with="#dp" from="data" to="tweets"/> </wc-bind>
wc-data-port#dp
data
<wc-bind for="#dp"> <wc-rule event with="#ds" on="data"/> </wc-bind>
<wc-data-port id="#dp"> ... </wc-data-port>
@javiervelezreye76
PreguntasPatronesdeComposición
www.javiervelezreyes.com
PatronesdeComposición
ArquitecturasOrientadasaComponentesWeb
@javiervelezreye77
ReferenciasPatronesdeAccesoaDatos
Referencias
LaWebOrientadaaComponentes
Fecha Noviembrede2015Lugar CodeMo<onPáginas 57Ref hrps://goo.gl/mCxm3w
ComponentesWeb·ArquitecturasSooware·Frontend·JavaScript·Composición · Encapsulación · Reu<lización · Buenas Prác<cas ·PrincipiosdeDiseño·Errorescomunes
PrincipiosdeDiseñoenComponentesWeb
Fecha Marzode2015Lugar PolymerMadridPáginas 170Ref hrps://goo.gl/t0GpVS
Programación Orientada a Componentes · Principios de Diseño ·Buenas Prác<cas · Recomendaciones de Diseño y Desarrollo ·TécnicasdeProgramacióndeComponentesWeb·Polymer
@javiervelezreye78
ReferenciasPatronesdeAccesoaDatos
Referencias
ArquitecturasparalaReuRlizaciónenJavaScript
Fecha Abrilde2016Lugar JSDayPáginas 43Ref hrps://goo.gl/i9pd03
Programación Orientada a Componentes · Componentes ·Reu<lización·Programación·JavaScript·ModelosArquitectónicos·Metaprogramación·Adaptaciónarquitectónica
MetaprogramaciónComposiRvaenJavaScript
Fecha Mayode2015Lugar JSDayPáginas 84Ref hrps://goo.gl/wLllU2
Metaprogramación · Programación adapta<va · Programaciónorientada a Componentes · JavaScript · Adaptación · AlineamientoArquitectónico·técnicasdemetaprogramación·patronesdediseño
JavierVélezReyes@javiervelezreye
PatronesdeComposición
ArquitecturasOrientadasaComponentesWeb
Noviembre2016