La Web Orientada a Componentes

Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
La Web Orientada a Componentes
Programación Orientada a
Componentes Web
Noviembre 2015

@javiervelezreye 2
Autor
Licenciado por la UPM desde el año 2001 y doctor en informá<ca por
la UNED desde el año 2009, Javier conjuga sus labores como profesor
e inves<gador con la consultoría y la formación técnica para
empresa. Su línea de trabajo actual se centra en la innovación y
desarrollo de tecnologías para la Web. Además realiza ac<vidades de
evangelización y divulgación en diversas comunidades IT y es
coordinador de varios grupos de ámbito local como NodeJS Madrid o
Madrid JS. Forma parte del programa Polymer Polytechnic Speaker y
es mentor del capítulo de Madrid de Node School.
¿Quién Soy?

javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes

Javier Vélez Reyes
@javiervelezreye
1 Introducción
§  Qué Son Los Componentes Web
§  Por Qué Componentes Web
§  Cómo Operan Los Componentes Web
Introducción

@javiervelezreye 4
Introducción
La tecnología de Componentes Web proporciona
un mecanismo para construir nuevas e<quetas de
autor personalizadas que incluyen una semán<ca,
un comportamiento funcional y una lógica de
presentación propia.
E<quetas de Autor
Qué Son Los Componentes Web

@javiervelezreye 5
Introducción
La Reu<lización como Obje<vo

Por Qué Componentes Web
R
reu<lización

@javiervelezreye 6
Introducción

R
reu<lización
E
Encapsulación
Se encapsulan en forma de
componentes reu?lizables
modelos de interacción de
aplicación recurrente en dis?ntos
contextos de uso

@javiervelezreye 7
Introducción

R
reu<lización
E
Encapsulación
A
Adaptación
RWD – AWD & Accesibilidad
Cada componente es
responsable de ges?onar el
espacio visual que ocupa el
contenido en relación con las
condiciones del disposi?vo

@javiervelezreye 8
Introducción

R
reu<lización
E
Encapsulación
A
Adaptación
H
Homogeneidad
La homogeneidad visual es imprescindible
para ar?cular un proceso composi?vo
adecuado. La estandarización es la forma
de obtenerlo
Estándares

@javiervelezreye 9
Introducción

R
reu<lización
E
Encapsulación
A
Adaptación
H
Homogeneidad
V
Versionado
Línea evolu?va
t1 t2
v1 v2
Las ac?vidades de
mantenimiento evolu?vo son
ges?onadas a través del
cambio centralizado de los
componentes Web

@javiervelezreye 10
Introducción

R
reu<lización
E
Encapsulación
A
Adaptación
H
Homogeneidad
V
Versionado
P
Presentación
REST
Programador
Usuario
Final Los componentes web están centrados
en la vista para ofrecer proyecciones
interac?vas de las capacidades ofrecidas
por el sistema

@javiervelezreye 11
Introducción

R
reu<lización
E
Encapsulación
A
Adaptación
H
Homogeneidad
V
Versionado
P
Presentación
C
Composición
Cada componente opera
visualmente sin imponer
fronteras de contexto

@javiervelezreye 12
Introducción
Perspec<va General
Cómo Operan los Componentes Web
Incluye todas las nuevas capacida-
des estándar que ex?enden la Web
como plataforma de orientación a
compo-nentes
Plataforma
Capacidades funcionales sobre
la plataforma que simpliﬁcan
el proceso de desarrollo de
Componentes Web
Polymer
Aplicaciones orientadas a
componentes al servicio de
los usuarios de la Web
Aplicaciones
Componentes estándar dedicados a
dar respuesta a necesidades
recurrentes de control o UI
Elementos

@javiervelezreye 13
Introducción
4 Estándares Web
Shadow DOM
Ofrece un modelo de encapsulación que
permite aislar el contenido interno del
componente de aquél en la página
donde éste es renderizado
.shadowRoot
.host
HTML Templates
Ofrece un modelo de renderización
basado en plan?llas inertes de
código HTML que sólo son ac?vadas
cuando se renderiza el componente

@javiervelezreye 14
Introducción
4 Estándares Web
Custom Elements
Ofrece un modelo de extensibilidad
que permite a los desarrolladores
definir sus propias e?quetas o
redefinir semán?camente las
e?quetas del estándar HTML
HTML
Estándar
WC
E<quetas de autor
<google-maps>
</google-maps>
HTML Imports
Ofrece un modelo de modularización
y empaquetamiento basado en la
posibilidad de incluir ficheros de
código HTML dentro de otros ficheros
HTML
Index.html A.html
<link rel="import" href="a.html">

@javiervelezreye 15
Introducción
El Framework Polymer
Sistema de Data-Binding
El sistema de data binding de
polymer man?ene sincronizada la
vista con los cambios en el estado
del componente y recíprocamente
<dom-module id="wc-test">
<template>
<div>{{x}}</div>
</template>
<script>
Polymer ({
is: 'wc-test',
ready: function () {
this.x = 7;
}
});
</script>
</dom-module>
Motor de PlanCllas
Polymer también ofrece un motor de
renderizado basado en plan?llas con
lógica para representación de
contenido itera?va y condicional
<dom-module is="dom-repear" items="{{its}}">
</dom-module>
<dom-module is="dom-if" items="{{exp}}">
</dom-module>
...

@javiervelezreye 16
Introducción
El Framework Polymer
UClidades
Polymer también ofrece un abanico
de facilidades y funciones u?litarias
que vienen a simpliﬁcar el proceso de
desarrollo de componentes
this.$
this.$$ (selector)
this.fire (event, ctx)
this.async (fn, [ms])
Polymer.dom (node)
...
Behaviors
Los comportamientos de Polymer
son rasgos parciales deﬁnidos de
manera externa que pueden
incorporarse como contribuciones a
los componentes de forma
declara?va
Rasgos
recurrentes
componente

@javiervelezreye 17
Introducción
Ecosistema de Componentes Web
Google
Polymer Project

@javiervelezreye 18
Introducción
Aplicaciones de Componentes Web
Es buena idea – aunque no
imprescindible – par?r de
una plan?lla de código
para el componente
I. PlanClla
yo polymer:element my-element
gitgub/seed-element.org
Desarrollo
Flujo de
III. Despliegue
Una vez desarrollada la
aplicación de componentes
se compacta con gulp o grunt
IV. Publicar
Se empaqueta la aplicación
como un modulo bower y se
publica en los repositorios de
componentes
II. Desarrollo
El desarrollo y diseño queda
asis?do por la estructura de
aplicación deﬁnida en el
Polymer Starter Kit
Polymer Starter Kit

@javiervelezreye 19
Introducción
Aplicaciones de Componentes Web
II. Instalar
Con bower se instalan los
componentes desde el
repositorio con un simple
comando
$ bower install paper-toolbar
Existen repositorios de
componentes Web que
resuelven problemas de
aparición recurrente
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
Una vez que el componente
se ha instalado, se carga en
la página y se instancia como
una e?queta estándar
Explotación
Flujo de

Javier Vélez Reyes
@javiervelezreye
2 Arquitecturas
Orientadas a
Componentes Web
§  Hacia una Web de Componentes
§  Modelo de Componente Web
§  Arquitecturas Orientadas a Componentes Web
Arquitecturas Orientadas a Componentes Web

@javiervelezreye 21
Patrones
Un Nuevo Paradigma Por Derecho Propio
Hacia Una Web De Componentes
Principios
Mecanismos
ObjeUvos
Vis
Hom
Dom
Cmp
Enc
Std
Del
Evt
Her
DBin
Pol
Evo
Ada
Arquitectos
Plano Tecnológico
Programadores
Diseñadores
UX

@javiervelezreye 22
El Componente Web como Fachada
Modelo de Componente Web
<play-list auto>
</play-list>
HTML
c.play()
Métodos
this.fire('play', {...})
Eventos
--var
CSS
Plano de conﬁguración
Plano de visualización
Plano de comportamiento
e
+ propiedades
+ métodos
Semán<ca
HTML
Es<lado
CSS
Estandarización
Con<nuidad Visual
Contextualización
Declara<vidad
Abstracción Polimorfa
Basado en Datos y Componentes
Drenable e inyectable
Adaptable
Centrado en Estado
Dirigido por Eventos
Desacoplamiento

@javiervelezreye 23
Problemas de Composición & Coordinación
Cómo se adaptan los componentes
para que encajen en el contexto
arquitectónico de uso
Espacio
?
Composición
Coordinación
Tiempo
Cómo se acompasa el
funcionamiento de los componentes
para que soporten un modelo de
interacción

UX
Interacción · Navegación · Animación
Capas · Roles · Acceso
Servicios de Negocio

@javiervelezreye 24
El Problema de Composición
Composición en Componentes Web
A
B C
Espacio de Colaboración
§  Comportamiento
§  Presentación
2 Aspectos Complementarios
Delegación
Extensión
Adición
Solapamiento
Entrelazado
Comportamiento
Presentación
Intercesión
Inserción
Sustitución
Yuxtaposición

@javiervelezreye 25
El Problema de Composición
Nivel de
dominio
Nivel de
proyecto
Selección
Adaptación
Composición
Encapsulación
Componentes
Componente
C. Adaptado
Colaboración
C. Encapsulado
C. Contextualizado
Contextualización
Ctx.

@javiervelezreye 26
El Problema de Composición. Adaptación del Comportamiento
Adición
Polymer({
is: 'super-element',
behaviors: [SuperBehavior]
});
La adición ex?ende un componente
ver?calmente añadiendo nuevas
capacidades deﬁnidas en otro
componente que opera como rasgo de
comportamiento
p: 3,
m: function (){}
f: function (){...}
Intercesión var 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'
La adición ex?ende un
componente horizontalmente
añadiendo nuevas
responsabilidades a cada
capacidad

@javiervelezreye 27
El Problema de Composición. Adaptación del Comportamiento
f: function (){...}
Delegación var 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
La delegación descansa la
responsabilidad de una
capacidad en otro
componente delegado
Extensión
Polymer({
is: 'super-element',
extends: [SuperBehavior]
});
La extensión ex?ende un componente
por herencia de las capacidades en
otros componente. Solo e?quetas
estándar!

@javiervelezreye 28
El Problema de Composición. Adaptación de la Presentación
Solapamiento Inserción
Yuxtaposición
Entrelazado
SusUtución

@javiervelezreye 29
Ejemplo
Visualmente existe una adaptación
solapante en la que el botón se
superpone a la vista del componente
Funcionalmente, el componente ?ene
que reaccionar a los eventos de tap
disparados por el nuevo componente
incrustado
<wc-overlap>
<wc-listen target on="tap" do="{{fn}}">
<wc-A></wc-A>
</wc-listen>
<wc-B ext></wc-B>
</wc-overlap>

@javiervelezreye 30
El Problema de Coordinación
A
B C
Espacios de Coordinación
§  Localización
§  Comunicación
§  Coordinación
3 Problemas Complementarios
Implícita
Explícita
Datos
Eventos
Mensajes
Centralizada
Distribuida
Comunicación
Localización
Coordinación

@javiervelezreye 31
El Problema de Coordinación. Localización
Coordinación en Componentes Web
x"
A"
B"
C"
D"
y"
z"
A" B"
Localización"Explícita" Localización"Implícita"
§  wc-context
§  wc-loader
Patrones de Creación
§  wc-factory
§  wc-provider
§  wc-recruiter
§  wc-scaeer-gather
Patrones de Descubrimiento

@javiervelezreye 32
El Problema de Coordinación. Comunicación
Comunicación*orientada*
a*mensajes*
Comunicación*dirigida*
por*eventos*
Comunicación*basada*en*
memoria*compar5da*
event
Bs#
A#
{{x}}
A B
Patrones de Enrutamiento
§  wc-router
§  wc-switch
§  wc-bus
§  wc-rebound
Patrones de Correlación
§  wc-split
§  wc-join
§  wc-sort
Patrones de Distribución
§  wc-ajax
§  wc-rest
§  wc-web-socket

@javiervelezreye 33
El Problema de Coordinación. Coordinación
O"
Coordinación*distribuida*Coordinación*Centralizada*
A" B" C"
A"
B"
C"
§  wc-orchestrator
§  wc-chain
§  wc-pipe
§  wc-balancer
§  wc-broker
Patrones de Control
§  wc-ward
§  wc-worker
Patrones de Sincronización
§  wc-mutext
§  wc-semaphore
§  wc-channel
§  wc-task
§  wc-scheduller
§  wc-branch
§  wc-chreck
§  wc-<mer
Patrones de Planiﬁcación

@javiervelezreye 34
Ejemplo I. Sincronización Video & Transparencias
<wc-speech>
<wc-video> ... </wc-video>
<wc-slides> ... </wc-slides>
</wc-speech>
wc-bus
<Timeline <zoom >next >previous >go
go
go
wc-slideswc-video
wc-speech
§  El video envía eventos
§  Las transparencias escuchan
§  Los recursos se sincronizan

@javiervelezreye 35
Ejemplo II. Video Compar<do
§  Sincronización remota
§  Chat o video
§  Arquitectura de eventos

@javiervelezreye 36
Ejemplo III. Control de Turnos
§  Control de turnos
§  Intervención circular
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>

Javier Vélez Reyes
@javiervelezreye
3 Buenas PrácCcas en
el diseño de
Componentes Web
§  Dialectos de negocio · Composición ascendente
§  Ausencia de contexto · Gateways · Diseño Desde Front
§  Proyecciones · Granularidad · Declara<vidad
§  Composición · Enrutamiento
Buenas PrácCcas en el Diseño de Componentes Web

@javiervelezreye 38
Buenas Prác<cas en el Diseño de Componentes Web
Principios, Buenas Prác<cas & Errores Comunes
Introducción
P
Principios
B
Prác<cas
E
Errores
Principios de diseño que
prescriben formas canónicas de
proceder que conducen al éxito
Buenas prác?cas de diseño y
desarrollo que de manera no
sistemá?ca se iden?fican en
base a la experiencia
Errores comunes que se han
iden?ficado como fuente de
conflictos futuros en soluciones
construidas
E
Errores

@javiervelezreye 39
Arquitecturas Basadas & Orientadas a Componentes Web
Confundir Tipos de Arquitecturas de Componentes Web
Framework
App
Arquitecturas Basadas en
Componentes Web
La lógica de enrutamiento
y orquestación se controla
a través del framework
Los componentes resuelven
problemas puntuales como
elementos autónomos
Arquitecturas Orientadas a
Componentes Web
Un modelo de interacción
recurrente se encapsula para su
reu?lización
Las aplicaciones se
materializan como
componentes Web
La lógica de coordinación y
orquestación se soporta por
componentes

@javiervelezreye 40
Componentes como Dialectos de Negocio
Creer Que Esto Va de Crear Aplicaciones
Selección
Adaptación
Composición
Encapsulación
Componente
C. Adaptado
Colaboración
C. Encapsulado
Componentes
Descomposición
diseñada
Análisis
Abstracción
Nivel de
proyecto
Nivel de
dominio
Analizamos un dominio y creamos conjuntos de
e?quetas para que operen como dialecto visuales
que ex?enden HTML
1
Usamos componentes estereo?pados de
dominio para componer nuestra
aplicación o componente
2
Descubrimos patrones de aplicabilidad recurrente
y los contribuimos a dominio como nuevos
componentes por medio de la abstracción
3
Minimiza los
Componentes de
proyecto
4

@javiervelezreye 41
Composición Ascendente y Descomposición Descendente
Confundir ReuUlización y Modularización
Composición Ascendente
Reu?lización
Descomposición Descendente
Modularización
La estrategia de descomposición
acopla al contexto los componentes
par?cular para el que se diseñan
Cada componente surge como una
encapsulación natural mo?vada por
una búsqueda de la reu?lización

@javiervelezreye 42
Piensa Localmente y Diseña Hacia Dentro
Asumir La Existencia de Contexto
Lógica
Orquestación y Coordinación
Se seleccionan los componentes
adecuados
Se establece un esquema de
composición adapta?va
Se incluye la lógica de
coordinación del modelo
Se encapsula y se deﬁne un
contrato para el componente
Se sumerge al componente en el
contexto de uso
Se aplican estratégias de composición
y coordinación externa
uso
composición
El contexto de uso es desconocido
durante la fase de diseño y
composición

@javiervelezreye 43
Los Componentes Como un Gateway al Back-end
Pensar que los Componentes Son Sólo una CuesUón de Vista
Control
Coordinación
Modelo
Estado
Datos
Vista
Componentes
de Vista
Componentes
de Integración
Vista
Embebida
Gestor de
Vistas
Vistas por
Contrato
REST
Integración
REST
Memoria
Local
Local
Storage
Almacenamiento
Web Local

@javiervelezreye 44
Los Componentes Como En<dades Centradas en la Vista
Dirigir el Diseño De Componentes desde el Back End
El diseño de front debe dar
lugar a componentes
independientes de dominio
El diseño de los componentes
de front corresponden a
proyecciones parciales de
en?dades de negocio
Back Front
x y
z
x y
z
Back Front
a c
b
x y
z
a: f(x, y, z)
b: g(x, y, z)
c: h(x, y, z)

@javiervelezreye 45
Los Componentes Como Proyecciones Centrados en la Interacción
Olvidar que Esto es una Solución de Front
EnUdades
Vistas
Para los componentes de
negocio debe par?rse desde
en?dades o agregados de
en?dades
Los componentes responden a
proyecciones de en?dades
relacionadas con los modelos
de interacción

@javiervelezreye 46
Los Componentes Como Artefactos Transversales
Centrar el Diseño en el Producto
Umbral de
reuUlización
Umbral de
contexto
Componentes de
Proyecto
Ver?cales de
Dominio
Transversales de
Plataforma
Captura el
negocio
Delega en
Polymer
Centra tu
diseño aquí
80 %
20 %

@javiervelezreye 47
Los Componentes Como Soluciones Centradas en HTML
Olvidar que Esto va de Composición DeclaraUva
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>
Polimorﬁsmo
<wc-player>
<video> ... </video>
</wc-player>
<wc-player>
<audio> ... </audio>
</wc-player>
play()
pause()

@javiervelezreye 48
Los Componentes Como Un Esquema de Composición
Pensar Que La Construcción ComposiUva Es Cosa de Terceros
Lógica
Orquestación y Coordinación
Deﬁnimos un esquema
abstracto de composición que
usa componentes de terceros

El esquema se completa en la
conﬁguración integrando
componentes desde el contexto
La implementación se realiza
por composición interna de
otros componentes
Ocasionalmente puede ser
necesario realizar adaptaciones
dinámicas
En el contexto de uso un nuevo
esquema explota las
capacidades del componente
<wc-test>
<div target>
</div>
</wc-test>

@javiervelezreye 49
Los Componentes Como Modelos de Interacción
Abusar del Enrutamiento
GesCón de Vistas por Composición
Mismo Contexto
GesCón de Vistas por Enrutamiento
Cambio de Contexto
Uri #2 Uri #1
Uri #3
Paginador

Javier Vélez Reyes
@javiervelezreye
4 Llamada a la
Acción
§  Unión de Comunidades & Sinergia de Perﬁles
§  Librerías de Componentes Transversales
§  Hoja de Ruta
Componentes Web en la PrácCca

@javiervelezreye 51
Desarrolladores
Diseñadores
Arquitectos
Js
Sinergia de Perﬁles
Unión de Comunidades
Por qué
Cómo
Qué
Bs
P. Owner
A. Empresarial
T. Lider
Ux
Diseñadores
Arquitectos
Interacción

@javiervelezreye 52
Modelos de Layout
Librerías de Componentes Transversales
wc-header wc-dialog wc-comments
wc-<meline wc-stream

@javiervelezreye 53
Modelos de Interacción
wc-index wc-pages wc-pages
wc-focus wc-list-in wc-circular-fab

@javiervelezreye 54
Modelos de Navegación
wc-viwer-hub wc-viwer-stream
wc-viwer-check
?
?
wc-viwer-loop
n
wc-viwer-branch
?
?

@javiervelezreye 55
Hoja de Ruta
Grupo de Trabajo Análisis de Problemas
Diseñar Componentes
Implementar Reportar

@javiervelezreye 56
Preguntas
Licenciado por la UPM desde el año 2001 y doctor en informá<ca por
la UNED desde el año 2009, Javier conjuga sus labores como profesor
e inves<gador con la consultoría y la formación técnica para
empresa. Su línea de trabajo actual se centra en la innovación y
desarrollo de tecnologías para la Web. Además realiza ac<vidades de
evangelización y divulgación en diversas comunidades IT y es
coordinador de varios grupos de ámbito local como NodeJS Madrid o
Madrid JS. Forma parte del programa Polymer Polytechnic Speaker y
es mentor del capítulo de Madrid de Node School.
Preguntas

javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes

La Web Orientada a Componentes

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (17)

Similaire à La Web Orientada a Componentes

Similaire à La Web Orientada a Componentes (20)

Plus de Javier Vélez Reyes

Plus de Javier Vélez Reyes (7)

La Web Orientada a Componentes