| Polymer | |
|---|---|
 | |
| Developers | Google[1] and contributors[2] |
| Initial release | May 29, 2015; 10 years ago (2015-05-29)[3] |
| Stable release | |
| Repository | polymer |
| Written in | JavaScript,HTML |
| Type | JavaScript library |
| License | 3-Clause BSD[6] |
| Website | www |
Polymer is anopen-sourceJavaScript library for buildingweb applications usingWeb Components. The library is being developed byGoogle developers and contributors onGitHub. Modern design principles are implemented as a separate project usingGoogle'sMaterial Design design principles.
Polymer is used by a number of Google services and websites, includingYouTube, YouTube Gaming, the redesignedGoogle Earth (since 2017),[7]Google I/O 2015 and 2016 websites,Google Play Music, redesign ofGoogle Sites[8] andAllo for web (until its shutdown in 2019).[9]
Other notable users includeNetflix,Electronics Arts,Comcast,Nuxeo,Coca-Cola,McDonald's,BBVA,IBM,Interxion andGeneral Electric.
Public development of Polymer began in November 2013 with the release of a PromisesPolyfill. This steadily expanded into a web design library covering visual styling guidelines (via Material Design),data binding, and a large number of "Core" and "Paper" Web Components.Core components were originally envisioned to encompass generic functionality that would be essential to most websites, whilePaper components were intended to provide more specialized components withMaterial Design concepts forming a key part of their design. A major milestone was reached with the release of Version 0.5, which was considered the first version of the project ready for use by early adopters.[10]
Google continued to revise the design of Polymer after the release of 0.5, with special consideration given to the performance issues a number of developers found. This culminated with the release of Polymer 1.0 in 2015, which was the first "production ready" version of the library.[11] Version 1.0 significantly improved the performance of Polymer, reducing load times by up to 7 times.[12] With version 1.0 Google split the elements from the Polymer project to clearly distinguish the elements catalog from the Polymer polyfill & webcomponents-sugaring library.
On 14–15 September 2015, Google organized a Polymer Summit inAmsterdam.
On 17–18 October 2016, Google organized a Polymer Summit inLondon.
On 22–23 August 2017, Google organized a Polymer Summit inCopenhagen.
On 2 May 2018, the Polymer team announced that any future development in Polymer will shift away from its two-way binding and its template system, and will focus on LitElement[13] (still part of Polymer[14]) and one-way bindings.[15]
Polymer provides a number of features overvanilla Web Components:
Polymer has begun to gain increasing recognition in the market, with spikes in use in 2015 and 2016 as documented by the website BuiltWith.[16] Special attention has been paid to its structured design process, allowing for aninteroperable "Lego Block" structure.[17] LitElement was developed by the Google Chrome team as part of the Polymer project in 2018. LitElement was designed to be a lightweight and easy-to-use framework for creating web components that can be used with any front-end framework or library.
Custom elements can be created usingES (ECMAScript, most commonlyJavaScript) modules with classes. Custom element definition comprisesCSS style, HTML template of the element's localDOM, element properties, lifecycle callbacks and JavaScript methods:
import{PolymerElement,html}from'@polymer/polymer'classHelloElementextendsPolymerElement{// Define the element's templatestaticgettemplate(){returnhtml` <style> /* Local DOM CSS style */ </style> <!-- Local DOM --> Hello {{name}}! `;}staticgetis(){return'hello-element';}// Define public API propertiesstaticgetproperties(){return{name:{type:String}};}}window.customElements.define(HelloElement.is,HelloElement);
The element defined above can be used in HTML code:
<hello-elementname="World"></hello-element>
