Final Words - Testing, Building, and Deploying Components with Polymer - Developing Web Components (2015)

Developing Web Components (2015)

Part IV. Testing, Building, and Deploying Components with Polymer

Chapter 18. Final Words

Jarrod Overson

Congratulations—you know just enough about web components to start having a good time developing web applications. Once you start scratching the surface you’ll discover a vast world that will delight and surprise you. Web components aren’t the solution to every problem, though, and they present more questions than they answer—new questions that require new paradigms and patterns.

The field is also moving extremely quickly. To put it in perspective, when we started working on this book we planned to include a chapter on decorators, but that was eventually scrapped as the spec fizzled into nonexistence; the specs around creating custom components changed; Polymer went from alpha to beta to nearing a 1.0 release; and Chrome 36 stable shipped with full web component support out of the box. In a very short time web components went from a barely usable pipe dream to something that is legitimate and out in the wild.

This book is early for the realm of web components. We’re on top of it all and intend this book to be a transitional primer for people moving from the existing world of widget writing to the new world of web component authoring. Hopefully you’ll see multiple revisions of this book, each focusing on current best practices as the landscape evolves.

Where Do We Go from Here?

It is important to stay up to speed with the state of web components on the Web. This book is not able to be the final answer (yet…), so you’ll need to seek out information and read the news as it occurs. We are already starting to see alternatives to the web components game; Polymer is actively changing before its 1.0 release; and Microsoft is approaching web components with force.

This section outlines some of the ones to watch, as well as a few hot sources of information to get you started.

Polymer

Polymer has rapidly evolved from being an interesting project to being at the absolute forefront of custom element creation. It provides a slew of custom components ready to be used, and examples to help you get into them. When Google announced its material design at I/O 2014, Polymer elements implementing the design were announced the same day, with tutorials at the conference. It is clear that Polymer is going to continue being a force and should be followed, respected, and questioned like any front-runner in a new technology. Polymer 0.8 incorporates some serious changes that will improve performance dramatically and shows that the team is dedicated to making Polymer the first choice in serious web component development.

Mozilla X-Tag

Mozilla’s foray into the space, X-Tag, is less opinionated than Polymer and attempts to ease the creation of custom components. The developers initially implemented their own polyfills, including an attempt at substantial shadow DOM shimming, but the group of early adopters eventually came to the conclusion that, to speed up adoption, standardizing on one set of polyfills was important. Now the polyfill implementations are the same as Polymer’s, omitting the bulk of platform.js and including some extensions that provide support where Polymer lacks.

Mozilla also showcases a large number of custom compontents built using X-Tag and is a great resource for seeing what you can do outside of the world of Polymer.

NOTE

Polymer and X-Tag have had the freedom to run for years in controlled environments, though, and the assumptions they made a few years ago may no longer be the best of the breed when it comes to modern practice. Don’t get me wrong, they very certainly do a lot of things very well, but the rest of the world is starting to jump on board and all the flaws that are revealed and changes that are made are going to spawn different implementations. Don’t wait to find out who wins. Web components provide value now. Polymer is a fantastic solution, and the people putting it to use are doing beautiful things with it. It’s attracting the best of the brightest and will surely be supported for many years in the future. If your environment doesn’t need all of what Polymer provides, look around at the other options, but be realistic about your future support requirements; Polymer and web components may be a more viable option than you expect. Make sure the browsers you support are still highly used on BrowserUsage.org before omitting this valuable technology to accommodate potentially dying browsers.

document-register-element

Andrea Giammarchi created a polyfill for custom components after some frustration with the heavy implementation promoted by Polymer. This version clocks in at around 2 KB and certainly works for basic implementations of custom elements. It isn’t mentioned here because of its astounding uniqueness, but as an example of web components turning the corner into real-world usage.

WebComponents.org

Zeno Rocha, Rob Dodson, Addy Osmani, Eric Bidelman, and a slew of others have banded together to centralize modern information regarding web components on WebComponents.org. This is intended to be a reliable location for charting up-to-date practices and specifications and is a welcome addition. Web components have been a hot topic for over two years now, and this has resulted in a large number of out-of-date blog posts, repositories, and tweets floating around in the ether. Having a reliable, current website curated by some of the best in the field is a big benefit.

CustomElements.io

CustomElements.io has been around for much longer than you’d probably expect and houses a wide range of community implementations of custom components. Since the site has been around for so long, it also contains references to a fair number of unmaintained components that may or may not run on modern versions of their dependencies. It remains, though, one of the top non-Polymer and non–X-Tag resources for community component listings and will likely grow to become much more relevant as community components start becoming more popular.

Having a site dedicated to components is and will continue to be important. Applications and development flows that take full advantage of the HTML APIs presented by web components are going to benefit from staying in that environment. There’s nothing preventing a developer from using a widget developed with this or that library, but it’s that cognitive switch that will be optimized against. The future holds a large number of reimplementations of existing widgets in its path, and sites like CustomElements.io are going to be important to manage them.

Good Luck!

You’re about to embark on a journey that this book’s authors are going on with you. This is an excellent opportunity to make your mark on a virgin canvas. If you’ve ever been interested in reinventing your career, the modern Web holds unlimited potential for you right now.

Web components is a technology that will benefit from new minds and new ways of thinking about applications. You can easily become an expert in a field where expertise is highly sought after by expending some effort playing with cool technology. This, coupled with the fact that the technology will breathe new life into all existing widget ideas, means that there is a tremendous opportunity to become well versed in the technology simply by reimplementing old ideas in new ways.

Good luck, and we’ll see you at the next revision!