Extract from SitePoint article “A Guide to Upgrading to Polymer 1.0” by Pankaj Parashar
Published July 15, 2015
At the recently concluded Google IO 2015, Google released the much awaited 1.0 version of Polymer and declared it production-ready. For those of you who have been using the Polymer library while it was still in developer preview, this article will serve as a guide to migrate your existing application to the latest version of Polymer.
A few important things to note about v1.0:
- It is incompatible with version 0.5, the previous version and the
longest surviving so far. - The new release is focused on performance and efficiency while
dramatically reducing the overall size of the library. - It has been completely rebuilt from the ground-up to make it easier
and faster for developers to design custom elements that work more
like standard DOM elements. - Internal benchmark tests reveal that v1.0 is about 3x faster on
Chrome and 4x faster on Safari compared to the previous version.
The steps to install the latest version of Polymer remain exactly the same as described in this article. To update an existing installation of Polymer, navigate to the app directory and run the following command in your terminal:
$ bower update
It’s important to be aware that this will certainly break your existing app, since, as mentioned, the two versions are incompatible. Hence, installing a fresh copy in a separate folder is recommended instead. To illustrate the changes since v0.5, we’ll use the credit card custom element from one of my previous articles on SitePoint as a reference to draw comparisons between the two versions.
Polyfilling non-supporting browsers
The new version of Polymer no longer needs the shadow DOM polyfill included in the webcomponents.js library. Instead use the much smaller webcomponents-lite.js library to polyfill older browsers.