Developing Web Components

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

In Part III we went over the core of web components and their constituent technologies, gaining an understanding of the complexity that they present. In Part IV we will be porting our web component to take advantage of the Polymer framework, incorporating it into a Grunt build process, packaging it with Vulcanize, and publishing it with Bower. We’ll also take a look at some of the currently available options for testing web components and show the end-to-end process of writing and running unit tests using Karma.

The Polymer Project is more than just a pleasing API for web components. It provides many, many shims that bring the future of web development to most relatively modern browsers today. Technologies like the shadow DOM aren’t the easiest to polyfill, but the community has rallied around this suite of shims in order to provide consistent behavior across all modern browsers and in all competing frameworks. This means that you can feel relatively confident investing time in understanding Polymer, what its developers are trying to do, and how they are doing it even if you have not fully bought into the API.

As your projects grow and your usage of Polymerized web components increases, you’ll soon find that managing web component source files requires a different level of concern than traditional development. You’ll be managing multiple JavaScript, HTML, and CSS resources that can’t be concatenated blindly with ...