What's new in Polymer 1.0


6 years ago

Polymer 1.0 was first announced at Google I/O 2015. This new version has been almost completely rewritten, with a focus on cross-browser performance and convenience for programmers.

Polymer 1.0 runs about 3 times faster in Chrome and about 4 times faster in Safari compared to version 0.5, and it is also much lighter to download. Another improvement is the new data binding system: it became more efficient, letting you smoothly connect your application to your backend.

Almost everything in the new Polymer is about Web Components. Important changes have been made; for instance, the Shadow DOM management is now handled through Shady DOM, which has several advantages. One of them is that it is easier to code than the Polyfill required to access the Shadow DOM in browsers that do not offer it natively. In addition, it offers significant improvements in performance and initial load time.

The styles are now tightly encapsulated within our Web Components, with Shady DOM preventing our styles from bleeding out into other parts of our application. Moreover, Polymer will soon include a tool to pre-process the stylesheets of our components, which will run much faster since they won’t have to be processed by the client.

To limit download size, Polymer 1.0 comes pre-loaded only with the most frequently used events, which are the following:

  • down - which fires while the item is selected, either by holding click or a finger over the component;
  • up - which is triggered when the user stops selecting the item.
  • tap - a touch-compatible version of clicking;
  • track - which allows you to track when the user “drags” an element on the screen. It also includes a hover() function that returns the item that is “below” the item being “pulled”.

To complement Polymer, a series of production-ready components are available to cover most commonly used features. These components are officially divided into the following categories:

  • paper-elements - UI elements made in accordance with Material Design;
  • iron-elements - These are Polymer’s core components, the basic building blocks to create web applications;
  • google-web-components - The power of many Google Services, encapsulated into easy-to-use web components;
  • gold-elements - These elements are specially designed for e-commerce;
  • neon-elements - These allows you to create animations for your site, such as animated transitions between sections;
  • platinum-elements - Notifications, service-workers, caching, offline functionality and other advanced services for applications.

To learn more about Polymer 1.0 and other topics that can change your future, I invite you to follow Platzi/blog articles and to stay tuned for upcoming content. In the meantime, do not hesitate to leave your comments, requests and suggestions down below.

Happy coding!

Escribe tu comentario
+ 2

The things you give are very convincing, I have read it many times and feel very logical. This is my own opinion, but many people may not be like that, but I hope you continue to develop to have more similar articles.