Polymer 0.8 Comes with Performance Improvements and Breaking Changes

The Polymer team has made available Polymer 0.8 alpha with a “proposed API for 1.0” but it is “not compatible with the 0.5 API” having many breaking changes. The library has been optimized for size and performance and it is not yet feature complete.

Polymer 0.8 includes a Shady DOM, it’s own implementation of the Shadow DOM polyfill initially provided by webcomponents.js. As a result, one can import the smaller webcomponents-lite.js. The Shady DOM is “optimized for speed” and is meant to avoid “the complexity, size, performance penalty, and invasiveness of the shadow DOM polyfill.“

The polymer-element tag is no longer used, being replaced by dom-module, as shown in the following snippet used to define and register an element:

<dom-module id="hello-world">
  <style>
    div { color: red } 
  </style>
  <template>
    <div>Hello World!</div>
  </template>
</dom-module>

<script>
  Polymer({is: "hello-world"});
</script>

Styles have been moved out of the template, as seen in the above example.

Polymer 0.8 uses a single properties object to define property observers and computed properties. All properties, listed or not in the properties object, can be bound to data. There is a simpler data-binding system that is easier to debug and faster due to the use of generated property accessors. Default values are defined with the value key in the properties object by providing the value or a function returning one.

Polymer({
  is: "my-component",
  properties: {
    observed: {
      type: Number,
      value: 100,
      observer: 'observedChanged'
    },
    product: {
      computed: 'multiply(x,y)'
    }
  }
});

For a complete list of breaking changes it is recommended to read the Migration Guide. It is important to note that the 0.5 elements have not been ported yet, but they will. Regarding the future support for 0.5, the team remarks:

We recognize that many projects rely on 0.5, and won’t be able to switch to 0.8 until the elements are ready. We’ll continue viewing and merging PR’s until the elements are ported. We intend for 0.8 to be the new baseline though, and to work within this high-performance, production-ready mindset going forward. Any incremental 0.5 releases, if needed, will be available in a branch.

According to the team’s benchmarks, Polymer 0.8 has 4 to 8 times faster startup time, including on Chrome. It also has a smaller footprint. For a more in-depth review of the new features in 0.8 we recommend the Developer Guide.

A number of features are not working or partially working and are targeted for Polymer 1.0: Content Security Policy, gestures, better Shady DOM, cross-scope styling, more template features, data-binding debugging tooling, benchmarks. 0.8 supports the inheritance of HTML elements, but support for extending custom elements has been postponed for 1.1 because “it is a more complex problem to solve than it was in 0.5 given some of the performance optimizations we have made.”