Polymer 3.0 moves to NPM and ES6 Modules with templates in JavaScript
Polymer is a library that helps developers use native Web Components. Leveraging browser capabilities it promises high performance and low payload reusable components for front end developers. At Polymer Summit 2017 in Copenhagen, Denmark the team announced Polymer 3.0. The new version comes with welcom architectural changes.
Polymer and the Web Components ecosystem have made great strides. With browser implementations underway, the foundations are in place. There has been a few gripes in the ecosystem that have kept some developers back. Namely the Bower packet manager will give give way to the NPM equivalent.
Over the years Bower has dropped in popularity, where as NPM has become the industry standard. Everything from JavaScript libraries to CSS frameworks are now by default distributed through the repository that was originally meant for only Node.js framework modules.
NPM itself has made great leaps forward, namely with the Yarn packet management that improves installation performance. Since that time the official NPM client also introduced lock file support in version five. In short NPM is now the industry standard for JavaScript. It is in a very strong position.
Polymer is learning from the JavaScript ecosystem
In addition to NPM the Module Loading in JavaScript has improved tremendously. Instead of having a number of competing module specifications like AMD and Common.js, the JavaScript developer ecosystem has moved quickly towards the default ECMAScript Module definition.
Modules were introduced to JavaScript in ES6 in 2015. ES6 was a giant update to ECMAScript, the JavaScript language specification that browser developers build their implementations against. As for browsers and web components - Chrome, Opera and Safari browsers already work completely without polyfills for web components.
Another big change is moving templating to JavaScript from the template tags in Polymer 1.x and 2.x. This is something that the React community has especially been dismissive of when it comes to Web Components. React fully embraces JavaScript templating through it's JSX templating dialect. With the move to Polymer 3.0 developers can use ES6 template literals, and there are interesting efforts like lit-html for templating in JavaScript.
Making using Web Components with JavaScript fluent
As of Polymer 3.0 developers can integrate better with common JavaScript tools, such as Webpack, ESLint, Babel, TypeScript, etc. Polymer is currently available in Early Access Preview, and the team recommends to use Polymer 2.0 for production projects. For transitioning, there will be an automatic conversion tool from 2.0 to 3.0 components - so any investment in 2.0 components is not wasted.
In general Web Components is a solid investment in the future, and this move is addressing some core criticisms from JavaScript developers. While there have been efforts in the Angular and Vue.js communities, for example, to integrate Web Components - it's been a bit of a different world with separate tooling, starting from the Packet manager.
More information and details on how to install Polymer 3.0 EAP from NPM on the Polymer team blog: Polymer 3.0 preview: npm and ES6 Modules
Learn more about Polymer and Web Components:
- Web Components in May 2017: Polymer, Polyfills, Google/IO
- Web Components powered YouTube refresh available in public preview
- Web Components and SEO
- Redux state management for Polymer Web Components
- Polymer Web Components and TypeScript