Pages

Tuesday, 21 July 2015

Web Components with Polymer... it's magic

Lately I've been experimenting with Web Components using the Polymer library as a means to simplify my workflow and as a means to replace internal Flash 'components' which can be just dropped into the stage.

When I built my proof of concept and it ran for the first time it felt like witchcraft! All I needed to type was:

<my-video src="http://www.example.com/video.mp4"></my-video>

Which includes my player skin, preroll support (via vast-client-js) and analytics tracking, all hidden within my custom element in the Shadow DOM (or Shady DOM in most non-chrome browsers for now).

I have since built a few more components, and when composed together they are so simple yet so powerful. This certainly feels like the future, it will be great to deploy widgets (without the iframe overhead) and it makes UI frameworks very powerful and easy to use (see the paper elements as an example).

At the moment I'm using vulcanize to compile all my components into one compressed file so the overhead is minimal. Although I plan to migrate to HTTP/2 soon, which should negate this need and make things simpler, faster and better cached.