Polímero (biblioteca)

Polymer es una biblioteca JavaScript de código abierto para crear aplicaciones web mediante Web Components . La biblioteca está siendo desarrollada por programadores y colaboradores de Google en GitHub . Los principios de diseño modernos se implementan como un proyecto independiente, siguiendo los principios de diseño Material Design de Google .

Polymer es utilizado por varios servicios y sitios web de Google, incluidos YouTube , YouTube Gaming, el rediseño de Google Earth (desde 2017), ^{[ 7 ]} los sitios web de Google I/O 2015 y 2016, Google Play Music , el rediseño de Google Sites ^{[ 8 ]} y Allo para la web (hasta su cierre en 2019). ^{[ 9 ]}

Otros usuarios destacados incluyen Netflix , Electronics Arts , Comcast , Nuxeo , Coca-Cola , McDonald's , BBVA , IBM , Interxion y General Electric .

El desarrollo público de Polymer comenzó en noviembre de 2013 con el lanzamiento de Promises Polyfill . Este se expandió progresivamente hasta convertirse en una biblioteca de diseño web que abarcaba directrices de estilo visual (a través de Material Design), enlace de datos y una gran cantidad de componentes web "Core" y "Paper". Los componentes Core se concibieron originalmente para abarcar la funcionalidad genérica esencial para la mayoría de los sitios web, mientras que los componentes Paper estaban destinados a proporcionar componentes más especializados con conceptos de Material Design como parte fundamental de su diseño. Un hito importante se alcanzó con el lanzamiento de la versión 0.5, considerada la primera versión del proyecto lista para su uso por los primeros usuarios. ^{[ 10 ]}

Google continuó revisando el diseño de Polymer después del lanzamiento de la versión 0.5, prestando especial atención a los problemas de rendimiento que encontraron varios desarrolladores. Esto culminó con el lanzamiento de Polymer 1.0 en 2015, que fue la primera versión "lista para producción" de la biblioteca. ^{[ 11 ]} La versión 1.0 mejoró significativamente el rendimiento de 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 el catálogo de elementos de la biblioteca Polymer polyfill & webcomponents-sugaring.

Los días 14 y 15 de septiembre de 2015, Google organizó una Cumbre de Polímeros en Ámsterdam .

Los días 17 y 18 de octubre de 2016, Google organizó una Cumbre de Polímeros en Londres .

Los días 22 y 23 de agosto de 2017, Google organizó una Cumbre de Polímeros en Copenhague .

El 2 de mayo de 2018, el equipo de Polymer anunció que cualquier desarrollo futuro en Polymer se alejará de su enlace bidireccional y su sistema de plantillas, y se centrará en LitElement ^{[ 13 ]} (que sigue siendo parte de Polymer ^{[ 14 ]} ) y enlaces unidireccionales. ^{[ 15 ]}

Polymer ofrece una serie de características adicionales respecto a los componentes web estándar :

• Forma simplificada de crear elementos personalizados
• Enlace de datos unidireccional y bidireccional
• Propiedades calculadas
• Plantillas condicionales y repetitivas
• Eventos gestuales

Polymer ha comenzado a ganar mayor reconocimiento en el mercado, con picos de uso en 2015 y 2016 como documenta el sitio web BuiltWith. ^{[ 16 ]} Se ha prestado especial atención a su proceso de diseño estructurado, que permite una estructura de "bloques de Lego" interoperable . ^{[ 17 ]} LitElement fue desarrollado por el equipo de Google Chrome como parte del proyecto Polymer en 2018. LitElement fue diseñado para ser un marco ligero y fácil de usar para crear componentes web que se pueden usar con cualquier marco o biblioteca de front-end.

Los elementos personalizados se pueden crear utilizando módulos ES (ECMAScript, generalmente JavaScript ) con clases. La definición de un elemento personalizado comprende el estilo CSS , la plantilla HTML del DOM local del elemento , las propiedades del elemento, las funciones de devolución de llamada del ciclo de vida y los métodos JavaScript:

import { PolymerElement , html } from '@polymer/polymer'class HelloElement extends PolymerElement { // Define la plantilla del elemento static get template () { return html `  <style>  /* Estilo CSS del DOM local */  </style>  <!-- DOM local -->  ¡Hola {{name}}!  ` ; } static get is () { return 'hello-element' ; } // Define las propiedades de la API pública static get properties () { return { name : { type : String } }; } } window . customElements . define ( HelloElement . is , HelloElement );

El elemento definido anteriormente se puede utilizar en código HTML:

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

• Esbelto
• Marco de trabajo de JavaScript
• Comparación de frameworks web basados ​​en JavaScript
• Componentes web

• Sitio web oficial
• Polymer en GitHub
• www.webcomponents.org​​