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

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

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

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

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

Compartir