Arquitectura de Componentes Web. Patrones de Acceso a Datos

JavierVélezReyes@javiervelezreye

[email protected]

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?

[email protected]

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes


[email protected]

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


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


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


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



Layers

No0

fica0

on

UserBased

Channel

View

ers

Patrones

Diseñadores


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



Layers

No0

fica0

on

UserBased

Channel

View

ers

PlanoTecnológico

Programadores


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


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


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

Layers

No<

fica<

on

UserBased

View

ers

@javiervelezreye10


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


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


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


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



Asynce e e e e

ArquitecturaDirigidaporEventos

LasrelacionescomposiGvasseestablecendeacuerdoaun modelo de eventos. Cada componente operareacGvamenteenfuncióndeloseventosquelellegan

RestricciónArquitectónica#2.ArquitecturaEDA

SubsistemadeDatos

@javiervelezreye15



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



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


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



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



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



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


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


[email protected]

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


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


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


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


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


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



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



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



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


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



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



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



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



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



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



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



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



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


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



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



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



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



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



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


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


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



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



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



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



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


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



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



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



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



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



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



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'


[email protected]

3ElSubsistemadeAccesoaDatosenlaPrác>ca

§  Escenariodee-commerce§  Arquitectura§  FlujosdeIteración

ElSub

sistem

ade

AccesoaDa

tose

nlaPrác>ca

Patron

esdeAc

cesoaDatos

@javiervelezreye61

ElSubsistemadeAccesoaDatosenlaPrác<ca


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


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



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




Hombre Mujer Pagar

Sudaderas

Camisas

Camisetas

wc-command-provider

wc-data-port

wc-cache

wc-data-source

wc-rest


{{collections}}

{{collection}}

get('items')cmd

cmd cmdGet/categories/hombre/collections/ camisas/items

data

{{collections}} {{items}}

{{items}}

@javiervelezreye64



II.Portaldee-Commerce.FlujodeExploraciónB

Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


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



II.Portaldee-Commerce.FlujodeExploraciónB

Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


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



II.Portaldee-Commerce.FlujodeCompra

Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


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




Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER

Camisas

wc-command-provider

wc-data-port

wc-cache

wc-data-source

wc-rest


{{collections}}

{{collection}}

get('items')cmd

cmd cmdGet/categories/hombre/collections/ camisas/items

data


{{items}}

@javiervelezreye68




Hombre Mujer Pagar

Camisas

Sudaderas

camisetas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER

wc-command-provider

wc-transac<on


wc-observerpurchase

get('purchase')cmd

cmd

OK

@javiervelezreye69




Hombre Mujer Pagar

Camisas

Sudaderas

camisetas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER

wc-command-provider

wc-data-port

wc-cache

wc-data-source

wc-rest


{{collections}}

{{collection}}

get('items')cmd

cmd

data


{{items}}

@javiervelezreye70




Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER

Camisas

wc-command-provider

wc-transac<on


wc-observerpurchase

get('purchase')cmd

cmd

OK

@javiervelezreye71



II.Portaldee-Commerce.FlujodePago

Hombre Mujer Pagar

Camisetas

Sudaderas


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


COMPRAR

S M L X XL

VER


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



@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


[email protected]



Octubre2016

Arquitectura de Componentes Web. Patrones de Acceso a Datos

Software

Transcript of Arquitectura de Componentes Web. Patrones de Acceso a Datos