Curso de Polymer 2

FrontEnd

Aprende a desarrollar componentes con Polymer 2 y el estándar Web Components V1

Intermedio Medio (de 8 a 20 horas) Precio en promoción 99€ 85€

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.

Objetivo del curso de Polymer 2

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 del curso de Polymer 2

Las clases del curso se estructurarán de la siguiente manera:

Introducción:

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

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

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

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

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

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

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

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

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

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


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


CONTENIDO

Clases en abierto de Polymer 2 y Web Components

Web Components V1 y Polymer 2

Gratis !
Miguel Angel Alvarez

Introducción a Polymer 2

Gratis !
Miguel Angel Alvarez

Base de Javascript ES5/ES6

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

Polymer 2 básico

Las bases para el desarrollo de componentes con Polymer 2.

Propiedades en Polymer 2

Miguel Angel Alvarez

Propiedades computadas

Miguel Angel Alvarez

Eventos

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

Eventos personalizados

Miguel Angel Alvarez

Patrón mediador

Miguel Angel Alvarez

Equivalente a this.$$ en Polymer 2

Miguel Angel Alvarez

Eventos de teclado

Miguel Angel Alvarez

Eventos táctiles

Miguel Angel Alvarez

Data Binding en Polymer 2

Todo acerca del sistema de binding en componentes Polymer 2.

Binding: 1 way / 2 way

Miguel Angel Alvarez

Binding a atributo

Miguel Angel Alvarez

Binding 2 way a elementos nativos

Miguel Angel Alvarez

Binding a arrays

Miguel Angel Alvarez

Computed binding

Miguel Angel Alvarez

Observers en Polymer 2

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

Observers simples

Miguel Angel Alvarez

Dependencias de los observers

Miguel Angel Alvarez

Styling en componentes

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

Slots

Miguel Angel Alvarez

Estilos compartidos

Miguel Angel Alvarez

Custom styles

Miguel Angel Alvarez

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

Miguel Angel Alvarez

Introducción a los mixin

Miguel Angel Alvarez

Usar mixins

Miguel Angel Alvarez

Crear un mixin

Miguel Angel Alvarez

Preparar un mixin para compartirlo

Miguel Angel Alvarez

Test de componentes Polymer 2

Testing de componentes

Felix Zapata

Componentes "Production Ready"

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

Documentar un componente

Miguel Angel Alvarez

Publicar el componente

Miguel Angel Alvarez

Build de Componentes Polymer 2

Gratis !
Miguel Angel Alvarez

CONTENIDO

Clases en abierto de Polymer 2 y Web Components

Web Components V1 y Polymer 2

Gratis !
Miguel Angel Alvarez

Introducción a Polymer 2

Gratis !
Miguel Angel Alvarez

Base de Javascript ES5/ES6

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

Polymer 2 básico

Las bases para el desarrollo de componentes con Polymer 2.

Propiedades en Polymer 2

Miguel Angel Alvarez

Propiedades computadas

Miguel Angel Alvarez

Eventos

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

Eventos personalizados

Miguel Angel Alvarez

Patrón mediador

Miguel Angel Alvarez

Equivalente a this.$$ en Polymer 2

Miguel Angel Alvarez

Eventos de teclado

Miguel Angel Alvarez

Eventos táctiles

Miguel Angel Alvarez

Data Binding en Polymer 2

Todo acerca del sistema de binding en componentes Polymer 2.

Binding: 1 way / 2 way

Miguel Angel Alvarez

Binding a atributo

Miguel Angel Alvarez

Binding 2 way a elementos nativos

Miguel Angel Alvarez

Binding a arrays

Miguel Angel Alvarez

Computed binding

Miguel Angel Alvarez

Observers en Polymer 2

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

Observers simples

Miguel Angel Alvarez

Dependencias de los observers

Miguel Angel Alvarez

Styling en componentes

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

Slots

Miguel Angel Alvarez

Estilos compartidos

Miguel Angel Alvarez

Custom styles

Miguel Angel Alvarez

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

Miguel Angel Alvarez

Introducción a los mixin

Miguel Angel Alvarez

Usar mixins

Miguel Angel Alvarez

Crear un mixin

Miguel Angel Alvarez

Preparar un mixin para compartirlo

Miguel Angel Alvarez

Test de componentes Polymer 2

Testing de componentes

Felix Zapata

Componentes "Production Ready"

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

Documentar un componente

Miguel Angel Alvarez

Publicar el componente

Miguel Angel Alvarez

Build de Componentes Polymer 2

Gratis !
Miguel Angel Alvarez