View
1.916
Download
1
Category
Preview:
Citation preview
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
LaWebOrientadaaComponentes
ProgramaciónOrientadaaComponentesWeb
Noviembre2015
@javiervelezreye2
AutorLaWebOrientadaaComponentes
LicenciadoporlaUPMdesdeelaño2001ydoctoreninformá<caporlaUNEDdesdeelaño2009,Javierconjugasuslaborescomoprofesore inves<gador con la consultoría y la formación técnica paraempresa. Su línea de trabajo actual se centra en la innovación ydesarrollodetecnologíasparalaWeb.Ademásrealizaac<vidadesdeevangelización y divulgación en diversas comunidades IT y escoordinadordevariosgruposdeámbitolocalcomoNodeJSMadridoMadridJS.FormapartedelprogramaPolymerPolytechnicSpeakeryesmentordelcapítulodeMadriddeNodeSchool.
¿QuiénSoy?
javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
1Introducción§ QuéSonLosComponentesWeb§ PorQuéComponentesWeb§ CómoOperanLosComponentesWeb
Introd
ucción
LaW
ebOrie
ntad
aaCo
mpo
nentes
@javiervelezreye4
IntroducciónLaWebOrientadaaComponentes
La tecnología de Componentes Web proporcionaunmecanismopara construirnuevase<quetasdeautor personalizadas que incluyen una semán<ca,un comportamiento funcional y una lógica depresentaciónpropia.
E<quetasdeAutorQuéSonLosComponentesWeb
@javiervelezreye5
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
@javiervelezreye6
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
Seencapsulanenformadecomponentesreu?lizablesmodelosdeinteracciónde
aplicaciónrecurrenteendis?ntoscontextosdeuso
@javiervelezreye7
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
AAdaptación
RWD–AWD&AccesibilidadCadacomponenteesresponsabledeges?onarelespaciovisualqueocupaelcontenidoenrelaciónconlascondicionesdeldisposi?vo
@javiervelezreye8
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
AAdaptación
HHomogeneidad
Lahomogeneidadvisualesimprescindibleparaar?cularunprocesocomposi?voadecuado.Laestandarizacióneslaformadeobtenerlo
Estándares
@javiervelezreye9
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
AAdaptación
HHomogeneidad
VVersionado
Líneaevolu?va
t1 t2
v1 v2
Lasac?vidadesdemantenimientoevolu?vosonges?onadasatravésdelcambiocentralizadodeloscomponentesWeb
@javiervelezreye10
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
AAdaptación
HHomogeneidad
VVersionado
PPresentación
REST
Programador
UsuarioFinal Loscomponenteswebestáncentrados
enlavistaparaofrecerproyeccionesinterac?vasdelascapacidadesofrecidasporelsistema
@javiervelezreye11
IntroducciónLaWebOrientadaaComponentes
LaReu<lizacióncomoObje<vo
PorQuéComponentesWeb
Rreu<lización
EEncapsulación
AAdaptación
HHomogeneidad
VVersionado
PPresentación
CComposición
Cadacomponenteoperavisualmentesinimponerfronterasdecontexto
@javiervelezreye12
IntroducciónLaWebOrientadaaComponentes
Perspec<vaGeneralCómoOperanlosComponentesWeb
Incluyetodaslasnuevascapacida-desestándarqueex?endenlaWebcomoplataformadeorientaciónacompo-nentes
Plataforma
Capacidades funcionales sobrela plataforma que simplificanel proceso de desarrollo deComponentesWeb
Polymer
AplicacionesorientadasacomponentesalserviciodelosusuariosdelaWeb
Aplicaciones
ComponentesestándardedicadosadarrespuestaanecesidadesrecurrentesdecontroloUI
Elementos
@javiervelezreye13
IntroducciónLaWebOrientadaaComponentes
4EstándaresWebCómoOperanlosComponentesWeb
ShadowDOM
Ofreceunmodelodeencapsulaciónquepermiteaislarelcontenidointernodelcomponentedeaquélenlapáginadondeésteesrenderizado
.shadowRoot
.host
HTMLTemplates
Ofreceunmodeloderenderizaciónbasadoenplan?llasinertesdecódigoHTMLquesólosonac?vadascuandoserenderizaelcomponente
@javiervelezreye14
IntroducciónLaWebOrientadaaComponentes
4EstándaresWebCómoOperanlosComponentesWeb
CustomElements
Ofreceunmodelodeextensibilidadquepermitealosdesarrolladoresdefinirsuspropiase?quetasoredefinirsemán?camentelase?quetasdelestándarHTML
HTMLEstándar
WCE<quetasdeautor
<google-maps> </google-maps>
HTMLImports
OfreceunmodelodemodularizaciónyempaquetamientobasadoenlaposibilidaddeincluirficherosdecódigoHTMLdentrodeotrosficherosHTML
Index.html A.html
<link rel="import" href="a.html">
@javiervelezreye15
IntroducciónLaWebOrientadaaComponentes
ElFrameworkPolymerCómoOperanlosComponentesWeb
SistemadeData-Binding
Elsistemadedatabindingdepolymerman?enesincronizadalavistaconloscambiosenelestadodelcomponenteyrecíprocamente
<dom-module id="wc-test"> <template> <div>{{x}}</div> </template> <script> Polymer ({ is: 'wc-test', ready: function () { this.x = 7; } }); </script> </dom-module>
MotordePlanCllas
Polymertambiénofreceunmotorderenderizadobasadoenplan?llasconlógicapararepresentacióndecontenidoitera?vaycondicional
<dom-module is="dom-repear" items="{{its}}"> </dom-module>
<dom-module is="dom-if" items="{{exp}}"> </dom-module> ...
@javiervelezreye16
IntroducciónLaWebOrientadaaComponentes
ElFrameworkPolymerCómoOperanlosComponentesWeb
UClidades
Polymertambiénofreceunabanicodefacilidadesyfuncionesu?litariasquevienenasimplificarelprocesodedesarrollodecomponentes
this.$ this.$$ (selector) this.fire (event, ctx) this.async (fn, [ms]) Polymer.dom (node) ...
Behaviors
LoscomportamientosdePolymersonrasgosparcialesdefinidosdemaneraexternaquepuedenincorporarsecomocontribucionesaloscomponentesdeformadeclara?va
Rasgosrecurrentes
componente
@javiervelezreye17
IntroducciónLaWebOrientadaaComponentes
EcosistemadeComponentesWebCómoOperanlosComponentesWeb
GooglePolymerProject
@javiervelezreye18
IntroducciónLaWebOrientadaaComponentes
AplicacionesdeComponentesWebCómoOperanlosComponentesWeb
Esbuenaidea–aunquenoimprescindible–par?rdeunaplan?lladecódigoparaelcomponente
I.PlanClla
yo polymer:element my-element gitgub/seed-element.org
DesarrolloFlujode
III.DespliegueUnavezdesarrolladala
aplicacióndecomponentessecompactacongulpogrunt
IV.PublicarSeempaquetalaaplicacióncomounmodulobowerysepublicaenlosrepositoriosdecomponentes
II.Desarrollo
Eldesarrolloydiseñoquedaasis?doporlaestructuradeaplicacióndefinidaenelPolymerStarterKit
Polymer Starter Kit
@javiervelezreye19
IntroducciónLaWebOrientadaaComponentes
AplicacionesdeComponentesWebCómoOperanlosComponentesWeb
II.Instalar
Conbowerseinstalanloscomponentesdesdeelrepositorioconunsimplecomando
$ bower install paper-toolbar
ExistenrepositoriosdecomponentesWebqueresuelvenproblemasdeapariciónrecurrente
I.Buscar
www.customelements.io elements.polymer-project.org
<link rel="import" href="paper-toolbar.html"> <paper-toolbar class="tall"> <div id="progressBar" class="bottom fit"></div> </paper-toolbar>
III.Explotar
Unavezqueelcomponentesehainstalado,secargaenlapáginayseinstanciacomounae?quetaestándar
ExplotaciónFlujode
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
2ArquitecturasOrientadasaComponentesWeb
§ HaciaunaWebdeComponentes§ ModelodeComponenteWeb§ ArquitecturasOrientadasaComponentesWeb
Arqu
itecturasOrie
ntad
asaCom
pone
ntesW
eb
LaW
ebOrie
ntad
aaCo
mpo
nentes
@javiervelezreye21
Patrones
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
UnNuevoParadigmaPorDerechoPropioHaciaUnaWebDeComponentes
Principios
Mecanismos
ObjeUvos
Vis
Hom
Dom
Cmp
Enc
Std
Del
Evt
Her
DBin
Pol
Evo
Ada Arquitectos
PlanoTecnológico
Programadores
Diseñadores
UX
@javiervelezreye22
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElComponenteWebcomoFachadaModelodeComponenteWeb
<play-list auto> </play-list>
HTML
c.play()
Métodosthis.fire('play', {...})
Eventos
--var
CSSPlanodeconfiguración
Planodevisualización
Planodecomportamiento
e
+propiedades+métodos
Semán<caHTML
Es<ladoCSS
EstandarizaciónCon<nuidadVisualContextualización
Declara<vidadAbstracciónPolimorfa
BasadoenDatosyComponentesDrenableeinyectable
AdaptableCentradoenEstadoDirigidoporEventosDesacoplamiento
@javiervelezreye23
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ProblemasdeComposición&CoordinaciónArquitecturasOrientadasaComponentesWeb
Cómoseadaptanloscomponentesparaqueencajenenelcontexto
arquitectónicodeuso
Espacio
?
Composición
Coordinación
Tiempo
Cómoseacompasaelfuncionamientodeloscomponentes
paraquesoportenunmodelodeinteracción
UX
Interacción·Navegación·Animación
Capas·Roles·Acceso
ServiciosdeNegocio
@javiervelezreye24
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeComposiciónComposiciónenComponentesWeb
A
BC
EspaciodeColaboración
§ Comportamiento
§ Presentación
2AspectosComplementarios
Delegación
Extensión
Adición
Solapamiento
Entrelazado
Comportamiento
Presentación
Intercesión
Inserción
Sustitución
Yuxtaposición
@javiervelezreye25
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeComposiciónComposiciónenComponentesWeb
Niveldedominio
Niveldeproyecto
Selección
Adaptación
Composición
Encapsulación
Componentes
Componente
C.Adaptado
Colaboración
C.Encapsulado
C.Contextualizado
ContextualizaciónCtx.
@javiervelezreye26
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeComposición.AdaptacióndelComportamientoComposiciónenComponentesWeb
Adición
Polymer({ is: 'super-element', behaviors: [SuperBehavior] });
Laadiciónex?endeuncomponentever?calmenteañadiendonuevascapacidadesdefinidasenotrocomponentequeoperacomorasgodecomportamiento
p: 3, m: function (){}
f: function (){...}
Intercesiónvar before = function (c, k, fn) { var gn = c[k]; c[k] = function () { var args = [].slice.call(arguments); var out = fn.apply(this, args); return gn.apply(this, args.concat(out)); }; return core; }; f f'
Laadiciónex?endeuncomponentehorizontalmenteañadiendonuevasresponsabilidadesacadacapacidad
@javiervelezreye27
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeComposición.AdaptacióndelComportamientoComposiciónenComponentesWeb
f: function (){...}
Delegaciónvar delegate = function (c, d, k, ctx) { var context = ctx || d; c[k] = function () { var args = [].slice.call(arguments); var out = d[k].apply(context, args); return out === d ? this : out; }; return c; }; g
Ladelegacióndescansalaresponsabilidaddeunacapacidadenotrocomponentedelegado
Extensión
Polymer({ is: 'super-element', extends: [SuperBehavior] });
Laextensiónex?endeuncomponenteporherenciadelascapacidadesenotroscomponente.Soloe?quetasestándar!
@javiervelezreye28
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeComposición.AdaptacióndelaPresentaciónComposiciónenComponentesWeb
Solapamiento Inserción
Yuxtaposición
Entrelazado
SusUtución
@javiervelezreye29
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
EjemploComposiciónenComponentesWeb
Visualmenteexisteunaadaptaciónsolapanteenlaqueelbotónsesuperponealavistadelcomponente
Funcionalmente,elcomponente?enequereaccionaraloseventosdetapdisparadosporelnuevocomponenteincrustado
<wc-overlap> <wc-listen target on="tap" do="{{fn}}"> <wc-A></wc-A> </wc-listen> <wc-B ext></wc-B> </wc-overlap>
@javiervelezreye30
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeCoordinaciónComposiciónenComponentesWeb
A
BC
EspaciosdeCoordinación
§ Localización
§ Comunicación
§ Coordinación
3ProblemasComplementarios
Implícita
Explícita
Datos
Eventos
Mensajes
Centralizada
Distribuida
Comunicación
Localización
Coordinación
@javiervelezreye31
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeCoordinación.LocalizaciónCoordinaciónenComponentesWeb
x"
A"
B"
C"
D"
y"
z"
A" B"
Localización"Explícita" Localización"Implícita"
§ wc-context
§ wc-loader
PatronesdeCreación
§ wc-factory
§ wc-provider
§ wc-recruiter
§ wc-scaeer-gather
PatronesdeDescubrimiento
@javiervelezreye32
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeCoordinación.ComunicaciónCoordinaciónenComponentesWeb
Comunicación*orientada*a*mensajes*
Comunicación*dirigida*por*eventos*
Comunicación*basada*en*memoria*compar5da*
event
Bs#
A#
{{x}}
A B
PatronesdeEnrutamiento
§ wc-router
§ wc-switch
§ wc-bus
§ wc-rebound
PatronesdeCorrelación
§ wc-split
§ wc-join
§ wc-sort
PatronesdeDistribución
§ wc-ajax
§ wc-rest
§ wc-web-socket
@javiervelezreye33
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ElProblemadeCoordinación.CoordinaciónCoordinaciónenComponentesWeb
O"
Coordinación*distribuida*Coordinación*Centralizada*
A" B" C"
A"
B"
C"
§ wc-orchestrator
§ wc-chain
§ wc-pipe
§ wc-balancer
§ wc-broker
PatronesdeControl
§ wc-ward
§ wc-worker
PatronesdeSincronización
§ wc-mutext
§ wc-semaphore
§ wc-channel
§ wc-task
§ wc-scheduller
§ wc-branch
§ wc-chreck
§ wc-<mer
PatronesdePlanificación
@javiervelezreye34
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
EjemploI.SincronizaciónVideo&TransparenciasCoordinaciónenComponentesWeb
<wc-speech> <wc-video> ... </wc-video> <wc-slides> ... </wc-slides> </wc-speech>
wc-bus
<Timeline <zoom >next >previous >go
go
go wc-slides wc-video
wc-speech
§ Elvideoenvíaeventos
§ Lastransparenciasescuchan
§ Losrecursossesincronizan
@javiervelezreye35
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
EjemploII.VideoCompar<doCoordinaciónenComponentesWeb
§ Sincronizaciónremota
§ Chatovideo
§ Arquitecturadeeventos
@javiervelezreye36
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
EjemploIII.ControldeTurnosCoordinaciónenComponentesWeb
§ Controldeturnos
§ Intervencióncircular
wc#userA)
wc#orchestrator)
wc#userB) wc#userC)
<wc-orchestrator> <wc-agent id="A"> ... </wc-agent> <wc-agent id="B"> ... </wc-agent> <wc-agent id="C"> ... </wc-agent> </wc-orchestrator>
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
3BuenasPrácCcaseneldiseñodeComponentesWeb
§ Dialectosdenegocio·Composiciónascendente§ Ausenciadecontexto·Gateways·DiseñoDesdeFront§ Proyecciones·Granularidad·Declara<vidad§ Composición·Enrutamiento
Buen
asPrácCcase
nelDiseñ
ode
Com
pone
ntesW
eb
LaW
ebOrie
ntad
aaCo
mpo
nentes
@javiervelezreye38
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
Principios,BuenasPrác<cas&ErroresComunesIntroducción
PPrincipios
BPrác<cas
EErrores
Principiosdediseñoqueprescribenformascanónicasdeprocederqueconducenaléxito
Buenasprác?casdediseñoydesarrolloquedemaneranosistemá?caseiden?ficanen
basealaexperiencia
Errorescomunesquesehaniden?ficadocomofuentedeconflictosfuturosensolucionesconstruidas
EErrores
@javiervelezreye39
ArquitecturasOrientadasaComponentesWebLaWebOrientadaaComponentes
ArquitecturasBasadas&OrientadasaComponentesWebConfundirTiposdeArquitecturasdeComponentesWeb
Framework
App
ArquitecturasBasadasenComponentesWeb
Lalógicadeenrutamientoyorquestaciónsecontrolaatravésdelframework
Loscomponentesresuelvenproblemaspuntualescomoelementosautónomos
ArquitecturasOrientadasaComponentesWeb
Unmodelodeinteracciónrecurrenteseencapsulaparasureu?lización
LasaplicacionessematerializancomocomponentesWeb
Lalógicadecoordinaciónyorquestaciónsesoportaporcomponentes
@javiervelezreye40
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
ComponentescomoDialectosdeNegocioCreerQueEstoVadeCrearAplicaciones
Selección
Adaptación
Composición
Encapsulación
Componente
C.Adaptado
Colaboración
C.Encapsulado
Componentes
Descomposicióndiseñada
Análisis
Abstracción
Niveldeproyecto
Niveldedominio
Analizamosundominioycreamosconjuntosdee?quetasparaqueoperencomodialectovisualesqueex?endenHTML
1
Usamoscomponentesestereo?padosdedominioparacomponernuestraaplicaciónocomponente
2
Descubrimospatronesdeaplicabilidadrecurrenteyloscontribuimosadominiocomonuevoscomponentespormediodelaabstracción
3
MinimizalosComponentesde
proyecto
4
@javiervelezreye41
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
ComposiciónAscendenteyDescomposiciónDescendenteConfundirReuUlizaciónyModularización
ComposiciónAscendenteReu?lización
DescomposiciónDescendenteModularización
Laestrategiadedescomposiciónacoplaalcontextoloscomponentespar?cularparaelquesediseñan
Cadacomponentesurgecomounaencapsulaciónnaturalmo?vadapor
unabúsquedadelareu?lización
@javiervelezreye42
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
PiensaLocalmenteyDiseñaHaciaDentroAsumirLaExistenciadeContexto
LógicaOrquestaciónyCoordinación
Seseleccionanloscomponentesadecuados
Seestableceunesquemadecomposiciónadapta?va
Seincluyelalógicadecoordinacióndelmodelo
Seencapsulaysedefineuncontratoparaelcomponente
Sesumergealcomponenteenelcontextodeuso
Seaplicanestratégiasdecomposiciónycoordinaciónexterna
uso
compo
sición
Elcontextodeusoesdesconocidodurantelafasedediseñoy
composición
@javiervelezreye43
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComounGatewayalBack-endPensarquelosComponentesSonSólounaCuesUóndeVista
ControlCoordinación
ModeloEstado
Datos
Vista
ComponentesdeVista
ComponentesdeIntegración
VistaEmbebida
GestordeVistas
VistasporContrato
REST
IntegraciónREST
MemoriaLocal
LocalStorage
AlmacenamientoWebLocal
@javiervelezreye44
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoEn<dadesCentradasenlaVistaDirigirelDiseñoDeComponentesdesdeelBackEnd
Eldiseñodefrontdebedarlugaracomponentesindependientesdedominio
Eldiseñodeloscomponentesdefrontcorrespondena
proyeccionesparcialesdeen?dadesdenegocio
BackFront
x yz
x yz
BackFront
a cb
x yz
a: f(x, y, z) b: g(x, y, z) c: h(x, y, z)
@javiervelezreye45
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoProyeccionesCentradosenlaInteracciónOlvidarqueEstoesunaSolucióndeFront
EnUdadesVistas
Paraloscomponentesdenegociodebepar?rsedesdeen?dadesoagregadosdeen?dades
Loscomponentesrespondenaproyeccionesdeen?dades
relacionadasconlosmodelosdeinteracción
@javiervelezreye46
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoArtefactosTransversalesCentrarelDiseñoenelProducto
UmbraldereuUlización
Umbraldecontexto
ComponentesdeProyecto
Ver?calesdeDominio
TransversalesdePlataforma
Capturaelnegocio
DelegaenPolymer
Centratudiseñoaquí
80%
20%
@javiervelezreye47
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoSolucionesCentradasenHTMLOlvidarqueEstovadeComposiciónDeclaraUva
Genericidad
<wc-list> <div> ... </div> <div> ... </div> <div> ... </div> </wc-list>
<wc-list> <a> ... </a> <a> ... </a> </wc-list>
Delegación
<google-map map="{{map}}" latitude="37.779" longitude="-122.3892"> </google-map>
<google-map-directions map="{{map}}" startAddress="San Francisco" endAddress="Mountain View"> </google-map-directions>
OUT
IN
{{map}}
Agregación
<google-map fitToMarkers> <google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!"> </google-map-marker> </google-map>
Polimorfismo
<wc-player> <video> ... </video> </wc-player> <wc-player> <audio> ... </audio> </wc-player>
play() pause()
@javiervelezreye48
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoUnEsquemadeComposiciónPensarQueLaConstrucciónComposiUvaEsCosadeTerceros
LógicaOrquestaciónyCoordinación
Definimosunesquemaabstractodecomposiciónqueusacomponentesdeterceros
Elesquemasecompletaenlaconfiguraciónintegrando
componentesdesdeelcontexto
Laimplementaciónserealizaporcomposicióninternadeotroscomponentes
Ocasionalmentepuedesernecesariorealizaradaptaciones
dinámicas
Enelcontextodeusounnuevoesquemaexplotalas
capacidadesdelcomponente
<wc-test> <div target> </div> </wc-test>
@javiervelezreye49
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
LosComponentesComoModelosdeInteracciónAbusardelEnrutamiento
GesCóndeVistasporComposiciónMismoContexto
GesCóndeVistasporEnrutamientoCambiodeContexto
Uri#2Uri#1
Uri#3
Paginador
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
4LlamadaalaAcción
§ UnióndeComunidades&SinergiadePerfiles§ LibreríasdeComponentesTransversales§ HojadeRuta
Compo
nentesW
ebenlaPrácCca
LaW
ebOrie
ntad
aaCo
mpo
nentes
@javiervelezreye51
DesarrolladoresDiseñadoresArquitectos
Js
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
SinergiadePerfilesUnióndeComunidades
Porqué
Cómo
QuéBsP.OwnerA.EmpresarialT.Lider
Ux
DiseñadoresArquitectosInteracción
@javiervelezreye52
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
ModelosdeLayoutLibreríasdeComponentesTransversales
wc-header wc-dialog wc-comments
wc-<meline wc-stream
@javiervelezreye53
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
ModelosdeInteracciónLibreríasdeComponentesTransversales
wc-indexwc-pages wc-pages
wc-focus wc-list-in wc-circular-fab
@javiervelezreye54
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
ModelosdeNavegaciónLibreríasdeComponentesTransversales
wc-viwer-hub wc-viwer-stream
wc-viwer-check
?
?
wc-viwer-loop
n
wc-viwer-branch
?
?
@javiervelezreye55
BuenasPrác<casenelDiseñodeComponentesWebLaWebOrientadaaComponentes
HojadeRutaLibreríasdeComponentesTransversales
GrupodeTrabajo AnálisisdeProblemas
DiseñarComponentes
ImplementarReportar
@javiervelezreye56
PreguntasLaWebOrientadaaComponentes
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.
Preguntas
javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes
JavierVélezReyes@javiervelezreye
Javier.velez.reyes@gmail.com
LaWebOrientadaaComponentes
ProgramaciónOrientadaaComponentesWeb
Noviembre2015
Recommended