Polymer Project

Learn Polymer

What is Polymer?

Polymer is an open source javascript library for building web applications using web components, designed to assist developers in building web APIs. Polymer can create custom elements and bring web component support to browser with the help of polyfills and sugar and is based on a well-known Shadow DOM concept and properties. Developers from google and github are continuing to add to the library.

Short History

Polymer Project was started as an experiment in 2012 to embed web developers right inside chrome team, the goal was to tighten the feedback loop between developers building on the web and the engineers implementing the browsers. The experiment was then turned into a project focused on identifying developers needs and participating in the standard process to address needs in the browser. Polyfills and libraries were developed to encourage use of these new features and aimed to make the forward platform to make it more capable for developers, so developers can make great user experiences. The versions of polymer which have been published yet are:-
Polymer 0.5 — November 2014
Polymer 1.0 — May 2015
Polymer 2.0 — May 2017
Polymer 3.0 — August 2017

Polymer promotes the use of the original framework/platform of the web. It use original <link> tags to import web components. Polymer extends the capabilities of the platform with the sole purpose of helping the developers make reusable web components.

But our campaign to #UseThePlatform is ultimately not about driving people to use the stuff the Polymer Project builds. It’s about promoting the use of the web platform to deliver the best apps possible, and helping to ensure that web users and developers get everything they deserve from the platform in the future. — Polymer Project’s Role

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be:
Instantiated using a constructor or document.createElement.

• Configured using attributes or properties.
• Populated with internal DOM inside each instance.
• Responsive to property and attribute changes.
• Styled with internal defaults or externally.
• Responsive to methods that manipulate its internal state.

Installation

To set the development environment for polymer make sure that npm and Node.js is correctly installed on your machine. To confirm that npm is correctly installed run
npm --version

To confirm Node.js is correctly installed:
node --version

Install Polymer Cli:
npm install -g polymer-cli or
npm install -g polymer-cli --unsafe-perm

To confirm that the polymer cli has been correctly installed:
polymer --version

Once you are done with the installation, you can create your project by manual installation or you can clone basic code from here:

git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3
npm install
polymer serve

For manual install
npm init or yarn init

npm install — flat @polymer/polymer@next
or
yarn add — flat @polymer/polymer@next

this will create node_modules folder and package.json file. After that, you can create .html file and provide source path of your components inside script tag.

Since, by following above commands one can install polymer-cli on his/her local machine. You can see example of polymer project on https://github.com/rashmina34/PolymerProject

Lifecycle Callbacks

Lifecycle callbacks are used to accomplish the tasks for built-in features of Polymer.Element class.
List of legacy callbacks in Polymer:
created − It is called when you create an element before setting the property values and initializing local DOM.
ready − It is called when you create an element after setting the property values and initializing local DOM.
attached − It is called after attaching the element to the document and can be called more than one time throughout the lifetime of an element.
detached − It is called after detaching the element from the document and can be called more than once throughout the lifetime of an element.
attributeChanged − It is called when there are changes in an element’s attributes and it holds the attribute changes, which are not compatible with the declared properties.

Hence, polymer is a JavaScript library that allows reusing the HTML elements for building applications with components. You can find more detail about polymer on :
https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview