Manual de Polymer 2

Este es el manual de Polymer 2, la librería para el desarrollo con el estándar de los Web Components. Polymer es una librería creada por Google para facilitar el trabajo en el desarrollo de componentes y aplicaciones complejas.

Ahora que el estándar Web Components V1 es una realidad y el soporte en navegadores está prácticamente generalizado, Polymer 2 se ha reformulado completamente para ofrecer una manera de desarrollar más ágil y más cercana al estándar.

En Polymer 2 prima el desarrollo nativo, con Javascript estándar, lo que ofrece una mayor velocidad y menor peso de las aplicaciones, ya que se apoya en todo lo que la plataforma web nos ofrece a los desarrolladores. Tanto es así que la librería ocupa solo 11K en navegadores que no necesiten la carga de polyfills.

En este Manual de Polymer 2 nos ponemos manos a la obra para acercar la mejor librería basada en Web Components, capaz de extraer lo mejor del estándar y permitir una mayor velocidad y comodidad de desarrollo. Explicaremos cómo se desarrollan componentes basados en Polymer 2 y cómo usar la inacabable biblioteca de elementos ya listos para el desarrollo de aplicaciones complejas.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Polymer 2' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Primeros pasos en el desarrollo con Polymer 2

Comenzamos con una serie de artículos que nos aproximarán al desarrollo de componentes con la librería de Google. Explicaremos qué es Polymer y en qué se basa para ofrecer al desarrollador quizás la mejor plataforma para la creación de componentes y aplicaciones web.

Nuestro objetivo fundamental en estos primeros artículos es explicar fundamentos del estándar de los Web Components V1, que permite el desarrollo de elementos personalizados con los cuales extender el HTML y aportar nuevas funcionalidades a los navegadores, que podrán ser compartidas y reutilizables de manera general. Luego veremos cómo el desarrollo con Web Components y el desarrollo con Polymer 2 pueden ser muy similares, ya que la librería de Google se basa directamente en el estándar. Por último conoceremos cómo es un componente de Polymer, sus diferentes partes y cómo usar el toolbox disponible en Polymer 2 para facilitarnos el día a día en el desarrollo de aplicaciones web.

1.- Polymer 2.0 introducción

Qué es Polymer 2.0 y por qué representa una revolución, junto con los Web Components V1, en el mundo del desarrollo web frontend.

2.- Desarrollo de Web Components V1 frente a Polymer 2

Revisión de la sintaxis y procedimientos para crear un elemento personalizado (custom element) con Web Components V1, frente al desarrollo con Polymer 2.

3.- Estructura de un componente de Polymer 2

Cómo se define un custom element en Polymer 2, reconociendo todas sus partes, englobadas por la etiqueta dom-module: la clase de definición del componente, su template y los estilos CSS.

4.- Instalar Polymer 2

Cómo instalar Polymer 2. Comenzamos a explicar flujos de trabajo habituales con Polymer 2 y las herramientas disponibles en el Polymer CLI. Estructura de una aplicación básica.
Generalidades para el desarrollo de componentes

En los siguientes artículos vamos a abordar los conocimientos fundamental para trabajar con Polymer 2. Veremos cuáles son las utilidades más importantes que nos ofrece la librería para desarrollar, como las propiedades, el binding de datos y los eventos. Este conocimiento de base luego lo utilizaremos durante todo el manual, y se aplicará en cualquier componente por sencillo que sea.

También veremos cómo es el ciclo de vida de los componentes, algo que todo desarrollador debe conocer para poder sacar partido al desarrollo con Web Components, apreciando cómo en muchos de los casos el propio Javascript estándar es la base de todo lo que nos encontramos dentro de Polymer 2.

5.- Introducción al desarrollo de componentes con Polymer 2

Esta es una clase práctica sobre desarrollo de componentes de Polymer 2, con vídeo incluido. Veremos binding, propiedades, eventos, ajax para acceso a API REST y colaboración entre componentes.

6.- Propiedades y estado de los componentes en Polymer 2

Cómo definir propiedades de los componentes, aplicar data binding en el template y modificar los valores de los atributos del componente para alterar el estado.

7.- Ciclo de vida Web Components V1 + Polymer 2

Qué es el ciclo de vida de los componentes y los métodos callback disponibles en el estándar de Web Components V1 y en la librería Polymer 2.

8.- Binding en polymer 2

Qué es el binding y cómo lo configuramos en Polymer 2. Tipos de binding bidireccional y unidireccional. Interoperabilidad entre componentes.

9.- Introducción a los eventos en Polymer 2

Aprende lo básico de los eventos en Polymer 2: Cómo definir manejadores de eventos y asociarlos a elementos dependientes de un componente Polymer.
Propiedades en componentes Polymer 2 al detalle

En la próxima serie de artículos vamos a detallar cómo funciona el sistema de propiedades en componentes desarrollados con Polymer 2. Estudiaremos asuntos importantes para poder crear nuestros custom elements sacando partido a las posibilidades de la librería, como la serialización y deserialización de propiedades a atributos, los tipos de propiedades disponibles en el librería, junto con ejemplos destacados de componentes donde seguir practicando.

10.- Tipos de propiedades y deserialización de atributos en componentes Polymer

Propiedades en Polymer 2 y los tipos de datos posibles, explicando los mecanismos de deserialización de atributos para recibir los valores de las propiedades.

11.- Funcionalidades incorporadas en las propiedades de Polymer 2

Qué funcionalidades tenemos disponibles para la configuración de propiedades en los componentes de Polymer 2.

12.- Ejemplo de uso de reflectToAttribute en Polymer 2

En este artículo vamos a mostrar un ejemplo que nos ilustre el uso de la configuración reflectToAttribute en componentes de Polymer 2.

13.- Propiedades computed en Polymer 2

Explicaciones sobre las propiedades computadas (computed) de Polymer 2 y ejemplos de componentes donde se usan.
Observers en Polymer 2

Una de las herramientas más importantes para el desarrollo de componentes de Polymer son los observers. Los observers nos permiten estar informados de los cambios en los datos que maneja el componente, ya sean propiedades comunes, propiedades de objetos, subpropiedades, o secciones de un array. Existen observers sencillos y observers complejos y los vamos a conocer todos en los próximos artículos. Además también conoceremos cambios en los observers en la nueva versión de la librería, Polymer 2, pues han incorporado nuevas funcionalidades, como la declaración de comodines en los observers, para observar varias cosas a la vez sin necesidad de especificarlas.

14.- Observers sencillos en Polymer 2

Qué son los observers y cómo declarar observers sencillos sobre propiedades individuales, con ejemplos de desarrollo de componentes.

15.- Observers complejos, de dos o más propiedades, en Polymer 2

Introducción de los observers complejos en Polymer, declarados en la propiedad observers, que nos permiten observar de una sola vez valores en dos o más propiedades.

16.- Observers de propiedades profundas de objetos en Polymer 2

Aprende a crear observers complejos, en el que se observa el estado de propiedades de objetos, con caminos profundos.

17.- Observers de arrays Polymer 2

Cómo observar manipulaciones de arrays que cambien la cantidad de casillas, en Polymer 2, de modo que podamos realizar acciones cada vez que es insertada o borrada una casilla.

18.- Observers múltiples con comodines Polymer 2

Como hacer observers donde usamos comodines, de modo que podemos ejecutar código cuando cambia cualquier propiedad profunda de un objeto.
Binding al detalle en componentes Polymer 2

En los próximos artículos vamos a dar un repaso en profundidad a todo el sistema de data binding de Polymer, aprendiendo muchos detalles importantes para entender y aprovechar bien las posibilidades de esta librería para el desarrollo de web components.

19.- Bindeo a propiedades vs bindeo a atributos en Polymer 2

Qué es el binding a propiedades y qué es el binding a atributos, por qué se distinguen, qué características tienen y cómo conseguir cada uno de ellos.

20.- Propiedades con notify para binding a dos direcciones

Hacer componentes con Polymer 2 que soportan binding a dos direcciones, por medio de la configuración de las propiedades con notify a true.

21.- Más sobre binding en Polymer 2

Diversas prácticas habituales en el binding de Polymer 2, operador de negación, computed bindings y compound bindings (bindeos computados y compuestos).

22.- Binding en elementos HTML nativos en Polymer

Cómo implementar bindeo de dos direcciones, two way binding, sobre elementos HTML nativos, o elementos que no sean de Polymer en general. En templates HTML.
Otros asuntos destacables en Polymer 2

A continuación otros artículos con asuntos que pueden resultar destacables en el mundo de Polymer y los Web Components.

23.- Polymer Redux

Primeros pasos con polymer-redux, la librería para facilitar el trabajo con Redux desde aplicaciones y componentes escritos con Polymer.

24.- Uniflow Polymer

Qué es Uniflow, un patrón de arquitectura para aplicaciones Polymer 2 inspirado en el patrón Flux y Redux.

25.- Cómo usar versiones anteriores del Polymer CLI

Cómo disponer de varias versiones de Polymer CLI, adaptadas a las versiones de Polymer que tengas en cada proyecto.

Compartir