Curso de Polymer 2
Aprende a desarrollar componentes con Polymer 2 y el estándar Web Components V1
Material disponible
Intermedio
52 Clases 22 h
Polymer 2 es la librería de Google para desarrollo de componentes basada en el estándar abierto de Web Components V1. En este curso podrás dominar esta tecnología y aprovechar lo mejor de los navegadores, creando componentes de alto rendimiento, capaces de ejecutarse en cualquier cliente web.

Hoy Web Components es la mejor alternativa para el desarrollo frontend, a la que todos los navegadores han expresado su apoyo. Permite usar el Javascript estándar para crear tus propios elementos personalizados, evitando ejecutar toneladas de Javascript que frameworks y librerías populares usan para conseguir las mismas cosas.

Con Polymer 2, con tan solo 11 KB de código propietario, permite llevar el estándar Javascript aún más lejos, proporcionando herramientas adicionales a los desarrolladores de componentes, como el binding, la interoperabilidad, la programación reactiva, etc.

Qué aprenderé en el Curso de Polymer 2

  • Introducción:

    • Web Components V1 (En abierto) Novedades, posibilidades y estado del estándar Web Components V1.

    • Introducción a Polymer 2.0 (En abierto) Cómo comenzar con Polymer 2 y cuáles son sus principales herramientas para un desarrollo rápido de componentes.

  • Desarrollo de componentes:

    • Desarrollo de clases ES6 Novedades del estándar de Javascript ES6 (ECMAScript 2015) en lo que respecta al desarrollo de clases de objetos. Otros conocimientos Javascript necesarios para entender el desarrollo de componentes en base a clases.

    • Generalidades del desarrollo con Polymer 2 Base de conocimiento básico para desarrollar con Polymer 2. Polymer CLI, estructura de los componentes, ciclo de vida y propiedades declaradas de los componentes de Polymer 2.

    • Eventos Tratamiento de eventos en Polymer 2, eventos sencillos, eventos táctiles, de teclado, eventos personalizados.

    • Binding Explicaciones detalladas del sistema de binding de Polymer 2, binding a propiedades, sub-propiedades de objetos y arrays.

    • Observers Qué son los observers, tipos de observers sencillos y complejos, observers a propiedades de objetos y arrays.

    • Estilos en componentes Estilos personalizados en componentes, cómo aplicar estilos en componentes creados por otros y cómo crear estilos personalizados en nuestros propios componentes.

    • Mixins Cómo definir y usar mixins para compartir código en los componentes de Polymer.

    • Testing de componentes Procedimientos para testing de componentes de Polymer 2. Aprenderemos a realizar las pruebas unitarias sobre los componentes desarrollados.

  • Práctica:

    • Como trabajo final de curso en el que se realizará un componente complejo, basado en otros componentes, donde el poner en marcha los conocimientos sobre interoperabilidad entre componentes.

    • Resolución de la práctica En la última sesión del curso se mostrará una resolución de la práctica, de modo que los estudiantes puedan obtener nuevas alternativas e ideas de desarrollo y puedan auto-evaluar sus propias soluciones.

  • El siguiente paso para el estudio de Polymer 2 se realizará con base al conocimiento adquirido en este curso, donde se abordarán en detalle todos los conceptos, prácticas y componentes relacionados con el desarrollo de Progressive Web Apps con Polymer 2.

Objetivos del curso

En este curso de Polymer 2 el estudiante aprenderá a crear componentes siguiendo el estándar abierto de Web Components V1 y las utilidades específicas de Polymer 2. Aprenderá las generalidades y usos de la librería, básicos y avanzados, así como a trabajar con la biblioteca de componentes que nos ofrece para evitar desarrollar desde cero.

En este curso nos centraremos en el desarrollo de componentes reutilizables, aprendiendo todo lo que Polymer nos ofrece para un desarrollo rápido y productivo. Propiedades, data binding, observadores, eventos. Estudiaremos la interoperabilidad entre componentes y los patrones más adecuados para permitir que los componentes interactúen entre sí manteniendo un elevado rendimiento.

Al final del curso el estudiante resolverá una práctica, en el que se desarrollará un componente complejo, que se apoyará en un árbol de componentes más sencillos para resolver sus necesidades.

Clases y contenidos

Clases en abierto de Polymer 2 y Web Components

Web Components V1 y Polymer 2 Gratis

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.

Introducción a Polymer 2 Gratis

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.

Base de Javascript ES5/ES6

Repaso de las novedades en el lenguaje Javascript que debes conocer para poder desarrollar con Polymer 2.

Conocimientos Javascript y ES6 necesarios en Polymer

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

Polymer 2 básico

Las bases para el desarrollo de componentes con Polymer 2.

Generalidades de desarrollo con Polymer 2

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
Propiedades en Polymer 2

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)
Propiedades computadas

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.

Propiedades reflectToAttribute y serialización de propiedades

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.

Propiedades de array y templates de repetición

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.

Ciclo de vida de los componentes de Polymer 2

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

Eventos

Gestión de eventos en Polymer, eventos del navegador y eventos personalizados.

Introducción a eventos en Polymer 2

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
Eventos personalizados

Explicaciones y ejemplos diversos sobre eventos personalizados.

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

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
Equivalente a this.$$ en Polymer 2

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.

Eventos de teclado

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
Eventos táctiles

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)

Data Binding en Polymer 2

Todo acerca del sistema de binding en componentes Polymer 2.

Binding: 1 way / 2 way

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
Binding a atributo

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
Binding 2 way a elementos nativos

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
Binding a subpropiedades de objetos

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
Binding a arrays

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
Computed binding

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.

Observers en Polymer 2

Creación de observers capaces de reaccionar ante cambios en propiedades.

Observers simples

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.
Observers complejos: observar múltiples propiedades

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
Observers complejos: observar subpropiedades

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
Observers complejos: observar arrays

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
Observers a caminos (Path Observers)

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
Dependencias de los observers

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.

Styling en componentes

Cómo aplicar estilo a componentes de modo que se pueda personalizar su aspecto de manera versátil. 

Conceptos básicos de estilos en componentes

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
Slots

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
Estilos compartidos

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
Custom styles

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

Mixins en Polymer 2

Estudio en profundidad de los mixins en Polymer 2, la manera correcta de compartir código entre componentes.

Extender elementos de Polymer 2

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.

Introducción a los mixin

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
Usar mixins

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
Crear un mixin

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
Preparar un mixin para compartirlo

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

Test de componentes Polymer 2

Testing de componentes

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

Componentes "Production Ready"

Desarrollar componentes profesionales, con estilo y documentación, listos para producción.

Enunciado práctica fin de curso de Polymer 2

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.

Template de Polymer Element en el Polymer CLI

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.

Crear un elemento basado en el template del Polymer Element

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.

Documentar un componente

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
Agregar una licencia open source al 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.

Crear un repositorio Git para el componente

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
Visualizar un preview de la publicación del componente

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.

Crear tags en el proyecto, con Git, para el versionado

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.

Publicar el componente

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.

Cómo usar componentes publicados por nosotros en otros proyectos

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.

Crear la página de documentación del componente en local

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.

Build de Componentes Polymer 2 Gratis

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....

Introducción a Polymer 3

Desarrollos en Polymer 2 que desean actualizarse a Polymer 3

Polymer 3

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.

LitElement

Comenzar a trabajar con LitElement, la evolución de Polymer para el desarrollo de Web Components.

Introducción a LitElement Gratis

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.

Lo básico de las propiedades en LitElement Gratis

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.

Valoraciones

José Carlos Domínguez Bermúdez

Alejandro Rubio Calvente

Isaac González Román

Leandro Echevarria

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete