Arquitecturas de Componentes Web. Patrones de Composición

JavierVélezReyes@javiervelezreye

Javier.velez.reyes@gmail.com

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?

javier.velez.reyes@gmail.com

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes

1Introducción§  ArquitecturadeReferenciaparaComponentesWeb§  ArquitecturadeReferencia&Composición§  ElProblemadeComposición

Introd

ucción

Patron

esdeCo

sición

@javiervelezreye4

IntroducciónPatronesdeComposición

I.ArquitecturadeReferenciaParaComponentesWebUna arquitectura de referencia establece orientaciónacercadecómopuedenconstruirsesolucionesorientadasacomponentesWeb.

Session

Offline

Integra<

Access

RoleBased

ChannelBased

ContextBased

Paging

Conten

Containe

Interac<on

Performance Security

Monitoring Authe.&Autho.Op<miza<on WC&ResourceManagement

Layers

UserBased

Channel

Coordina<on

Comunica<on

Composi<on

UniversalApp

@javiervelezreye5

PatronesdeComposiciónPatronesdeComposición

III.ElProblemadeComposiciónLaComposiciónenPalabrasLa composición es el proceso por el cual se establece unconjuntodeenlacescomposi<vosentrecomponentesparapermi<rlacomunicación.

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.

@javiervelezreye7

III.ElProblemadeComposiciónComposiciónEstáRca&DinámicaLacomposiciónestá<caseproduceunavezalprincipiodelciclo de vida. La composición dinámica se repiterecurrentementeenrespuestaacambiosambientales.

NiveldeDo

Metacomponentes

NiveldeProyecto

ComposiciónEstáRca

ProcesodeComposición

Componenteobje<vo

Cuándo

NiveldeDo

Metacomponentes

NiveldeProyecto

ProcesodeComposición

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

<aside>

HTML JS

Diseño

EtapaI.

Desarrolloa

@javiervelezreye9

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

Dónde

this.setInterval

<aside>

HTML JS

Diseño

EtapaI.

Desarrolloa

HTML JS

Polymer

this.async

this.fire <content>

Construyo

EtapaII.

Creación

nentes

@javiervelezreye10

III.ElProblemadeComposiciónConstrucciónporComposiciónEnlaetapademadurezIII,lascorporacionesreconocenlasventajas de operar con un catálogo de componentes. Seconstruyenaplicacionesporcomposicióndeclara<va.

Dónde

nentesW

ebHTML

CatálogoWC Uso

EtapaIII.

Gobierno

nentes

HTML JS

this.setInterval

<aside>

Polymer

this.async

this.fire <content>

HTML JS

Diseño

Construyo

EtapaI.

Desarrolloa

EtapaII.

Creación

nentes

@javiervelezreye11

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

Dónde

nentesW

ebHTML

EtapaIII.

Gobierno

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>

§  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

@javiervelezreye13

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

Dónde

EtapaIII.

Gobierno

nentes

Códigopegamentorecurrentetambiéncomocomponentes

EncapsulacióndeLógicaComposiRva

LacomposicióncomounejerciciodeconfiguracióndeclaraBva

ConfiguracióndeclaraRva

Elcomportamientodelosartefactosdecomposiciónesflexibleyabierto

FlexibilidadcomposiRva

ComponentesPa

Componer

Abstracción

Reu<lizació

Declara<vid

adComposi<

2PatronesdeComposición

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

Patron

esdeCo

sición

Patron

esdeCo

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

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

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.

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)

xsfilter(xs)

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

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

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

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>

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

<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

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()'*'

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()'*'

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 =

PáginasBlancas

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

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-context registry="[[white]]"> </wc-context>

Laconfiguracióndelregistrosóloesnecesariahacerlaunavez

wc-context[wc-single]

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]

getContext('C1')

[wc-single]wc-context-provider

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

Componente Crea<vidaddeldiseñador

Flexibilida

Complejidad

Ejecución

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

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

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)

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)

@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

@javiervelezreye45

IV.PatronesdeEnlace Los patrones de enlace se encuentran estrechamente

condicionados con la forma de comunicación quepretendamosestablecer.

Enlace

Eventos

DataBinding

Mensajes

LacomposiciónaquíconsisteenregistraraAcomoescuchador

deloseventosdeBpoequeemiteB

EnlaceporEventos

DadoqueBBenepermisoparaescribirenx,lacomposiciónaquíconsisteenregistraraAcomointeresadoenloscambiosdex

EnlaceporDatos

LacomposiciónenestecasoenlazaelcomportamientodeAyBinvocandoamdesden

EnlaceporMensajes

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

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

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

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>

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

ready: function () {

this.bind ({ type : 'event', ref : B on : 'e' });

[wc-binding][wc-configurable]

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

guración

NivelIII.

Inyección

Automá<

ModelodeComponenteconvencional

ConfiguraciónexplícitaenHTMLporatributosyLightDOM

Alinstanciarelcomponenteseincluyelaconfiguración

NivelI.

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]

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

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

@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

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

Contextofunction (target, ctx) { Object.keys(target) .filter (isFunction) .forEach (fn => fn.bind (ctx); ); }

3LaComposiciónenlaPrácCca

§  ComposiciónDirectaporEventos§  ComposiciónIndirectaporDatos§  ComposicióndeFlujosdeEventos&Datos

posición

enlaPrácCca

Patron

esdeCo

sición

@javiervelezreye68

LaComposiciónEnLaPrác<caPatronesdeComposición

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

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

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>

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>

wc-buron#B

on-tap

C.ComposiciónMúlRple

wc-color

@javiervelezreye71

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>

language: 'es' onLanguage: function (e) {

this.i18n (getResource(

this.language

wc-factory

wc-context

wc-i18n

wc-login

[wc-i18n-able]

[wc-i18nable]:

wc-bind

{{language}} crea

wc-i18nregister

wc-register

set(i18n)

get(i18n)

§  Componentesconunperfili18n-able§  Composiciónindirectaatravésdememoria§  Bindingdedatos

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

language: i18n ready: function () { (#bnd).bind (...) } onLanguage: function (e) { ... }

wc-injector

wc-context

[wc-login]:

wc-i18n

wc-logininject

{{i18n.ok}} wc-bind

Injecti18n

wc-i18nregister

wc-register

set(i18n)

get(i18n)

§  Componentesconunperfili18n-able§  Composiciónindirectaatravésdememoria§  Bindingdedatos

<wc-register> </wc-register>

B.InyecciónAutomáRca

<wc-injector> </wc-injector>

@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

page-uppage-down

<wc-chain binder="#in"> <wc-even-client id="cl".../> <wc-pager.../> <wc-data-source.../> </wc-chain>

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

{{tweets}}tweets

<wc-bind for="#V"> <wc-rule data with="#dp" from="data" to="tweets"/> </wc-bind>

wc-data-port#dp

<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

Noviembre2016

Arquitecturas de Componentes Web. Patrones de Composición

Technology

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

Diseño Publicitario y Nuevas Tecnologías #7: Composición, jerarquía, retículas, y patrones

Arquitecturas Escalables

Arquitecturas Malditas

ARQUITECTURAS DIFUSAS

Arquitecturas empresariales

ARQUITECTURAS REFLEXIVAS

Arquitecturas de red

Patrones de Diseño de Arquitecturas de Software Enterprise

Patrones regionales en la estructura y composición ...

Patrones recientes de comercio y especialización internacional · Los patrones generales del comercio y la ... menos estructurales y tendencias a ... mera aproximación a la composición

Arquitecturas Sustentables

arquitecturas sostenibles

ARQUITECTURAS AVANZADAS

Arquitecturas 0708

Arquitecturas de computadores avanzadas, Módulo 3: Arquitecturas ...

Arquitecturas magnéticas

Arquitecturas Paralelas

Arquitecturas de red Arquitecturas de red

Arquitecturas SIMD

CPU Composición Interna de un Procesador. Arquitecturas de las Computadoras Modernas La gran mayoría de las computadoras de la actualidad están basadas.