Polymer

El desarrollo público de Polymer comenzó el 14 de noviembre de 2013 con la liberación de Promises Polyfill. Esto creció constantemente hasta convertirse en una biblioteca de diseño web que cubre las pautas de estilo visual (a través del Material Design), del enlace de datos, y un gran número componentes web básico y auxiliares. Originalmente, los componentes básicos se concibieron para abarcar una funcionalidad genérica que sería esencial para la mayoría de los sitios web, mientras que los componentes de auxiliares estaban destinados a proporcionar componentes más especializados con conceptos de Material Design que formaban una parte clave de su diseño. Se alcanzó un hito importante con la publicación de la versión 0.5, que fue considerada la primera versión del proyecto lista para ser utilizada por los primeros usuarios.[10]

Google continuó revisando el diseño de Polymer después de la publicación de 0.5, con especial atención a los problemas de rendimiento hallados por desarrolladores. Esto culminó con la liberación de Polymer 1.0 en 2015, que fue la primera versión "lista para la producción" de la biblioteca.[11] La versión 1.0 mejoró significativamente el rendimiento del Polymer, reduciendo los tiempos de carga hasta 7 veces.[12] Con la versión 1.0 Google separó los elementos del proyecto Polymer para distinguir claramente entre los de elementos del catálogo de Polymer polyfill y los componentes web.

En 14–15 de septiembre de 2015, Google organizó una conferencia Polymer en Ámsterdam.

En 17–18 de octubre de 2016, Google organizó una conferencia Polymer en Londres.

En 22–23 de agosto de 2017, Google organizó una conferencia Polymer en Copenhague.

Polymer añade algunas características a los componentes web:

• Simplificación en la creación de elementos personalizados
• Enlace de datos unidireccional y bidireccional
• Propiedades computadas
• Plantillas condicionales y repetitivas
• Eventos gestuales

Polymer ha comenzado a ganar cada vez más reconocimiento, con especial atención a su proceso de diseño estructurado, permitiendo una estructura de "ladrillos Lego" interoperable.[13]

Los elementos personalizados se pueden crear utilizando el elemento dom-module proporcionado por Polymer. La definición de elementos personalizados comprende los estilos CSS, las plantillas HTML del DOM local del elemento, las propiedades de los elementos, del ciclo de vida de las llamadas de retorno y los métodos JavaScript:

<dom-module id="hello-element">
  <template>
    <style>
      /* Local DOM CSS style */
    </style>
    <!-- Local DOM -->
    Hello {{name}}!
  </template>
  <script>
  class HelloElement extends Polymer.Element {
    static get is() { return 'hello-element'; }
    static get properties() {
       return {
          name: {
            type: String
           }
          /* Element properties */
       }
    }
    /* Custom methods */
  }
  window.customElements.define(HelloElement.is, HelloElement);
  </script>
</dom-module>

El elemento definido encima puede ser utilizado en código HTML de la siguiente forma:

<hello-element name="World"></hello-element>

• AngularJS
• React

• Sitio web oficial
• Repositorio GitHub
• Webcomponents.org