Arquitecturas de Componentes Web. Patrones de Composición

JavierVélezReyes@javiervelezreye

[email protected]

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?

[email protected]

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes


[email protected]

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


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


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


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


III.ElProblemadeComposiciónConstrucciónporComposiciónEnlaetapademadurezIIseconstruyencomponentesWebque encapsulan modelos de interacción recurrentes. Sefomentalaabstracciónylareu<lización.

Dónde


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


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


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


III.ElProblemadeComposiciónConstrucciónporComposiciónConstruir por composición consiste en combinarestratégicamente lógicareu<lizableencomponentesWebconlógicacomposi<vaespecífica

Dónde

Compo

nentesW

ebHTML


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


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


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


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


[email protected]

2PatronesdeComposición

§  ElProcesodeComposicióncomoMarcoOrganiza<vo§  PatronesdeLocalización&Adaptación§  PatronesdeEnlace&Contextualización

Patron

esdeCo

mpo

sición

Patron

esdeCo

mpo

sición

@javiervelezreye15


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


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


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


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



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


Indicaquelaestrategiadebehacerprospeccióntambiénenloscontenidosenlasombra

@javiervelezreye20



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


ShadowDOM

HostDOM

[host]

@javiervelezreye21



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


@javiervelezreye22



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



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



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



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


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


@javiervelezreye26



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


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


@javiervelezreye27



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



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



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


@javiervelezreye30



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



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


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


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'] = {


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



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



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



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


wc-registry

get(k)set(k,c)

wc-yellow

findByType(type)findAllByType(type)hasByType(type)

findByService(profile)findAllByService(profile)hasByService(profile)


<wc-yellow registry="[[reg]]"> </wc-yellow>



@javiervelezreye37



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


wc-registry

get(k)set(k,c)

wc-cvs

tag()revert()

findById(id)findAll()


<wc-cvs registry="[[reg]]"> </wc-cvs>



@javiervelezreye38



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



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


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


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



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



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



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


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


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


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


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


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


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


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


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


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


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


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


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 ['wc-configurable'] = {


var rules = getRules ();

this.config (rules);

}

};


// process config

}

});

[wc-configurable]

@javiervelezreye55



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 ['wc-reconfigurable'] = {

listeners: { change: onChange },

onChange: function (e) {

var rules = getRules (e);

this.config (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



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

},


var rules = getRules ();

this.config (

this.context (rules)

);

},

context: function (rule) {

// Contextualize Rule

} };

@javiervelezreye57

<wc-X config="{{cx}}">



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



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 ['wc-registrable'] = {


var props = getProperties (this);

this.register (props);

},

register : function () {

// register props

}

};

wc-aseregistraautónomamenteporqueesregistrable

wc-besuncomponentenoregistrable

@javiervelezreye59



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



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



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



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 ['wc-injectable'] = {


this.config (ctx);

},

config: function (ctx) {

var cfg = ctx.get (this.is);

// inject dependencies

// using wc-context

}

};

wc-aseconfiguraautónomamenteporqueesinjectable

wc-besuncomponentenoinjectable

@javiervelezreye63



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


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


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

},


this.render (target);

}, };

Polymer ({

is : 'wc-x',

behaviors : [

Behaviors ['wc-targatable']

],

render: function (target) {

// Render

}

});

@javiervelezreye66


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); ); }


[email protected]

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



Click

wc-buron#btnwc-color

on-tap

<wc-color> </wc-color>


wc-bind

§  2componentesindependientes§  Unodeellosescomposable§  Configurandoelbinderseconsiguelaopera<va

<wc-bind for="wc-color"> <wc-rule event with="#btn" on="tap"/> </wc-bind>

B.ComposiciónExterna

@javiervelezreye70


I.ComposiciónDirectaporEventos<wc-button id="A"> </wc-button>

Click

wc-buron#A

on-tap

<wc-color> </wc-color>


<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



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


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


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


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


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



@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


[email protected]



Noviembre2016

Arquitecturas de Componentes Web. Patrones de Composición

Technology

Transcript of Arquitecturas de Componentes Web. Patrones de Composición