Curso de Polymer 2

Una introducción al mundo de los Web Components, el estándar Javascript para el desarrollo de componentes reutilizables, encapsulados, que está llevando el mundo del desarrollo frontend al siguiente nivel.

En esta clase verás que con Javascript nativo eres capaz de construir componentes personalizados. Explicaremos las bases sobre el estándar de los web components y los motivos por los que es altamente recomendable implementar componentes, basados en Javascript nativo.

Explicaremos los parámetros bajo los que se mueve el desarrollo tradicional del lado del cliente. Las características del estándar de los web components y de la librería Polymer 2.

En el lado práctico veremos cómo se desarrolla un componente, sin necesidad de usar ninguna librería y cómo se desarrolla un componente basado en Polymer 2. Con tan solo 12 KB de peso, veremos que Polymer 2 permite diversas mejoras en el proceso de desarrollo de componentes.

En esta clase veremos componentes que tienen solamente una parte visual, en la siguiente nos dedicaremos a aplicar alguna funcionalidad.

En esta clase hacemos un repaso de muchas de las características y posibilidades de Polymer 2. Después de una rápida introducción a lo que se puede hacer con Polymer 2 y las posibilidades de la librería comenzamos con un proyecto desde cero.

Durante el desarrollo de la clase se tocan los siguientes puntos.

1.- Flujo habitual de desarrollo con Polymer 2 usando Bower.
2.- Crear un proyecto desde cero con Polymer
3.- Propiedades de componentes
4.- Data binding
5.- Eventos
6.- Uso de componentes del catálogo del equipo de Polymer
7.- Colaboración sencilla entre componentes
8.- Acceso a un API REST para recuperar información con Ajax

El enfoque de esta clase es más la demostración de las posibilidades y el modo de desarrollo de componentes con Polymer 2, que la definición exhaustiva de su funcionamiento. De hecho, en las próximas sesiones del Curso de Polymer 2 se ofrecerán muchos otros detalles sobre todo lo que se ve en esta clase, explicando muchas más posibilidades de las propiedades, data binding, eventos, comunicación entre componentes, etc.

En esta clase vamos a abordar todos los conocimientos de base sobre el lenguaje Javascript, necesarios para trabajar con Polymer. Nos centraremos en las novedades de ES6 que se usan en Polymer y abordaremos algunas cosas de ES5 que no son tan conocidas, pero que también se usan bastante.

• Qué es ES6
• Conocimientos generales
  • Nuevas declaraciones de variables
  • Clases y herencia
  • Promesas
  • Funciones flecha
  • Template strings
• Otras cosas de Javascript
  • Getters y setters

En esta ocasión nos dedicamos a conocer diversos aspectos generales del desarrollo con Polymer. En resumen abordaremos los siguientes puntos:

• Polymer CLI
• Instalación de una aplicación en blanco
• API de acceso al DOM permite manipular componentes
• Los componentes implementan su propia API

Abordamos las propiedades de los componentes en Polymer 2.

• Qué son las propiedades
• Cómo se definen en componentes
• Sincronización de atributos del componente a propiedades
• Propiedades de cadena
• Propiedades boleanas
• Uso de propiedades boleanas en templates condicionales (dom-if)

Qué son las propiedades computadas, unas de las más importantes y útiles en el desarrollo de componentes. Aparte de ofrecer una forma ordenada de establecer cálculos, para obtener el valor de unas propiedades en base a otras, las propiedades computadas nos permiten reaccionar a cambios en el estado del componente de una manera sencilla.

Veremos qué son las propiedades computadas, cómo se definen en un componente de Polymer, junto con ejemplos diversos de propiedades computadas.

También trabajaremos con la biblioteca de iconos que nos ofrece Polymer para el desarrollo de aplicaciones.

Las propiedades reflectToAttribute sirven para actualizar el estado de la etiqueta del componente, sincronizando los valores existentes en las propiedades del componente hacia los atributos en la etiqueta.

Además en este vídeo aclararemos los procesos de serialización y deserialización de las propiedades hacia atributos y viceversa. Señalaremos la posibilidad de crear nuestras propiedades con tipos personalizados que permitirían definir de manera específica el proceso de serialización y deserialización de estos nuevos tipos de propiedades.

Explicamos cómo aportar valores a las propiedades de tipo Array y tipo Object, por medio de funciones que devuelven los valores a asignar de manera predeterminada.

Creamos una propiedad de array y realizamos un template de repetición. Conocemos diversas utilidades de los templates de repetición, como crear un alias para el item actual de la repetición o saber el índice del elemento actual y trabajar con él.

Explicaciones sobre el ciclo de vida de los custom elements en general y Polymer 2 en particular.

• Qué es el ciclo de vida
• Qué callbacks del ciclo de vida se pueden configurar en Web Components V1 y Polymer 2.
• Ejemplo de uso en nuestro componente de encuesta

Comenzamos el tratamiento de eventos en componentes de Polymer 2.

• Cómo definir manejadores de eventos
  • Modo declarativo (mediante su declaración en el HTML)
  • Modo imperativo (mediante su orden de ejecución con Javascript)
• Crear elementos fuera de los componentes
• Eliminar el registro de eventos

Explicaciones y ejemplos diversos sobre eventos personalizados.

• Por qué son necesarios
• Como implementar custom events
• Cómo enviar datos en los eventos personalizados

Qué es el patrón mediador, un patrón de comunicación entre componentes.

• Qué es el patrón mediator
• Implementar el patrón mediador en el esquema de componentes de la encuesta
• Eventos personalizados en el patrón mediador

Qué es this.$$() existente anteriormente en Polymer 1.x. Para qué nos puede servir.
Este método ya no existe en los componentes desarrollados con Polymer 2. Alternativa usando Javascript nativo para conseguir la misma utilidad para seleccionar elementos dinámicos en un template.

Los eventos de teclado permiten recibir en nuestro manejador de eventos una información completa sobre las condiciones de esa pulsación de teclas. Veremos cómo analizar el objeto evento para saber cómo extraer la información necesaria.

• Veremos el objeto evento
• Información de la tecla y de teclas especiales (CTRL, MAYS...)
• Actuación sólo cuando se pulsan las teclas que nos interesa
• Colocación de manejadores en los objetos que más interese

En las aplicaciones Polymer, y en las aplicaciones web en general, necesitamos estar atentos o procesar eventos de gestos, ya que nuestros visitantes son muchas veces provenientes de dispositivos táctiles. En esta sección veremos:

• Eventos táctiles (o eventos de gestos, gesture events)
• Qué eventos táctiles nos ofrece Polymer
• Cómo añadir el mixin para los gesture events
• Cómo usar un evento táctil de arrastrar (track event)

Qué es el binding y cómo implementar binding a propiedades en las dos modalidades principales en componentes de Polymer, a una y dos direcciones. El binding a una dirección lo habíamos hecho en muchos ejemplos durante el curso, por lo que ahora nos vamos a centrar sobre todo en conocer el binding a dos direcciones.

• Sintaxis para binding 1 y 2 direcciones
• Binding a 2 way para elementos ya preparados (paper-input)
• Configuración notify en propiedades
• Ejemplo de componente nuestro que permita 2 way binding

En los elementos de Polymer no tenemos problemas al implementar binding, pero si queremos hacerlo sobre elementos nativos del HTML pudiera darse problemas en ciertos navegadores, para ciertos atributos de las etiquetas HTML.

• Problemática del binding a elementos nativos
• Sintaxis del $ en el nombre del atributo para evitar problemas
• Atributos de los elementos nativos que necesitan la sintaxis especial

El binding a 2 direcciones sobre elementos nativos del HTML nos ofrece una dificultad especial. Los componentes de Polymer están preparados para hacer binding a dos direcciones, siempre que tengamos activada la configuración notify en la propiedad, pero los elementos nativos del HTML no tienen esa característica. En esta clase veremos qué hacer para solucionarlo.

• Problema del binding 2 way para elementos nativos
• Sintaxis especial para producir 2 way binding en elementos nativos
• Ejemplo de uso de 2 way binding en elementos nativos

El binding a propiedades es algo que se produce directamente en componentes de Polymer, es decir, siempre que se modifique la propiedad se desencadenan todos los mecanismos de binding. Sin embargo, con las subpropiedades de objetos no siempre va a ser así. En esta clase explicamos cómo lidiar con este asunto.

• Qué nos referimos con binding a subpropiedades de objetos
• Demostrar la carencia automática de mecanismos de binding en subpropiedades
• Uso de this.set() para desencadenar procesos de binding
• Ejemplo completo de uso en un componente de Polymer

Qué hay que saber sobre el data binding en Polymer 2, cuando lo que se está bindeando es un array. Es importante porque el binding a arrays es bastante habitual y porque Polymer hace un tratamiento especial a los arrays que debemos de conocer, ya que los mecanismos de binding no se desencadenan, salvo que el desarrollador lo fuerce.

• Problemática del binding a arrays
• Funciones de manipulación de arrays
• Ejemplo práctico de uso de funciones de manipulación de arrays

Es un binding de datos especial, en el que no se bindea a una subpropiedad, sino a un método. Ese método se ejecutará y como respuesta nos devolverá un valor. Ese valor de devolución es el que se mostrará en el template mediante binding.
Tiene la particularidad que el método usado en el computed binding puede recibir propiedades del componente. Entonces Polymer 2, cada vez que cambia el valor de la propiedad usada para el computed binding, invocará al método que realiza el cálculo.

• Qué es Computed binding
• Qué diferencia tiene con las propiedades computadas
• Ejemplo de componente a desarrollar aplicando el computed binding
  Nota: Aunque esta clase pertenece al tema de binding el ejemplo lo vimos después de la explicación de los observers simples. Así pues, si lo prefieres, puede ser recomendable que veas este vídeo después del vídeo de los observers simples, para mantener el orden con el que se impartieron los contenidos en las clases del curso.

Qué son los observers en Polymer 2 y cómo nos permiten estar al tanto de los cambios en las propiedades de los componentes. Veremos para comenzar el tipo más sencillo de observer, que puede ser declarado junto con la declaración de la propiedad que se desea observar.

• Qué son observers
• Cómo podemos declarar un observer simple al declarar la propiedad
• Implementación de un método observador
• Recepción de parámetros en el método observador, con valor nuevo y antiguo de la propiedad observada.

Los observers simples permiten observar una propiedad completa. Pero para observar cualquier otra cosa debemos acudir a la sintaxis de los observers complejos.
En este vídeo conoceremos el primer tipo de observers complejos, usado para observar varias propiedades del componente, de modo que podamos realizar cualquier acción cuando alguna de las propiedades observadas cambie.

• Sintaxis de declaración de observers complejos.
• Implementar un método observador
• Parámetros recibidos en el método observador
• Ejemplo de componente que observa varias propiedades al mismo tiempo

Otro caso muy habitual para los que necesitamos declarar observers complejos es el de observar subpropiedades de objetos. Observar una subpropiedad, algo como user.nombre, no es lo mismo que observar una propiedad. Para observar una propiedad completa podríamos usar un observer simple, pero si lo que queremos es observar una subpropiedad concreta de un objeto, de modo que podamos hacer cosas cuando cambia esa subpropiedad y no el objeto completo, necesitamos acudir a la declaración de observers complejos.

• Qué es una subpropiedad
• Cómo declarar un observer de una subpropiedad
• Uso de this.set() para asegurar la ejecución del binding y de los observers

En este vídeo veremos otro de los usos habituales de los observers complejos, para la reacción a cambios de arrays. Este tipo de observers permite estar al tanto cuando secciones del array cambian, porque se añadan nuevas casillas, se borren, etc.

• Cómo se declaran observers de secciones de arrays
• Parámetro splices del observer, para acompañar el cambio producido en el array
• Uso de las funciones de manipulación de arrays

En este vídeo aprenderemos una nueva característica de Polymer, disponible en Polymer 2. Los observers a caminos, o path observers, nos permiten declarar funciones observadoras que pueden estar al tanto de los cambios sobre un conjunto de subpropiedades de objetos o valores de casillas de arrays. Con ellos podemos usar comodines (*) que nos permiten definir un conjunto de subpropiedades de objeto, sin la necesidad de especificarlas una a una.

• Path Observers para subpropiedades de objetos
• Parámetro con el registro de cambios enviado al observer
• Observar los cambios en los arrays y en las casillas de los arrays

Es una breve nota sobre el concepto de dependencias de los observers. Un observer debe ser definido especificando todas las dependencias que necesita para realizar sus operaciones.
Si no observamos todas las dependencias del observer, podría darse el caso que las operaciones realizadas por el observer no se ejecuten en todos los momentos que deberían.

Introducción a las cosas más básicas que se deben saber cuando se crean estilos para componentes de Polymer 2.

• Encapsulación de los estilos
• Algunos estilos se heredan de padres a hijos
• Elemento host y estilos mediante el selector :host

En este vídeo explicamos qué se conoce como "Light DOM" y cómo hacer uso del ligth DOM dentro de un componente por medio de los slots.

• Qué es el Shadow DOM
• Qué es el Light DOM
• Cómo definir un slot para poder insertar el light DOM dentro del shadow DOM
• Cómo crear varios slots, para insertarlos en lugares distintos
• Selector ::slotted para seleccionar y estilizar contenido de slots

En esta sección veremos cómo compartir estilos entre componentes. Es algo que resulta muy útil en el marco de una aplicación, pues habrá en algún momento componentes que compartan las mismas reglas de estilos. En vez de copiar y pegar esas reglas de estilos en varios componentes distintos, podemos crear esos estilos de manera única e incluirlos en todos los componentes donde se necesiten.

• Como definir un archivo con estilos CSS que pensamos compartir
• Como usar esos estilos en componentes, incluyendo el CSS compartido

Esta es la parte más importante de la clase de estilos en componentes, en la que aprendemos a usar y crear estilos personalizados para componentes.
Veremos que el catálogo de componentes de Polymer implementa diversos estilos personalizados, mediante los cuales un desarrollador puede personalizar el aspecto de los componentes, desde fuera, a la hora de usarlos. Esas mismas prácticas aprenderemos a usarlas en nuestros propios componentes, de modo que se pueda personalizar su estilo y aumentemos la reutilización de los componentes, a lo largo de proyectos o incluso por otros desarrolladores.

• Ejemplos de custom styles en componentes de Polymer
  • Ejemplo de variables
  • Ejemplo de mixins
• Implementar estilos personalizados en nuestros componentes
  • Implementar variables CSS
  • Aplicar valores predeterminados a las variables
  • Implementar mixins sobre componentes

En este vídeo vemos algo básico, aunque no abordado hasta el momento, como es extender componentes, para crear unos elementos en base a otros.

Cualquier componente Polymer extiende al menos a Polymer.Element, por lo que es algo que en realidad hemos hecho muchas veces. Sin embargo veremos cómo se extienden otros componentes y cómo se heredan del componente base template, propiedades y funcionalidad en general.

Introducimos con detalle el concepto de mixin y los usos para los que está reservado. Vemos qué estructura y funcionamiento general tiene un mixin.

• Qué son los mixins
• Para qué están pensados, casos de uso
• Funcionamiento general de un mixin
• Cómo es capaz de agregar código a un componente

Como primer paso práctico aprenderemos a usar mixins desde los componentes que estamos desarrollando, para agregarles funcionalidades declaradas en los mixins.

• Cómo se usan mixins disponibles en el propio Polymer
• Alternativas de código para aplicar los mixin
• Cómo se pueden aplicar varios mixin a la vez

Cómo se puede crear un mixin propio, con funcionalidades diversas que deseemos compartir en varios componentes.

• Qué podemos incluir en un mixin
• Implementación del mixin (función que devuelve una clase)
• Ejemplo de mixin en el que se agregan métodos de utilidad
• Ejemplo de mixin donde se agregan propiedades

Si creamos un mixin que pensamos reutilizar entre proyectos y/o que queremos publicarlo como software libre para que otras personas lo puedan usar, es importante cubrir unos pequeños requisitos adicionales:

• Necesidad de preparar los mixin
• Función para evitar mixins duplicados
• Aplicación práctica en nuestros mixins desarrollados
• Creación de un espacio de nombres para el mixin

En esta clase se aborda el test sobre componentes desarrollados con Polymer.

• Por qué realizar testing de componentes.
• Herramientas ofrecidas por el equipo de Polymer (Web Component Tester).
• Cómo realizar el test en componentes usando el template de componente ofrecido por el Polymer CLI.
• Ejemplos de test de componentes.
• Tips para aclararse cuando se examinan los test en los componentes de terceros desarrolladores.
• Herramientas y frameworks de test usados por Polymer Web Component Tester

Acabaremos en breve el curso de Polymer 2 y es el momento de proponer la práctica que se ha de realizar para completar esta formación.
Explicamos los enunciados de la práctica y los modos con los que se debe presentar las prácticas.

Con este vídeo comenzamos la clase dedicada a cómo presentar un componente correctamente para que lo pueda usar toda la comunidad de desarrolladores interesados.
En esta primera sección de la clase queremos mostrar el uso del template del polymer element que nos ofrece el polymer cli. Este template nos crea la estructura de un componente, con herramientas para crear la demo del componente y también su documentación.

En este vídeo creamos un componente que vamos a usar como ejemplo.
El componente es un visualizador de fechas en distintos formatos, que se alimenta mediante un timestamp.
En este vídeo hacemos un desarrollo rápido de este componente, aplicando diversos conocimientos ya vistos en clases anteriores de este curso.

En este vídeo se muestra cómo documentar un componente, de una manera estándar, a través de los propios comentarios creados en el mismo código del componente. Veremos:

• Cómo documentar el componente de manera general
• Cómo documentar propiedades
• Cómo documentar métodos
• Cómo crear el README.md de el proyecto de componente

En este vídeo mostramos cómo se puede agregar una licencia open source para el componente. La licencia es importante, pues el proceso de publicación de un componente tiene como requisito que se haya definido algún tipo de licencia de software libre.

En este caso vemos cómo definir un repositorio público para el componente. Es otro de los requisitos para poder publicarlo, que se encuentre disponible en GitHub.
En realidad este vídeo es más relacionado con conocimientos del propio Git que con Polymer en particular. Enseñamos a:

• Crear un repositorio git en local
• Enviar código al repositorio local
• Crear un repositorio remoto en GitHub
• Asociar el repositorio remoto a nuestro repositorio local
• Enviar código al repositorio remoto
• Actualizar el repositorio en local y enviar los nuevos cambios a remoto

En este paso vamos a probar a visualizar el componente, antes de publicarlo definitivamente en webcomponents.org. Realizaremos un preview y mostraremos cómo el componente aparecería una vez publicado, lo que nos permite comprobar si todo está a nuestro gusto.

El versionado del componente es otro de los requisitos para su publicación. Se tiene que realizar con Tags de Git. Mostramos qué son tags, cómo crearlas y cómo subirlas al repositorio remoto.

En este vídeo mostramos cómo se realiza la publicación definitiva de un componente en webcomponents.org.
Además se verá cómo se realiza una actualización del componente, cómo se etiqueta con un nuevo tag y cómo una vez publicados los cambios en el repositorio remoto, se actualiza automáticamente la página de webcomponents.org.
La actualización que realizamos consiste en cambiar la declaración de herencia del componente, para evitar que el web components analyzer me muestre todas las propiedades y métodos heredados del Polymer.Element como si fueran específicos de mi componente.

Demostración de lo sencillo que es usar componentes que hemos creado por nosotros en otros proyectos donde lo necesitemos.
Este vídeo muestra cómo definir una dependencia con un componente publicado por nosotros, que no difiere en nada de usar un componente publicado, por ejemplo, por el equipo de Polymer.
El objetivo es demostrar que una vez que hemos publicado los componentes en webcomponents.org, podemos usar esos mismos componentes donde lo necesitemos, de una manera muy sencilla.

El proyecto de elemento de Polymer tiene la posibilidad de generar documentación sin necesidad de subir el proyecto a webcomponents.org.
Mostramos cómo configurar el proyecto para mostrar la documentación del componente en una página, apoyados por elementos que nos proporciona Polymer 2 para este cometido.
Además en este vídeo se despide el curso de Polymer, al menos de manera oficial, aunque luego habrá otras clases para agregar contenido.

Explicamos los procedimientos para llevar a producción componentes Polymer 2, que podremos usar en cualquier sitio web. Transpilado a ES5, minimizado de código, compactado....

Sesión dedicada a desarrolladores de Polymer 2 que desean actualizarse a Polymer 3. Diferencias entre las versiones de la librería y flujo de desarrollo esencial con Polymer CLI.

En este vídeo aprenderás a crear un proyecto desde cero, de un componente creado con la clase base de LitElement, la evolución de Polymer para trabajar con Web Components.

En este vídeo vamos a ahondar sobre las propiedades de los componentes LitElement. No partimos desde cero, sino que trabajamos con el proyecto realizado en el vídeo anterior.

• Crearemos un nuevo componente
• Pondremos una propiedad de cadena
• Observamos la sincronización entre atributos y propiedades
  Lit Element se encarga de sincronizar automáticamente el template, con los valores de las propiedades actuales en todo momento.
  Veremos que podemos bindear una propiedad al template, en varios lugares. Uno curioso es en la declaración de estilos del componente, que resulta muy útil para la realización de componentes que necesiten personalizar su aspecto, incluso cuando el usuario interacciona con el componente.