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

Importante: Polymer 1 usa el estándar de Web Components V0 que dejará de estar disponible en los navegadores en breve. Por lo que todas las aplicaciones de Polymer 1 deberán migrarse cuanto antes a Polymer 2 o Polymer 3, o incluso a LitElement.

Este texto ocupa la primera versión de la librería, es decir Polymer 1. Si se desea aprender versiones más modernas y actuales recomendamos la lectura de otras ediciones: el manual de Polymer 2 y el manual de Polymer 3.

Manual de Polymer
Artículos
  • Artículos del manual

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

Manuales relacionados