la web orientada a componentes

JavierVélezReyes@javiervelezreye

[email protected]

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?

[email protected]

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes


[email protected]

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


LaReu<lizacióncomoObje<vo

PorQuéComponentesWeb

Rreu<lización

@javiervelezreye6




Rreu<lización

EEncapsulación

Seencapsulanenformadecomponentesreu?lizablesmodelosdeinteracciónde

aplicaciónrecurrenteendis?ntoscontextosdeuso

@javiervelezreye7




Rreu<lización

EEncapsulación

AAdaptación

RWD–AWD&AccesibilidadCadacomponenteesresponsabledeges?onarelespaciovisualqueocupaelcontenidoenrelaciónconlascondicionesdeldisposi?vo

@javiervelezreye8




Rreu<lización

EEncapsulación

AAdaptación

HHomogeneidad

Lahomogeneidadvisualesimprescindibleparaar?cularunprocesocomposi?voadecuado.Laestandarizacióneslaformadeobtenerlo

Estándares

@javiervelezreye9




Rreu<lización

EEncapsulación

AAdaptación

HHomogeneidad

VVersionado

Líneaevolu?va

t1 t2

v1 v2

Lasac?vidadesdemantenimientoevolu?vosonges?onadasatravésdelcambiocentralizadodeloscomponentesWeb

@javiervelezreye10




Rreu<lización

EEncapsulación

AAdaptación

HHomogeneidad

VVersionado

PPresentación

REST

Programador

UsuarioFinal Loscomponenteswebestáncentrados

enlavistaparaofrecerproyeccionesinterac?vasdelascapacidadesofrecidasporelsistema

@javiervelezreye11




Rreu<lización

EEncapsulación

AAdaptación

HHomogeneidad

VVersionado

PPresentación

CComposición

Cadacomponenteoperavisualmentesinimponerfronterasdecontexto

@javiervelezreye12


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


4EstándaresWebCómoOperanlosComponentesWeb

ShadowDOM

Ofreceunmodelodeencapsulaciónquepermiteaislarelcontenidointernodelcomponentedeaquélenlapáginadondeésteesrenderizado

.shadowRoot

.host

HTMLTemplates

Ofreceunmodeloderenderizaciónbasadoenplan?llasinertesdecódigoHTMLquesólosonac?vadascuandoserenderizaelcomponente

@javiervelezreye14


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


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


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


EcosistemadeComponentesWebCómoOperanlosComponentesWeb

GooglePolymerProject

@javiervelezreye18


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


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


[email protected]

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


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


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


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


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


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


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


ElProblemadeComposición.AdaptacióndelaPresentaciónComposiciónenComponentesWeb

Solapamiento Inserción

Yuxtaposición

Entrelazado

SusUtución

@javiervelezreye29


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


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


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


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


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


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


EjemploII.VideoCompar<doCoordinaciónenComponentesWeb

§  Sincronizaciónremota

§  Chatovideo

§  Arquitecturadeeventos

@javiervelezreye36


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>


[email protected]

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


ArquitecturasBasadas&OrientadasaComponentesWebConfundirTiposdeArquitecturasdeComponentesWeb

Framework

App

ArquitecturasBasadasenComponentesWeb

Lalógicadeenrutamientoyorquestaciónsecontrolaatravésdelframework

Loscomponentesresuelvenproblemaspuntualescomoelementosautónomos

ArquitecturasOrientadasaComponentesWeb

Unmodelodeinteracciónrecurrenteseencapsulaparasureu?lización

LasaplicacionessematerializancomocomponentesWeb

Lalógicadecoordinaciónyorquestaciónsesoportaporcomponentes

@javiervelezreye40


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


ComposiciónAscendenteyDescomposiciónDescendenteConfundirReuUlizaciónyModularización

ComposiciónAscendenteReu?lización

DescomposiciónDescendenteModularización

Laestrategiadedescomposiciónacoplaalcontextoloscomponentespar?cularparaelquesediseñan

Cadacomponentesurgecomounaencapsulaciónnaturalmo?vadapor

unabúsquedadelareu?lización

@javiervelezreye42


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


LosComponentesComounGatewayalBack-endPensarquelosComponentesSonSólounaCuesUóndeVista

ControlCoordinación

ModeloEstado

Datos

Vista

ComponentesdeVista

ComponentesdeIntegración

VistaEmbebida

GestordeVistas

VistasporContrato

REST

IntegraciónREST

MemoriaLocal

LocalStorage

AlmacenamientoWebLocal

@javiervelezreye44


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


LosComponentesComoProyeccionesCentradosenlaInteracciónOlvidarqueEstoesunaSolucióndeFront

EnUdadesVistas

Paraloscomponentesdenegociodebepar?rsedesdeen?dadesoagregadosdeen?dades

Loscomponentesrespondenaproyeccionesdeen?dades

relacionadasconlosmodelosdeinteracción

@javiervelezreye46


LosComponentesComoArtefactosTransversalesCentrarelDiseñoenelProducto

UmbraldereuUlización

Umbraldecontexto

ComponentesdeProyecto

Ver?calesdeDominio

TransversalesdePlataforma

Capturaelnegocio

DelegaenPolymer

Centratudiseñoaquí

80%

20%

@javiervelezreye47


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


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


LosComponentesComoModelosdeInteracciónAbusardelEnrutamiento

GesCóndeVistasporComposiciónMismoContexto

GesCóndeVistasporEnrutamientoCambiodeContexto

Uri#2Uri#1

Uri#3

Paginador


[email protected]

4LlamadaalaAcción

§  UnióndeComunidades&SinergiadePerfiles§  LibreríasdeComponentesTransversales§  HojadeRuta

Compo

nentesW

ebenlaPrácCca

LaW

ebOrie

ntad

aaCo

mpo

nentes

@javiervelezreye51

DesarrolladoresDiseñadoresArquitectos

Js


SinergiadePerfilesUnióndeComunidades

Porqué

Cómo

QuéBsP.OwnerA.EmpresarialT.Lider

Ux

DiseñadoresArquitectosInteracción

@javiervelezreye52


ModelosdeLayoutLibreríasdeComponentesTransversales

wc-header wc-dialog wc-comments

wc-<meline wc-stream

@javiervelezreye53


ModelosdeInteracciónLibreríasdeComponentesTransversales

wc-indexwc-pages wc-pages

wc-focus wc-list-in wc-circular-fab

@javiervelezreye54


ModelosdeNavegaciónLibreríasdeComponentesTransversales

wc-viwer-hub wc-viwer-stream

wc-viwer-check

?

?

wc-viwer-loop

n

wc-viwer-branch

?

?

@javiervelezreye55


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

[email protected]

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes


[email protected]

LaWebOrientadaaComponentes

ProgramaciónOrientadaaComponentesWeb

Noviembre2015

la web orientada a componentes

Software