JavierVélezReyes@javiervelezreye
PatronesdeAccesoaDatos
ArquitecturasOrientadasaComponentesWeb
Octubre2016
@javiervelezreye2
AutorPatronesdeAccesoaDatos
LicenciadoporlaUPMdesdeelaño2001ydoctoreninformá<caporlaUNEDdesdeelaño2009,Javierconjugasuslaborescomoprofesore inves<gador con la consultoría y la formación técnica paraempresa. Su línea de trabajo actual se centra en la innovación ydesarrollodetecnologíasparalaWeb.Ademásrealizaac<vidadesdeevangelización y divulgación en diversas comunidades IT y escoordinadordevariosgruposdeámbitolocalcomoNodeJSMadridoMadridJS.FormapartedelprogramaPolymerPolytechnicSpeakeryesmentordelcapítulodeMadriddeNodeSchool.
¿QuiénSoy?
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes
JavierVélezReyes@javiervelezreye
1Introducción§ ArquitecturadeReferenciaparaComponentesWeb§ PlanoArquitectónico,PlanodeDiseño&PlanoTecnológico§ ArquitecturadelSubsistemadeDatos
Introd
ucción
Patron
esdeAc
cesoaDatos
@javiervelezreye4
IntroducciónPatronesdeAccesoaDatos
I.ArquitecturadeReferenciaParaComponentesWebUna arquitectura de referencia establece orientaciónacercadecómopuedenconstruirsesolucionesorientadasacomponentesWeb.
La construcción de soluciones orientadas acomponentes Web es inherentemente máscomplejaqueotrasaproximacionescompe<<vas.
@javiervelezreye5
IntroducciónPatronesdeAccesoaDatos
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
Coop
era<
on
Coordina<on
Comunica<on
Composi<on
UniversalApp
s
Performance Security
Monitoring Authe.&Autho.Op<miza<on WC&ResourceManagement
Layers
No<
fica<
on
UserBased
Channel
View
ers
@javiervelezreye6
Arquitectos
IntroducciónPatronesdeAccesoaDatos
II.LaArquitecturadeReferenciaenelParadigmadeComponentesWebPlanoArquitectónicoElmodeloarquitectónicoexponeexplícitamentetodos losespaciosdeproblemaquepuedenaparecerenelmarcodesolucionesorientadasacomponentesweb.
Principios
Mecanismos
ObjeSvos
Vis
Evo
Hom
Ada
Dom
Cmp
Enc
Std
Tmp
Evt
Her
DBin
cic
Data
Session
Offline
Integra0
on
RoleBased
ChannelBased
ContextBased
View
Con
trol
Paging
Rou0
ng
Conten
t
Containe
rs
Interac0on
Coop
era0
on
Coordina0on
Comunica0on
Composi0on
UniversalApp
s
Performance Security
Monitoring Authe.&Autho.Op0miza0on WC&ResourceManagement
Layers
No0
fica0
on
UserBased
Channel
View
ers
@javiervelezreye7
Data
Session
Offline
Integra0
on
RoleBased
ChannelBased
ContextBased
View
Con
trol
Paging
Rou0
ng
Conten
t
Containe
rs
Interac0on
Coop
era0
on
Coordina0on
Comunica0on
Composi0on
UniversalApp
s
Performance Security
Monitoring Authe.&Autho.Op0miza0on WC&ResourceManagement
Layers
No0
fica0
on
UserBased
Channel
View
ers
Patrones
Diseñadores
IntroducciónPatronesdeAccesoaDatos
PlanodeDiseñoEldiseñodirigidoporpatronesesunaformasistemá<cadeexplorar esos espacios para encontrar soluciones deeficacia probada a problemas recurrentes para contextosreales.
Principios
Mecanismos
Arquitectos
ObjeSvos
Vis
Evo
Hom
Ada
Dom
Cmp
Enc
Std
Tmp
Evt
Her
DBin
cic
II.LaArquitecturadeReferenciaenelParadigmadeComponentesWeb
@javiervelezreye8
Data
Session
Offline
Integra0
on
RoleBased
ChannelBased
ContextBased
View
Con
trol
Paging
Rou0
ng
Conten
t
Containe
rs
Interac0on
Coop
era0
on
Coordina0on
Comunica0on
Composi0on
UniversalApp
s
Performance Security
Monitoring Authe.&Autho.Op0miza0on WC&ResourceManagement
Layers
No0
fica0
on
UserBased
Channel
View
ers
PlanoTecnológico
Programadores
IntroducciónPatronesdeAccesoaDatos
PlanoTecnológicoLa arquitectura proporciona componentes comomaterializacióndepatrones.Elcontextoarquitectónicofijaelcontratodecadacomponente.
Principios
Mecanismos
Patrones
Arquitectos
ObjeSvos
Vis
Evo
Hom
Ada
Dom
Cmp
Enc
Std
Tmp
Evt
Her
DBin
cic
Diseñadores
II.LaArquitecturadeReferenciaenelParadigmadeComponentesWeb
@javiervelezreye9
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosElSubsistemadedatosseposicionadentrode lacapadeintegración.Engeneralloscomponentesoperancondatosaccedidosdesdeestacapa.
Data
Session
Offline
Integra<
on
Channel
Access
RoleBased
ChannelBased
ContextBased
View
Con
trol
Paging
Rou<
ng
Conten
t
Containe
rs
Interac<on
Coop
era<
on
Coordina<on
Comunica<on
Composi<on
UniversalApp
s
Performance Security
Monitoring Authe.&Autho.Op<miza<on WC&ResourceManagement
Layers
No<
fica<
on
UserBased
View
ers
@javiervelezreye10
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosDentro de la capa de integración se dis<nguen 4subsistemas que <enen responsabilidades concomitantesconlages<óndedatosdefuentesexternas.
Data
Session
Offline
Integra<
on
Channel
CómosegesGonaeldiferimientodeinformacióndeestadoentresesionesdetrabajo
ControldeSesión
CómosegesGonaelaccesoafuentesdedatosylosflujosdeinformaciónasociados
AccesoaDatos
CómosegesGonalainformaciónextraídadelcanaluGlizado(móvil,broser,etc.)
ControldeCanal
CómosegesGonaelaccesoaadatosencontextosdeusoinestablesocondesconexión
AccesoOffline
@javiervelezreye11
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosPodemos caracterizar el subsistema de acceso a datos apar<r de 3 propiedades fundamentales, su esenciaasíncrona,sucardinalidadysudireccionalidad.
Asincronía
Cardinalidad
1:1
N:1
1:N
N:M
Direccionalidad
Entrante
Saliente
@javiervelezreye12
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatos
SubsistemadeDatos
EspacioAsíncronoLas caracterís<cas de los elementos fronterizos incluidosenelsubsistemadedatoshacequeéstaoperedeacuerdoaunmodelocompletamenteasíncrono.
Desde la perspecGva declaraGva, elinteracción con el subsistema dedatos se hace de manera asíncronaya sea a través de eventos o pormediodedata-binding
Interacciónasíncrona
Pese a que las fuentes operan enmodelos síncrono y asíncrono (segúnGpo), suaccesodesde front,a travésdeAJAXessiempreasíncrono
Accesoasíncrono
Async
@javiervelezreye13
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosEspacioAsíncronoLas caracterís<cas de los elementos fronterizos incluidosenelsubsistemadeaccesoadatoshacequeestaoperedeacuerdoaunmodelocompletamenteasíncrono.
Async
ArquitecturaPipes&Filters
Debe establecerse una arquitectura pipes& filtersque permite operar entre el acceso y la fuente atravésdeunacadenadetransformaciones
RestricciónArquitectónica#1.Pipes&Filters
SubsistemadeDatos
@javiervelezreye14
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosEspacioAsíncronoLas caracterís<cas de los elementos fronterizos incluidosenelsubsistemadeaccesoadatoshacequeestaoperedeacuerdoaunmodelocompletamenteasíncrono.
Asynce e e e e
ArquitecturaDirigidaporEventos
LasrelacionescomposiGvasseestablecendeacuerdoaun modelo de eventos. Cada componente operareacGvamenteenfuncióndeloseventosquelellegan
RestricciónArquitectónica#2.ArquitecturaEDA
SubsistemadeDatos
@javiervelezreye15
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosEspacioAsíncronoLas caracterís<cas de los elementos fronterizos incluidosenelsubsistemadeaccesoadatoshacequeestaoperedeacuerdoaunmodelocompletamenteasíncrono.
Asynce e e e e
ContratoReacSvoHomogéneo
incoming outgoing
calleventcommand
data
execute(e)
LoscomponentesdebencomparGrunmismocontrato que les permita operar dentro deunaarquitecturademensajes
RestricciónArquitectónica#3.ContratoReacSvoHomogéneo
Elcomponentereaccionaaeventosentrantes
La respuesta es también enformadeeventossalientes
El método execute procesaeventosentrantes ygenera comorespuestaeventossalientes
El payload de los eventos que provienen delfrontsellamacomando.Elqueprovienedelasfuentessellamadato
SubsistemadeDatos
@javiervelezreye16
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosEspacioAsíncronoLas caracterís<cas de los elementos fronterizos incluidosenelsubsistemadeaccesoadatoshacequeestaoperedeacuerdoaunmodelocompletamenteasíncrono.
Async
e e e e e
ContratoReacSvoHomogéneo
LoscomponentesdebencomparGrunmismocontrato que les permita operar dentro deunaarquitecturademensajes
RestricciónArquitectónica#3.ContratoReacSvoHomogéneo
CRUD
REST
PubSub
WSocket
datameta
Data
Laarquitecturadepipes&filtersnoseveafectadapor laheterogeneidadde las fuentesyaqueéstaseabsorbeenelcuerpodecadacomando
De formasimilar losmensajesdedatosabsorbentodos aquellos metadatos necesarios paragesGonarlarespuestadentrodelaarquitectura
SubsistemadeDatos
@javiervelezreye17
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosDireccionalidadLadireccionalidad se refierea ladirecciónque toman losflujosdedatosenlaarquitecturaPipes&Filters.Podemosdis<nguirentreflujosdeentradaydesalida.
e e e e e
Command
Los flujos entrantes corresponden acomandos de lectura / escrituraimpulsadosdesdeelfront
Flujosentrantes
Los flujos salientes corresponden arespuestas de datos emiGdas por lasfuentes
Flujossalientes
Data
FlujosEntrantes&SalientesIndependientes
Async
SubsistemadeDatos
@javiervelezreye18
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosDireccionalidadLadireccionalidad se refierea ladirecciónque toman losflujosdedatosenlaarquitecturaPipes&Filters.Podemosdis<nguirentreflujosdeentradaydesalida.
e e e e e
Command
Data
ComunicaciónCorrelada
Async
Dada la independenciaentreflujosentrantesy salientes es frecuente tener que aplicartécnicasdecorrelación
RestricciónArquitectónica#4.ComunicaciónCorrelada
Requiere técnicasdecorrelación
SubsistemadeDatos
Sincronía Asincronía
Request-Response
Query-Reply
OneWay
Request–AsyncResponse
NoSficaSón
Soporte natural enespacioasíncrono
@javiervelezreye19
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosDireccionalidadLadireccionalidad se refierea ladirecciónque toman losflujosdedatosenlaarquitecturaPipes&Filters.Podemosdis<nguirentreflujosdeentradaydesalida.
B A
ComunicaciónCorrelada.Ejemplo#1
e e e e e
A B Async
Dado el carácter asíncrono de larespuestaelordennoestágaranGzadoy puede ser necesario emparejar cadadatoconsucomandoporids
CorrelacióndeComandos&Datos
SubsistemadeDatos
@javiervelezreye20
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosDireccionalidadLadireccionalidad se refierea ladirecciónque toman losflujosdedatosenlaarquitecturaPipes&Filters.Podemosdis<nguirentreflujosdeentradaydesalida.
Si la respuesta a un comando seproducepor lotes es necesario correlarlas partes de la secuencia queconsGtuyenlainformacióncompleta
CorrelacióndeSecuencias
A
ComunicaciónCorrelada.Ejemplo#2
e e e e e
A2 A1 A3 Async
SubsistemadeDatos
@javiervelezreye21
IntroducciónPatronesdeAccesoaDatos
III.ElSubsistemadeAccesoaDatosCardinalidadLaarquitecturadedatosobedecea lanecesidadprincipalde acomodar el modelo de back al esquema demodularidadu<lizadoenfront.Estatransformaciónmarcalacardinalidaddeflujos.
Los datos de back se adaptan alesquema visual de front y recíproca-mente lo que provocamulGplicidad deflujos
Transformación
Command C1
C2
Data D2
D1 Async
SubsistemadeDatos
JavierVélezReyes@javiervelezreye
2PatronesdeDiseñoenelAccesoaDatos
§ PatronesdeAcceso&Ac<vación§ PatronesdeDistribución§ PatronesdeTransformación§ PatronesdeOp<mización§ PatronesdeControl
Patron
esdeDiseño
enelAccesoaDa
tos
Patron
esdeAc
cesoaDatos
@javiervelezreye23
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
SubsistemadeAccesoaDatos
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
ElsubsistemadeAccesoaDatossedisponeenunaseriedeniveles que persiguen ciertos principios construc<vos.Iremosdescribiéndolosalpresentarcadanivel.
@javiervelezreye24
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
I.PatronesdeAcceso
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
Las caracterísGcas parGculares de acceso a losdisGntos Gpos de fuentes de datos deberían sertransparentesaldesarrollador
NiveldeAcceso
@javiervelezreye25
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
I.PatronesdeAcceso
SerequiereconectaraunafuentededatosenREST.Laconexiónse hace a través de una solicitud AJAX lo que convierte lasllamadasenasíncronas.
Elcomponentewc-restproporcionaunaccesodeclara<voalasllamadasenREST.Elcontratopermite operar a cualquiera de los 4 nivelesdelprotocolo[1].
FuenteREST
<wc-rest base="http://server" path="users/[[user]]" body=[[data]] action="[[task]]" header="[[hds]]"> </wc-rest>
La configuración paramétrica se puedehacer por data-binding. Después solorestaejecutarlaacción
Primero se proporcionan los parámetros pordata-binding que configuran la llamada ydespuésseejecutaelcomando.
get() post() put() delete()
data
Cuandolafuentedisponededatoslosemitecomouneventodedatos,enalineamientoconlaarquitectura
El contrato funcional permiteatacar, en forma demétodos, a lafuentededatosenback
wc-rest
[1].RichardsonMadurityModel-heps://goo.gl/aYlT
@javiervelezreye26
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
I.PatronesdeAcceso
Se requiere conectar a una fuente de datos con comunicaciónbidireccional y asíncrona entre cliente y servidor. Para ello sedisponedeunservidorquesoportawebsockets.
Elcomponentewc-web-socketabreunacanaldecomunicaciónbidireccionalconelservidor.La comunicación para lectura y escritura sesoportaporeventos.
FuenteWebSocket
<wc-socket base="http://server" protocol="soap" channel="[[ch]]" data="[[data]]"> <wc-rule channel="ch1"/> <wc-rule channel="ch2"/> <wc-rule channel="ch3"/> </wc-socket>
La configuración de envío reside en losparámetros (channel) y (data). La derecepciónenloshijoslightDOM
Primero se proporcionan los parámetros pordata-bindingydespuésseejecutaelcomando.En este caso el componente no soporta elmodoauto.
send() receive()
data
Cuando por alguno de los canalesregistrados l legan datos, elcomponente emite un evento dedatos
Los métodos send & receivepermiten ejecutar el envío yescuchadedatos
wc-socket
@javiervelezreye27
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
I.PatronesdeAcceso
Se requiere homogeneizar el acceso a fuentes de datos demanera que todas presenten el mismo contrato indepen-dientementedesuprotocolo.
El componente wc-data-source ofrece unaadaptación homogénea a cualquier fuente. Elcontrato está basado en la escucha recep<vadecomandos.
AdaptadorDataSource
<wc-data-source source="#ds" type="wc-rest"> <wc-rule from="command.uri" to="uri"/> <wc-rule from="command.data" to="body"/> ... </wc-data-source>
Lasreglasdeconfiguraciónestablecen,eneste caso, cómo se traduce el comandoentrante al contrato específico de lafuente
El componente recibe la fuente contra laqueopera (source)yel<pode fuente (type)parasabercómoproceder.
command
Este es un evento de entrada. Esdecir, un comando que con<eneunape<ciónenviadadesdeelfrontenformatoJSON
wc-rest
wc-web-socket
wc-data-source
Por detrás el componente Websabe mapear al contrato de cadafuenteyoperarconél
wc-session
wc-kase
wc-meteor
@javiervelezreye28
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
II.PatronesdeAcSvación
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
La selección de una fuente de datos y suacGvaciónparasuposteriorusodeberíaserunatareatransparentealdesarrollador
NiveldeAcSvación
@javiervelezreye29
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
II.PatronesdeAcSvación
Algunasfuentesdedatosrequierendeciertalógicadeac<vacióndesde el front en la fase de arranque y cierta lógica dedesac<vaciónenlafasedeliberación.
Elcomponentewc-source-ac<vatorseencargadelanzarunarequestaalgúnservicioenbackencargado de ejecutar lógica de ac<vación yliberacióndefuentesyserviciosdedatos.
AcSvadordeFuente
<wc-source-activator source="#ds"> <wc-rule on="start" do="[[cmd1]]"/> <wc-rule on="stop" do="[[cmd2]]"/> </wc-data-source>
Lasreglasdefinenunciclodevidadinámico.Losmétodosdel componente para ese ciclo de vida se crean encaliente. En este ejemplo usamos la configuración deciclodevidamáshabitualconmétodos(start)y(stop).
El componente recibe la fuente contra laqueopera (source)yel<pode fuente (type)parasabercómoproceder.
Cierto componente usa el ac<vadorparaavisaralbackdequevausarseunafuentededatos
wc-source-acSvator
start() stop()
startrequest
start
[acGvated]
wc-cliente
Unusopar<culareselserviciodelogin/logout
@javiervelezreye30
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
II.PatronesdeAcSvación
Seu<lizandiscrecionalmentevariasfuentesdedatosdediverso<poycondiversasconfiguracionesenfuncióndelascondicionesambientalesenlasqueserealizaelacceso.
El componente wc-source-provider organizapor claves diferentes <pos de fuentes conconfiguraciones específicas y las entrega alcliente.
ProveedordeFuentes
<wc-source-provider> <wc-rule key="users" source="#ds1"/> <wc-rule key="prods" source="[[ds2]]"/> ... </wc-source-provider>
El uso de data-binding sobre el parámetro(source)permiteges<onardinámicamentelaconfiguracióndeestecomponente
Elproveedoresunregistrodefuentesqueserecuperan por claves. Las reglas refieren afuentesdefinidasenotrospuntosdelcódigo.
Ciertocomponenteusaelproveedorpara obtener una fuente de datosporclave
wc-data-source
wc-source-provider
Lacomunicaciónenestecasonoesporeventossinopormensajes
get
get(k)
wc-cliente
@javiervelezreye31
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
II.PatronesdeAcSvación
Se trabajacondis<ntasconfiguracionesde fuentesdedatosdeforma temporal. Instanciar un componente para cadaconfiguraciónemmeraresultademasiadocostoso.
El componente crea fuentes de datosgenéricas bajo demanda. Cuando éstas seliberanporelcliente,sealmacenanenunpoolparasureu<lización.
AlmacéndeFuentes
<wc-source-store> <wc-rule type="wc-rest" size="3"/> <wc-rule type="wc-socket" size="1"/> ... </wc-source-store>
El almacén de fuentes de datos se configuraindicandoelnúmerode fuentesquesedeseatenerdisponiblesparacada<podeprotocolousado.
Durante la sesión de trabajo la fuente dedatosobtenidaestareservada,luegoseliberaparaserusadaporotrosclientes
wc-source-store
get(k) release(s)
get(k)
release(ds)
wc-cliente
wc-sources
get
release
(selected)
@javiervelezreye32
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
Saber distribuir los comandos a cada unade las fuentes de datos con las queoperamos deber ía ser una tareatransparentealdesarrollador
NiveldeDistribución
@javiervelezreye33
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarcondiversasfuentesdedatosbajodiferentescircunstanciasquevienenmarcadasporel<poocontenidodelcomandooporlascondicionesambientales.
El componente wc-recruiter se encarga delocalizarunafuentededatosapropiadaparael<podecomandoyladevuelvealcliente.
Recruiter
<wc-recruiter data-provider="#p"> <wc-rule exp="[[x]]" source="key1"/> <wc-rule exp="[[y]]" source="key2"/> ... </wc-recruiter>
El reclutador es frecuentemente un compo-nenteespecíficodedominiosinconfiguraciónaunque pueden encontrarse versionesdeclara<vascomolasiguiente.
El componente selecciona una fuenteapropiadaylaentregacomoreferenciaalclienteparaqueopereconella
wc-recruiter
get(cmd)
wc-cliente
(selected)
ref
get(cmd)
Las reglas aquí sirven para expresar condicionesbajolascualesseescogeunafuentedeterminada.Unaopcióndereglamásavanzadaesesta…
<wc-rule exp="x.size > k" source="key"> <wc-where value="[[a]]" as="x"/> <wc-where value="[[b]]" as="k"/> </wc-rule>
@javiervelezreye34
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarcondiversasfuentesdedatosbajodiferentescircunstanciasquevienenmarcadasporel<poocontenidodelcomandooporlascondicionesambientales.
El componente wc-broker se encarga delocalizarunafuentededatosapropiadaparael<podecomandoyleenvíadichocomando.
Broker
El broker es frecuentemente un componenteespecífico de dominio sin configuraciónaunque pueden encontrarse versionesdeclara<vascomolasiguiente.
wc-broker
command
wc-sources
data
La fuente seleccionada recibeel comando entrante para suprocesamiento
(selected)
Las reglas de configuraciónoperan,enestecaso,deformasimilar a como lo hacen en elpatrónrecruiter
<wc-broker data-provider="#p"> <wc-rule exp="[[x]]" source="key1"/> <wc-rule exp="[[y]]" source="key2"/> ... </wc-broker>
@javiervelezreye35
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Tuproyectooperaconunconjuntodefuentessimilaresbajounesquemadecompe<ción.Necesitasenviarunasolicitudatodasellasyextraerunarespuestaagregadaoselec<vadelasmismas.
El componente wc-scaeer-gather ofrece estecomportamiento devolviendo una solicitudagregada o filtrando la mejor respuesta bajoalgúncriterio.
Scaeer–Gather
<wc-scatter-gather data-provider="#p"> <wc-rule source="key1"/> <wc-rule source="key2"/> ... </wc-scatter-gather>
El componente se configura con reglas queindicanlacoleccióndefuentesdedatosentrelasquesedistribuyelasolicitud.
wc-scaeer-gather
wc-aggregator
command
wc-sourcesdata
data
data
data Los datos producidos por las fuentes sonrecolectados por un agregador (ver másadelante). Si se trata de un comando de esescrituraesteflujono<enesen<do
(allselected)
@javiervelezreye36
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarconunconjuntodefuentessimilaresbajounesquema de compe<ción. Sin embargo, se pretende aplicarlógicadebalanceodecargaparanosaturaraningunadeellas.
El componente wc-balancer aplica ciertapolí<ca de balanceo de carga y entrega elcomandoalafuenteseleccionada.
Balancer
<wc-balancer data-provider="#p"> <wc-round-robin size="3" policy/> <wc-rule source="key1"/> <wc-rule source="key2"/> ... </wc-balancer>
El balanceador se configura especificando unconjunto de fuentes de datos equivalentes yuncomponentequeimplementaelinterfazdepolí<ca.
wc-balancer
command
wc-sources
data
La fuente de datos seselecciona por aplicacióndeciertapolí<caespecífica
(selected)
§ Round–Robin§ Random§ Weighted–Round–Robin§ Weighted–Random§ S<ky
TiposdePolíScas
next()
next
Los componentes de pol í<casimplementan una interfaz que indicalafuentequedebeseleccionarse
wc-x-policy
@javiervelezreye37
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarconunconjuntodefuentessimilaresbajounesquemadecompe<ción.Cadaunadeellassedebeu<lizarbajocondicionesambientalesydecontextodiferentes.
El componente wc-switcher seleccionaautomá<camente la fuente de datosapropiada en función de las condiciones decontorno.
Switcher
<wc-switcher key="[[x]]" data-provider="#p"> <wc-rule when="real" source="key1"/> <wc-rule when="fake" source="key2"/> ... </wc-switcher >
Elselectordefuenteporcontextoseconfiguraindicando la propiedad (key) que debeobservarsedentrodelcontextoambiental.
wc-switcher
command
wc-sources
data
La fuente de datos seselecciona en función decondicionesambientales
(selected)
Al permutar el valor de la variableambientalxsecambialaestrategiadeseleccióndefuentes
{{x}}
Las reglas de configuración determinanquefuentedebeaplicarsesegúnelvalordellapropiedadobservada
Unusopar<culareslaconfiguraciónporentornosdedesarrollo
@javiervelezreye38
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarconunconjuntodefuentessimilaresbajounesquema de compe<ción. Sin embargo, no todas ellas seencuentrandisponiblesenunmomentodeterminado.
Elcomponentewc-chainestableceunacadenade fuentesdemaneraque si una fuente estadisponible procesa el comando y sino, se lopasaalasiguientefuenteenlacadena.
Chain
<wc-chain data-provider="#p"> <wc-rule source="k1" busy="[[b1]]"/> <wc-rule source="k2" busy="[[b2]]"/> <wc-rule source="k3" default/> ... </wc-data-source>
Dis<ntas instancias de fuente se enlazanformando una cadena de responsabilidad. Siuna fuente está ocupada se delega en elsiguienteelementoenlacadena.
wc-chaincommand
Laúl<mareglarefiereaunafuentededatosqueseencargadeoperarcuando las demás han estadoocupadas
wc-source
{{x}}
wc-chain wc-source
{{x}}
wc-source
ok
ok
busy
busy
Las reglas incluyen un flagpara marcar cuando unafuenteestáocupada
@javiervelezreye39
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Se requiere operar con un conjunto de fuentes de datos. Sinembargo,laconexiónoelservicioqueledasoporteespropensoacaerseynoofrecedisponibilidadpermanente.
Elcomponentewc-retrierreintentaelataquealafuenteunnúmerodeterminadodevecesencasodefalloparaaumentarlaprobabilidaddeéxito.
Retrier
El componente opera contra una fuente dedatos.Lasreglasdeconfiguraciónindicanparacada <po de comando el númeromáximo deintentos(max)ylafrecuenciadeataque(ms).
(max)eselnúmeromáximodeintentosarealizar
wc-retriercommand command
wc-source
error
data
cmd#1
errorcmd#2
okcmd#3
(ms) es el <empo deesperaentreintentos
E l componente <enememoria para ges<onarsimultáneamente varioscomandosdiferentes
<wc-retrier source="k1" data-provider="#p"> <wc-session cache-provider/> <wc-rule exp="[[x]]" max="3" ms="300"/> <wc-rule exp="[[y]]" max="3" ms="5000"/> ... </wc-retrier>
Las expresiones de regla ayudan aevaluarelcomandoentranteparasaberquecriteriosdereintentoaplicarle
@javiervelezreye40
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
III.PatronesdeDistribución
Serequiereoperarconunconjuntodefuentessimilaresbajounesquema de compe<ción. Sin embargo, éstas son propensas acaerseydenegarelserviciodurantelargo<empo.
Elcomponentewc-circuir-brakerdetectaestasfuentes inestables y las desconecta temporal-mentehastaquevuelvenaestaropera<vas.
CircuirBreaker
Elcomponenteseconfiguraconunproveedory la colección de referencias a fuentes quedebe u<lizar. Para resetear el estado debeinvocarseelmétodo(reset).
wc-circuit-breaker
command
wc-retriers
data
El patrón es en realidad unbalanceador + una colección deretriers.Cuandounretrieravisadeerror el componente desac<va lafuenteypruebaconlasiguiente
error El error del retrierhacequesedesac<ve
La siguiente fuente yaoperaadecuadamente
reset()
<wc-circuit-breaker data-provider="#p"> <wc-rule source="key1" time="30"/> <wc-rule source="key2" time="10"/> ... </wc-circuit-breaker>
El parámetro <empo (<me) de lasreglas indica el <empo que lafuente debe estar inaccesible. Porconveniencia, éste se expresa enminutos.
@javiervelezreye41
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
Acomodar las impedanciasentre lasesquemasdedatos de las fuentes y losmodelos de interacciónde front debería ser una tarea transparente aldesarrollador
NivelTransformación
@javiervelezreye42
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
Algunos comandos o datos deben descartarse para que nolleguen a su obje<vo final. El criterio de filtro depende delcontenidoolascondicionesambientales.
El componente de filtro deja pasar sóloaquéllos eventos que verifican determinadapropiedad expresada en componentes deguarda.
Filter
El componente se configura a través de unacolección de reglas que refieren a losproveedoresdeguarda.SucriteriosecombinadeacuerdoaunalógicaANDuOR.
wc-filtere e
<wc-filter and> <wc-rule guard="#A"/> <wc-rule guard="#B"/> ... </wc-filter> <wc-exp id="A" exp="x.size > k" > <wc-where value="[[a]]" as="x"/> <wc-where value="[[b]]" as="k"/> </wc-exp> <wc-idempotent path="meta.id"/>
wc-guard
eventcheckcheck
event
wc-guard wc-target
El filtro consulta a loscomponentesdeguarda
Cada componente de guardavalora la conveniencia defiltrarelevento
El des<no sólo recibe loseventos que han atravesadoelfiltro
Unusopar<cularpermitedescartarcomandosdeescriturarepe<dos(idempotencia)
@javiervelezreye43
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
Algunos comandos o datos deben enriquecerse antes de quelleguen a su obje<vo final. Los datos a incluir provienen delestadodeotroscomponentesocondicionesambientales.
El componente wc-enritcher se encarga deincluir informaciónen loseventosentrantesapar<rdedatosproporcionadosporproveedo-resdecontexto.
Enritcher
El componente se configura a través de unacolección de reglas que refieren a losproveedores de datos cuyas contribucionesseránañadidasaleventodesalida.
wc-enritchere e
<wc-enritcher> <wc-rule path="meta.id" from="#A"/> <wc-rule path="header.user" from="#B"/> <wc-rule path="header.app" from="#C"/> ... </wc-enritcher> <wc-session id="B" key="usr" level="local"/> <wc-session id="B" key="app" level="session"/> <wc-id-factory start="[[n]]"/>
usr app
Id++
event event'
usr app
Id=35
Elcomponenteenriqueceel evento entrante parapasarle datos de otroscomponentes
Generadordeiden<ficadoresúnicos
Eltokendeaplicaciónyusuariosealmacenalocalmenteyseañadealacabecera
wc-id-factory
wc-session
@javiervelezreye44
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
Algunos comandos o datos se encuentran en un formatoincompa<ble para ser adecuadamente interpretados por sudes<no.Serequiereunatraducción.
El componente wc-translator especifica unaplan<lla de traducción donde se expresa elformatode salidaen funciónde losdatosdeleventodeentrada.
Translator
El componente se configura por medio de ladefinición de una plan<lla. Cualquiera de lasplan<llasdom-puedeu<lizarse.
wc-translatore e
<wc-translator> <template> { header : {}, body : { user : [[name]], pwd : [[password]] } } </template> </wc-translator>
event event'
El evento a la entradarepresentaunosdatosenciertoformato
El traductor expresa los datos deleventoalasalidaparaacomodarlosalformatoesperadoeneldes<no
El proceso de traducciónestádirigidoporplan<llas
@javiervelezreye45
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
Algunosdeloscomandosodatosestánexpresadosaunniveldegranularidaddemasiadoaltoydebenserdescompuestosensuspartesatómicas.
El componente wc-splieer se encarga derealizar una descomposición del eventoentrante para generar una colección deeventosmássencillos.
Splieer
Laplan<llarecorreloselementosdedatosdelevento entrante y expresa el formato paracadaeventodesalida.
wc-splieere e1 e2 e3
<wc-splitter> <wc-rule path="cmd.items" as="item"/> <template>{ owner : [[cmd.user]], product : { name : [[item.name]] id : [[index]], amount : 1, price : [[item.price]] } } </template> </wc-splitter>
Laentradarecibeunevento en formacompuesta
Elcomponentedescomponeelevento en otros eventosatómicos
wc-target
E[d1, d2, d3]
d3 e
d2 e
d1 e
Payload de cada eventosaliente
Path donde reside lacolecciónapar<cionar
@javiervelezreye46
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
IV.PatronesdeTransformación
Algunosdeloscomandosodatosestánexpresadosaunniveldegranularidad demasiado bajo y deben ser agregados en unaestructuracompuesta.
El componente wc-aggregator se encarga derealizar una composicióndeuna coleccióndeeventos atómicos entrantes para generar uneventoscompuesto.
Aggregator
Laplan<llase interpretaensen<do inversoalcaso anterior. Construye un esquemacomplejo desde una colección de itemsrecolectadosenel<empo.
wc-aggregatore e1 e2 e3 Llegan a lo largo del
<empoeventosatómicos
El componente analiza el iden<fi-cador de secuencia para sabercuandoemi<releventocompuesto
wc-target
E[d1, d2, d3]
d3 e
d2 e
d1 e
<wc-aggregator> <template>{ cmd : 'basket, <template is='dom-repeat' items='{{items}}'>{ owner : [[user.name]], products : [[data.prods]] } </template> } </template> </wc-aggregator>
@javiervelezreye47
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
V.PatronesdeOpSmización
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
OpGmizar el acceso a las fuentesde datos debería ser una tareatransparentealdesarrollador
NiveldeOpSmización
@javiervelezreye48
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeOpSmización
Algunos comandos de lectura se repiten recurrentemente a lolargode lasesióndetrabajo loqueprovocaunasobrecargadelasfuentesdedatos.
El componente wc-cache es una memoriaintermediade acceso rápidoquedescargadetrabajo a las fuentes cuando el dato se hacargadorecientemente.
Cache
Elcomponenteseconfiguraconunproveedorde persistencia e información acerca del<empo de vida que residen los datos enmemoria.
<wc-cache time="30" path="cmd.query"> <wc-session cache-provider/> </wc-cache>
Elparámetro<empo(<me)expresael<empodevidaenminutosdelosdatosencache
Laruta(path)dicea lacachequé dato del comando delectura corresponde a lac lave con que se hanpersis<dolosdatos
wc-cachecommand data
data wc-source
readread
data
read
wc-target
data
Nosedisponedelosdatosyseconsultalafuente
Yasedisponedelosdatosyseentreganalcliente
data
@javiervelezreye49
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
V.PatronesdeOpSmización
Algunas fuentes exponen sus colección de datos de acuerdo auna lógica de paginación. El acceso a esta información deberíarealizarsedeformafluidahaciendotransparentedichalógica.
Elcomponentewc-pageresunapoderadoquepermite explorar colecciones paginadas deforma transparente ofreciendo una sensacióndecon<nuidadenlosdatos.
Pager
El componente paginador se configuraindicando el proveedor de persistencia y el<empodevidadelaspáginas.
<wc-pager time="30" path="cmd.page" start="1"> <wc-session cache-provider/> </wc-pager>
El paginador también funciona comouna cache anivel de página de manera que sólo consulta lafuentecuandonodisponedelapáginaenlocal
En este caso (start) indicalapáginadecomiendo.
wc-pagercommand data
data wc-source
nextread
data
previous
wc-target
data
data
El comando se encarga deges<onar el númerodepáginayenriquecerelpayload
@javiervelezreye50
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
V.PatronesdeOpSmización
Algunos <pos de datos requieren un tratamiento transaccionalaunque sus fuentes no lo soporten. Se requiere emular latransaccionalidaddesdeelfront.
El componente wc-transac<on re<ene elprocesamiento de los comandos entrantespara que se procesen en bloque sólo a lallegadadeunaseñal.
TransacSon
El componente transacción se configuraindicandoelproveedordepersistenciadondeseacumulanloseventosantesdeenviarse.
wc-transacSoncommand wc-aggregator
commit
writewritewrite
wc-source
writewritewrite
write-allLa transacción suele combi-narse con un agregador paragenerar un único paquete dedatos
<wc-transaction> <wc-session cache-provider/> <wc-rule when='[[exp]]' commit/> </wc-transaction>
Todos los comandos se persistenlocalmente a la espera de quellegue una señal explícita decommit
La expresión (exp) ayuda alcomponente a iden<ficar loscomandos que correspondenasentenciascommit
@javiervelezreye51
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
V.PatronesdeOpSmización
Algunas fuentesdedatosoperanaun ritmomás lentodelquelos datos son generados en front. Se requiere un mecanismoparanosaturaralafuentebasadoeneldescartededatos.
El componente wc-throele se encarga degaran<zar que cualquier comando que seemita demasiado próximo en <empo a otroanteriorseadescartado.
Throele
El componente se configura indicando el<empo en milisegundos que debe aplicarsecomoumbralparadescartareventos.
wc-throelecommand wc-target
e1 e1
Se descartan todos aquelloseventos que llegan con unafrecuenciademasiadorápida
e3e2
e4e5
e6
e3
e5 Este patrón se aplica bajo lahipótesis de que la pérdida deeventos no es significa<va para elproblema
<wc-throttle ms="[[t]]"> </wc-throttle>
@javiervelezreye52
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
V.PatronesdeOpSmización
Algunas fuentesdedatosoperanaun ritmomás lentodelquelos datos son generados en front. Se requiere un mecanismoparanosaturaralafuentebasadoenelencoladodedatos.
El componente wc-delayer introduce unretardo temporal fijo en todos los comandosqueprovienendesdeelfrontparanosaturaralafuente.
Delayer
El componente se configura indicando el<empo en milisegundos que debe retardarselapropagacióndeeventosyunproveedordepersistencia.
wc-delayercommand wc-target
e1 e1
En este caso no se pierdeneventos pero se acomoda lafrecuenciadellegada
e3e2
e2
e3 Este patrón puede suponer uncuellodebotellayaqueloseventosnosepierden,sóloseretardan
<wc-delayer ms="[[t]]"> <wc-session cache-provider/> </wc-delayer>
@javiervelezreye53
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
AccesoaDatos
Control
Acceso
Tran
sformación
Distrib
ución
OpG
miza
ción
AcGvación
Los mecanismos de integración entre lasvistas (componentes UI) y las fuentes dedatos (componentes de daros) deberíansertransparentesaldesarrollador
NiveldeControl
@javiervelezreye54
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Diferentes<posdefuentesdedatosu<lizandis<ntosprotocolosdeacceso.Serequiereabstraersuformadeusoparaqueoperendeformahomogénea.
Este componente encapsula la complejidadinherenteaunprotocolodeusodeunafuenteen un mensaje JSON (comando) que sepropagacomoeventoenlaarquitectura.
CommandProvider
El componente se configura definiciendo loscomandos por propiedades e indicando elcontextodondeseevaluanlaspropiedades(:)
<wc-command-provider context="[[ctx]]"> <wc-rule command="cinemas"> <wc-property path="cmd.verb" value="get"/> <wc-property path="cmd.uri" value="/cinemas"/> </wc-rule> <wc-rule command="movies"> <wc-property path="cmd.verb" value="get"/> <wc-property path="cmd.uri" value="/cinemas/[c]/movies"/> </wc-rule> <wc-rule command="sessions"> <wc-property path="cmd.verb" value="get"/> <wc-property path="cmd.uri" value="/cinemas/[c]/movies/[m]/sessions"/> </wc-rule> ... </wc-command-provider>
wc-command-provider
get(k)
k1 :
k2 :
k3 :
1.Seob<eneelcomandoporclave
wc-cliente
wc-data-source wc-rest2.selanzaelcomandoenuneventocommandhastalafuente command
3.Lafuentereinterpretaelcomandoenunaoperacióndeprotocolo
post()
@javiervelezreye55
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Dis<ntosdatosque llegandesde las fuentesdedatosen formade eventos deben ser retenidos para poder ser consultadosposteriormenteencualquiermomento.
Elcomponentewc-data-portseencargadedaraccesoa losdatosdeuncanaldeeventosenunapropiedaddedata-binding.
DataPort
El componente se configura indicando lafuentededatos (source)aescuchar.El (path)eslarutaeneleventodedatosquedeterminaenfunciónde(when)dondedepositareldato.
<wc-data-port source="#ds1" path="..."> <wc-rule when="A" data="{{d1}}"/> <wc-rule when="B" data="{{d2}}"/> <wc-rule when="C" data="{{d3}}"/> </wc-data-port>
#ds1
wc-data-port e
e1
e2
{{x}}
{{y}}
A
B
@javiervelezreye56
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Se requiere explorar en profundidad una fuente de datosorientada a recursos. El progreso de la exploración quedacontroladoporpropiedadesendata-binding.
El componente proporciona un mecanismoexplícito para realizar la exploración contro-lada por variables y centralizar los comandosdeataque.
DataDrivenClient
Elcomponenteseconfiguraconunproveedorde comandos y una colección de reglas queindican el avance en la exploración cada vezqueunanuevavariabletomavalor.
<wc-data-client command-provider="#p"> <wc-rule command="cinemas"/> <wc-rule command="movies" when="[[c]]"/> <wc-rule command="sessions" when="[[m]]"/> </wc-data-client> cinemas
movies
sessions
/cinemas
/cinemas/{{c}}/movies
/cinemas/{{c}}/movies/{{m}}/sessions
{{c}}
{{m}}
wc-data-driven-clientcommand
{{c}}
{{m}} && {{c}}
Seexploraenprofundidadunespacioderecursos
Las variables pobladasdeterminan el progresoenlaincursión
cinemas
movies
sessions
@javiervelezreye57
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Se requiere explorar en profundidad una fuente de datosorientada a recursos. El progreso de la exploración quedacontroladoporeventos.
El componente man<ene el estado de lanavegación y ofrece un mecanismo explícitode realizar la exploración controlada poreventos.
EventDrivenClient
Elcomponenteseconfiguraconunproveedorde comandos y una colección de reglas queindican el avance en la exploración cada vezquellegaunnuevoevento.
<wc-data-client command-provider="#p"> <wc-rule command="cinemas"/> <wc-rule command="movies" on="e1"/> <wc-rule command="sessions" on="e2"/> </wc-data-client> cinemas
movies
sessions
/cinemas
/cinemas/{{c}}/movies
/cinemas/{{c}}/movies/{{m}}/sessions
wc-event-driven-clientcommand
e1 (c)
e2 (m) + (c)
Seexploraenprofundidadunespacioderecursos
Lasvariablesextraídasdeleventodeterminanelprogresoenlaincursión
cinemas
movies
sessions
c
m
@javiervelezreye58
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Se requiere explorar una fuente de datos hypermedia. Laexploración queda controlada por un conjunto de eventos querepresentanmovimientossobreelgrafoderecursos.
El componente man<ene el estado de lanavegación sobre el espacio hypermedia derecursos y controla su progreso dirigido poreventos.
HypermediaClient
El comando sólo requiere una referencia alestado/recursoinicial.Elrestodeestadosysuscomandos asociados se extraen de larespuesta(response).
root
wc-hypermedia-clientcommand
Books
Books
Books
Books
mine
shared add del
add
item
Book
Book#1…n-1
Book#n
related
Account
Account
purchase
<wc-hypermedia-client command-provider="#p"> <wc-rule start-command="root"/> <wc-rule response="{{data}}"/> </wc-hypermedia-client>
Cadarelaciónesuncomandocuya estructura está en larespuesta del comandoanterior
Cada recurso representa unestadodelaaplicación
@javiervelezreye59
PatronesdeDiseñoenelAccesoaDatosPatronesdeAccesoaDatos
VI.PatronesdeControl
Serequierereaccionarcontraunafuentededatoscadavezqueseproduceuncambioasíncronoenelcontextoambientaldondesedesarrollaelfront.
Elcomponenteseman<enealaescuchadeloscambios de las condiciones ambientales quesonobjetodeinterésreac<vo.
Observer
Elcomponenteseconfiguraconunagentedeescucha(spy)que lanzaeventoscadavezqueseproducencambios.
<wc-observer command-provider="#p"> <wc-dom-spy path="css" spy/> <wc-js-spy target="{{wc}}" spy/> <wc-event-spy target="{{wc}}" spy/> <wc-rule on="e1" command="k1"/> <wc-rule on="e2" command="k2"/> <wc-rule on="e3" command="k3"/> </wc-observer>
3 de los ejemplos deespíamáscomunes
Las reglas indican con quécomandos debe reaccionarseparacada<podeevento
wc-observere command
wc-dom-spy
wc-js-spy
wc-event-spy
dom
e
e3
e2
e1
cmde'
e'
e'
JavierVélezReyes@javiervelezreye
3ElSubsistemadeAccesoaDatosenlaPrác>ca
§ Escenariodee-commerce§ Arquitectura§ FlujosdeIteración
ElSub
sistem
ade
AccesoaDa
tose
nlaPrác>ca
Patron
esdeAc
cesoaDatos
@javiervelezreye61
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
Camisetas
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Motivo de texto
COMPRAR
S M L X XL
VER
Camiseta de algodón Cuello redondo
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado a color
COMPRAR
S M L X XL
VER
Hombre Mujer Pagar
I.Portaldee-Commerce.Escenario
Selectordecategoría
Sudaderas
Selectordecolección
Sliderdecolección
Botóndepago
Botóndecompra
@javiervelezreye62
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónA
Hombre Mujer Pagar
Sudaderas
Camisas
Camisetas
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client{{category}}
get('collecGons')cmd
cmd cmdGet/categories/hombre/collections
data
{{collections}}
{{collections}}
@javiervelezreye63
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónA
Hombre Mujer Pagar
Sudaderas
Camisas
Camisetas
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client{{category}}
{{collections}}
{{collection}}
get('items')cmd
cmd cmdGet/categories/hombre/collections/ camisas/items
data
{{collections}} {{items}}
{{items}}
@javiervelezreye64
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónB
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client
wc-pager
{{category}}
{{collections}}
{{collection}}
get('items-next')cmd Get
/categories/hombre/collections/ camisas/items?page="2"
data
cmd cmd
{{items}} {{items}}
@javiervelezreye65
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónB
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client
wc-pager
{{category}}
{{collections}}
{{collection}}
get('items-previous')cmd
cmd
{{items}} {{items}}
data
@javiervelezreye66
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeCompra
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-transac<on
wc-data-source wc-rest
wc-observerpurchase
get('purchase')cmd
cmd
OK
@javiervelezreye67
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónA
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client{{category}}
{{collections}}
{{collection}}
get('items')cmd
cmd cmdGet/categories/hombre/collections/ camisas/items
data
{{collections}} {{items}}
{{items}}
@javiervelezreye68
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeCompra
Hombre Mujer Pagar
Camisas
Sudaderas
camisetas
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Motivo de texto
COMPRAR
S M L X XL
VER
Camiseta de algodón Cuello redondo
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado a color
COMPRAR
S M L X XL
VER
wc-command-provider
wc-transac<on
wc-data-source wc-rest
wc-observerpurchase
get('purchase')cmd
cmd
OK
@javiervelezreye69
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeExploraciónA
Hombre Mujer Pagar
Camisas
Sudaderas
camisetas
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado grande
COMPRAR
S M L X XL
VER
Camiseta de algodón Motivo de texto
COMPRAR
S M L X XL
VER
Camiseta de algodón Cuello redondo
COMPRAR
S M L X XL
VER
Camiseta de algodón Estampado a color
COMPRAR
S M L X XL
VER
wc-command-provider
wc-data-port
wc-cache
wc-data-source
wc-rest
wc-data-client{{category}}
{{collections}}
{{collection}}
get('items')cmd
cmd
data
{{collections}} {{items}}
{{items}}
@javiervelezreye70
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodeCompra
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-transac<on
wc-data-source wc-rest
wc-observerpurchase
get('purchase')cmd
cmd
OK
@javiervelezreye71
ElSubsistemadeAccesoaDatosenlaPrác<ca
PatronesdeAccesoaDatos
II.Portaldee-Commerce.FlujodePago
Hombre Mujer Pagar
Camisetas
Sudaderas
Camisa informal Bolsillos con botones
COMPRAR
S M L X XL
VER
Camisa informal Cuadro escocés
COMPRAR
S M L X XL
VER
Camisa informal Cuello abotonado
COMPRAR
S M L X XL
VER
Camisa informal Tartán de algodón
COMPRAR
S M L X XL
VER
Camisa informal Tela vaquera
COMPRAR
S M L X XL
VER
Camisas
wc-command-provider
wc-transac<onwc-observerpayment
get('payment')cmd
cmd
wc-aggregator
cmd
OK
wc-filter
logged?
No Si
wc-data-source wc-enritcher
cmd
wc-restPost()
cmd cmd
wc-login wc-ac<vator
@javiervelezreye72
ConclusiónPatronesdeAccesoaDatos
Conclusión
ParaelusuariodesarrolladordecomponentesWebdeberíasertransparentelanaturalezadelafuentede datos, su lógica acceso y ac<vación, y lasnecesidades de transformación y op<mizaciónpotenciales.
@javiervelezreye73
PreguntasPatronesdeAccesoaDatos
www.javiervelezreyes.com
PatronesdeAccesoaDatos
ArquitecturasOrientadasaComponentesWeb
@javiervelezreye74
ReferenciasPatronesdeAccesoaDatos
Referencias
LaWebOrientadaaComponentes
Fecha Noviembrede2015Lugar CodeMo<onPáginas 57Ref heps://goo.gl/mCxm3w
ComponentesWeb·ArquitecturasSovware·Frontend·JavaScript·Composición · Encapsulación · Reu<lización · Buenas Prác<cas ·PrincipiosdeDiseño·Errorescomunes
PrincipiosdeDiseñoenComponentesWeb
Fecha Marzode2015Lugar PolymerMadridPáginas 170Ref heps://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
JavierVélezReyes@javiervelezreye
PatronesdeAccesoaDatos
ArquitecturasOrientadasaComponentesWeb
Octubre2016