Web components is the collective term for a set of features the W3C is adding to the HTML and DOM specifications. They allow for the creation of reusable, encapsulated cross-browser HTML elements to use when building web pages and web apps. Here’s a review of what makes Polymer such an excellent tool for front-end development.
What problem does Polymer solve?
Polymer helps build custom web components which are compliant with the latest standards from the W3C. Web components help reduce the complexity of tooling needed to build modern web applications. They allow for lighter libraries and faster apps by offloading much of the work to browsers.
Benefits of Polymer
- Supports the creation of custom web components
- Shadow DOM
- Google Web Components (plus other element lines)
- Polyfills (to bridge the gap left by browsers that aren’t yet equipped to handle web components)
- Modular routing using elements
- Supports local storage
- Offline caching
Polymer is forward compatible with upcoming W3C standards, providing longevity to apps. It’s easy to use, learn, and teach, so onboarding new team members is a breeze.
Polymer supports serving an app multiple ways: unbundled for delivery over HTTP/2 with server push or bundled for delivery over HTTP/1.
Apps built with web components are easy to break up into modular pieces, so they’re simple to understand, scale, and refactor.
Polymer connects well with third-party libraries. Integrating it into an app or page can be done at the developer’s own pace, starting with a single custom element and moving to as much or as little “Polymerization” as desired.
Above all, Polymer creates fast, responsive websites. It’s up to three times faster on Chrome and four times faster on Safari.
Polymer is a tool of the future. With all the benefits implied by that status, there are drawbacks. It relies on browser features that aren’t yet standardized across browsers. Developers can work around this with polyfills, but that’s a fairly clunky solution. Fortunately, the need for polyfills is being eroded as browsers catch up to W3C standards.
In Polymer 1.0 there were some problems with dependency errors, though that seems to have been ironed out in Polymer 2.0.
Though Polymer is backed by Google and has an enthusiastic group of users, some components don’t have much existing documentation or examples. Finding experts may also be difficult, since many are still focused on React or Angular.
How does it compare to Angular or React?
Angular: Both Angular and Polymer support the creation of reusable web components. Angular is much more powerful as it’s a fully-fleshed framework. There are, however, two major areas where Polymer has the edge. It’s a third the size of Angular even with the webcomponents.js polyfill needed for non-compliant browsers (much smaller without that polyfill). Also, components created with Polymer are compatible with any application while Angular 2 components are limited to Angular 2 applications.
React: Polymer is much like React in that they’re both libraries, not complete frameworks. React is not compliant with the W3C’s web components standard, preferring to rely on its own component architecture. It’s ideal for projects with a lot of rapidly changing content within the view. However, Polymer has a better template engine and better forward compatibility than React.
In April of this year, McDonald’s used Polymer to upgrade the Menu Board software for their United States locations. Polymer fulfilled the restaurant’s requirement for completely modular software with the ability for layouts to shift based on an individual store’s needs. The app supports more than 10,000 product configurations in over 15,000 locations nationwide.
As expected of a Google tool, many Google properties employ Polymer. Google Earth’s redesigned site and app use Polymer-created web components. So do YouTube Web, Google Translate, and Google Music.
Other users of Polymer include Coca-Cola, Comcast, ING, Bloomberg, and USA Today.
Polymer 2.0 was released in May with increased interoperability, but it still has some browser limitations. It also faces skepticism from those who are loyal to React or Angular. With the growing popularity of web components, however, more developers are realizing how easy they are to create with Polymer. Features like forward compatibility, ease of learning and use, and compatibility with third party libraries are winning the skeptics over. It’s poised to become a well-accepted part of a developer’s toolkit.