Manual de Polymer

En este manual vamos a explicar cómo trabajar con Polymer, una librería para el desarrollo sencillo y rápido de sitios web, basada sobre el estándar de los Web Components. Básicamente dentro de Polymer puedes encontrar dos cosas:

1) Por un lado te ofrece un catálogo de elementos, mediante los que puedes enriquecer el HTML con nuevas etiquetas capaces de hacer diversas cosas útiles. Esas nuevas etiquetas es lo que se conoce como Custom Elements y que cualquier persona podría usar en cualquier proyecto, incluso sin tener que meterse con asuntos relacionados con la programación.

2) Ya para el que sepa programar y que quiera invertir tiempo en aprender esta librería, Polymer ofrece una manera muy rápida y sencilla de registrar componentes y facilitar la comunicación entre ellos y la interoperabilidad, a través de binding y otras herramientas que habitualmente se usan en frameworks Javascript.

En este manual pretendemos ofrecer una guía detallada para cualquier persona que quiera aprender Polymer, paso por paso y de manera ordenada.

Ver los capítulos

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

Descargar como libro electrónico

Este texto 'Manual de Polymer' 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

Introducción a Polymer

Google es el creador de Polymer. Como prueba del intenso apoyo a esta librería se puede señalar que actualmente es su principal opción para el desarrollo de proyectos internos.
Comenzaremos con una serie de artículos básicos enfocados en el uso de Polymer y de sus elementos del catálogo, para demostrar su utilidad y las impactantes cosas que podemos hacer sin necesidad de poseer grandes conocimientos de esta librería.

1.- Polymer

Polymer es una potente librería para desarrollo de sitios web del lado del cliente, basada en los estándares de los Web Components.

2.- Obtener Polymer

Primeros pasos con Polymer, cómo obtener Polymer y cómo crear un primer elemento desde cero, así como organizar la carpeta de proyecto.

3.- Usar elementos de Polymer

Vamos a conocer Polymer por la práctica desempeñando una de las posibilidades que nos ofrece la librería, el uso de elementos, o componentes, que están disponibles en el catálogo de Polymer.

4.- Mapas de Google ultra-sencillos con Polymer

En este artículo aprenderás a construir mapas de Google perfectamente personalizados con Custom Elements de Polymer. Tan sencillo como escribir una etiqueta HTML google-map.
Creación básica de componentes con Polymer

Nos adentraremos en el desarrollo de Web Components usando la librería Polymer. Cómo registrar nuestros primeros elementos Polymer y acciones básicas que se puede realizar con ellos.

5.- Crear elementos con Polymer

Cómo crear Custom Elements ayudados por la librería Polymer, un Hola Mundo en el desarrollo de Web Components usando la librería Polymer.

6.- Ciclo de vida de un componente Polymer

Ciclo de vida en el desarrollo Web Components y su variación para el desarrollo de custom elements basados en Polymer.

7.- Propiedades de componentes web Polymer

Qué son las propiedades y cuáles son las cosas básicas que podemos hacer con ellas para el desarrollo de componentes Polymer.

8.- Registro de propiedades: tipos, valores y otras configuraciones

Estudiamos en profundidad el registro de las propiedades en componentes Polymer y todas sus opciones de declaración. Detallamos las propiedades computed.

9.- Behaviors en Polymer

Qué son los Behaviors de Polymer, para qué usarlos y ejemplos de Behaviors, tanto sus implementaciones como su uso en componentes.
Observers en Polymer

Los observers nos permiten vigilar u observar cambios en propiedades de componentes Polymer. Son extremadamente útiles, además de sofisticados, porque con ellos puedes centralizar en un lugar todo el código que debe desencadenarse al cambiar el estado del componente. Puedes observar propiedades, conjuntos de propiedades, arrays, atributos de objetos, etc. La optimización de los observers de Polymer hace que el uso de esta herramienta sea un poco complejo cuando quieres observar atributos profundos de objetos, así que hay que prestar especial atención.

10.- Observers en Polymer

Explicamos los observers, una de las principales herramientas en Polymer, para el trabajo con los datos de los componentes. Permiten observar una propiedad y hacer acciones cuando cambie.

11.- Observar propiedades de objetos y arrays en Polymer

Cómo observar el cambio en propiedades de objetos, así como en casillas de un array en propiedades de componentes Polymer.
Binding en Polymer

En los siguientes artículos abordaremos con detalle los procesos de binding. Se trata de una de las principales herramientas que tenemos en la librería Polymer para el desarrollo acelerado y para facilitar, de una manera sencilla, la colaboración de unos componentes con otros.

12.- Introducción al binding en Polymer

Qué es el binding, una de las grandes herramientas que nos permite muchas facilidades en el desarrollo y la interoperabilidad entre componentes. Ejemplos de implementación de bindings en Polymer.

13.- Binding entre componentes Polymer

Cómo se realiza binding entre componentes Polymer, cuáles son las herramientas que en Polymer facilitan la interoperabilidad entre componentes.

14.- Bindeo de los hijos hacia los padres en Polymer

Vemos el binding de datos desde componentes hijos hacia los padres y el uso de las propiedades notify, para indicar que queremos que se notifiquen cambios a los padres en componentes Polymer.
Gestión de eventos

A lo largo de los siguientes capítulos vamos a abordar con todo detalle el trabajo con eventos en componentes de Polymer. Desde los eventos más básicos que están en el lenguaje Javascript, hasta otros más avanzados que nos aporta la librería Polymer, como los eventos de gestos (para pantallas táctiles). Veremos también cómo usar eventos personalizados, para que nuestros componentes puedan avisar a los componentes de su alrededor cuando ocurren cosas que deban saber.

15.- Eventos en Polymer

Introducción a los eventos en Polymer, cómo trabajar con eventos, asociar eventos a componentes, declarar funciones manejadoras de eventos y primeros ejemplos.

16.- Eventos personalizados en Polymer

Por qué son tan importantes en el desarrollo de componentes en Polymer y cómo podemos disparar custom events en unos elementos y captarlos en otros.

17.- Eventos de gestos (gesture events) en Polymer

Descripción y ejemplo práctico sobre los eventos de gestos, o gesture events, en componentes de Polymer. Tap, down, up, track.
Herramientas indispensables para desarrollar con Polymer

Conoceremos algunas herramientas esenciales para facilitar el desarrollo de aplicaciones web basadas en Polymer.

18.- Polymer Starter Kit 2

Qué es el Polymer Starter Kit 2 y cómo nos puede ayudar para construir de manera sencilla una SPA con Polymer.

19.- Iniciar un nuevo proyecto con Polymer Starter Kit

Cómo iniciar un nuevo proyecto de sitio o aplicación web realizada con Polymer, apoyándonos en Yeoman como generador de la estructura de proyecto definida en el Polymer Starter Kit.

20.- Polymer en Producción: Vulcanizado (Vulcanize) de elementos

Qué es el vulcanizado de elementos, con Vulcanize, uno de los pasos esenciales para llevar una aplicación Polymer a producción.

21.- Polymer CLI

Herramientas de línea de comandos para trabajar con proyectos de Polymer, esenciales para cualquier tipo de proyecto.

22.- Material Design con Polymer

Qué es Material Design y cómo Polymer facilita la vida a los desarrolladores que quieren aplicar estas guías de estilo en webs y progressive web apps.
Prácticas con el catálogo de elementos de Polymer

En Polymer, aparte de diversas utilidades para el desarrollo de nuestros propios elementos, también encontramos un nutrido catálogo de componentes ya listos para usar y que cubren gran parte de las necesidades de aplicaciones complejas y Progressive Web Apps. En los siguientes artículos vamos a realizar varias prácticas de implementación de elementos del catálogo de Polymer para aprender a usar algunos de los más importantes elementos con los que construir atractivas aplicaciones web.

23.- Notificaciones con Polymer

Cómo suscribirse a notificaciones de Chrome que podrá recibir una aplicación web, una asombrosa característica de las Progressive Web Apps sencilla de implementar con Polymer.

24.- Template de repetición dom-repeat

El componente dom-repeat es un tipo de template de Polymer que permite hacer una iteración entre los elementos de un array.

25.- Ajax con Polymer

Cómo trabajar con Ajax en la librería Polymer, usando el componente iron-ajax ofrecido dentro de los elementos de Polymer.

26.- Ajax avanzado en Polymer con iron-request

En este artículo te explicamos el componente iron-request, para realizar ajax avanzado en Polymer, con ejemplos de uso.

27.- Componentes del sistema de routing en Polymer

Analizamos con ejemplos sencillos los componentes app-location y app-route, para comenzar a comprender cómo se interpretan las rutas de aplicaciones SPA en Polymer.

28.- Intercambiar vistas usando los datos del componente app-route

Veremos cómo reaccionar a los cambios de rutas, mostrando otras vistas de la aplicación, apoyados por el componente iron-pages.

29.- Lazy load de componentes en Polymer

Lazy load en Polymer, la carga perezosa de componentes para aligerar la primera visualización de las apps y descargar solo los web components necesarios para comenzar.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

rOxhh

29/4/2016
Estupendo!
Muchas gracias.

Juanlu Rico

12/5/2016
Es un buen manual
Este manual está muy bien para introducirse en la librería Polymer. Creo que están haciendo un buen trabajo, sin duda a mi me ha ayudado mucho.

Julio Carlos

29/8/2016
Dudas entre polymer y angular2
Estoy a punto de comenzar un proyecto y analizando tecnología del lado de cliente me encuentro en la duda de usar Polymer o Angular2. Cuál es su opinión?

midesweb

11/10/2016
todo depedende...
Julio,
Depende mucho de tu background profesional. Si vienes del backend y lenguajes como C# o Java probablemente te sientas más cómodo con Angular 2. Si vienes de HTML y CSS y Javascript para la web, jQuery y esas cosas sin duda te vendrá mejor Polymer.