Polymer Builds On Web Components For Faster And Easier Custom Components

Polymer BuildsWeb applications are becoming increasingly complex, and as HTML is asked to accomplish user interface miracles it was never designed for, the language that structures the web’s documents is showing its rough edges. HTML itself has a limited number of native UI elements like tables. Creating new ones often involves copy-pasting huge chunks of code or using complex frameworks, the guts of which most developers have little understanding of.

Web Components are regarded by many as the solution to HTML’s inherent limitations for building complex user interface elements. In essence, Web Components allow us to build custom user interface components that are fully encapsulated. They function as separate entities, which means that the custom element’s CSS, HTML, and JavaScript don’t impact the rest of the DOM, and vice versa.

In an excellent article on web components, Rob Dodson uses the standard <video> tag to exemplify how Web components benefit developers. When we use the video tag, we usually just wrap our media within the <video> tag, and we get a video player along with scrubbing controls, a playback control, a volume slider, and timecodes. All of this comes for “free” and isn’t visible in the page’s code. That doesn’t mean the code to build these elements doesn’t exist. It does exist — in the Shadow Dom.

The <video> tag hides away a huge amount of HTML, CSS, and JavaScript within the Shadow Dom, encapsulated in such a way that the contents of the page don’t interact with the display of the video player. This is done so that the developers of the <video> standard could be sure that the video player would look the same whichever page it was displayed on and whichever browser was displaying it.

Web Components allow us to do the same with any UI element. We can push its complexity into the Shadow Dom, and because of the barrier between the Shadow DOM and the “real” DOM, that component is reusable anywhere within a site without impacting or being impacted by the page’s content. We get true encapsulation and separation of concerns on the web.

All of which sounds great, but Web Components suffer from a few drawbacks. They’re not easy to use. Building custom components from the primitives provided by Web Components is time-consuming. And browser support isn’t as widespread as might be hoped.

This is where Polymer comes in. Polymer is a library that builds on top of Web Components and makes it much easier to build custom interface components — it even comes with a number of custom web components that developers can drop straight into their pages. It also offers better cross-browser support. Developers often prefer to work with Polymer because it gives them all the advantages of Web Components — reusable, encapsulated custom components for web application UIs — without the complexity of working directly with the less-than-intuitive low-level tools provided by Web Components.

If you want to learn more about Polymer, take a look at Rob Dodson’s article on CSS Tricks and Kevin Gleason’s guide to building a Polymer to-do app.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED