Addy Osmani: Componentize The Web!
Addy Osmani (@addyosmani) was speaking at Smashing Conference about the Polymer framework, these are my notes from his talk.
Thought experiment
We built pages out of tags that had default UI and behaviour. We now use frameworks, plugins and widgets. What we need is a way to create our own elements - we components give us that.
<x-chart> could be used to create charts, drop in a tag and then configure it by supplying attributes. The tag would be visible in the DOM like other tags. <x-tabs> could be used to create a tabbed interface which could then be extended to create a carousel. For video we could extend the <video> element to create better controls for the standard player controls.
Let's go back in time
To understand where we are we need to understand where we were. Elements are the building blocks of the web and they are also encapsulated - we now get that via hacks like iframes.
<select> is a good example, you get a default UI with functionality. It can be modified by adding attributes like disabled or selected - we don't need any JavaScript. Adding additional elements like <optgroup> modifies the UI. In addition there are a number of JS APIs so the elements are programmable too.
Over time we've moved more of our element's functionality into JS, in some cases totally.
Web components
- templates
- custom elements
- shadow DOM
- HTML imports
Templates can replace JS templating engines. Custom elements create new functionality. Shadow DOM enables us to fully encapsulate a section of a page. HTML imports allow us to include markup from other pages into a page.
Browser support is still sketchy but is improving.
Use
We import it using a link tag and then consume it in the page by adding the custom elements. Registered by document.registerElement('my-element'). Custom elements can be accessed with standard DOM APIs including attribute changes and lifecycle events. Custom elements can also extend existing elements and this will inherit all the built in accessibility and functionality of the native element.
Shadow DOM allows us to apply styles and functionality to the element alone - a bit like an iframe, there is a firewall between the DOM and the shadow DOM.
my-element /shadow/ h2 { ... and my-element /shadow-deep/ h2 { ... are the CSS selectors. Still a work in progress.
Polymer
This is a library that can allow you to use these techologies in current browsers.
- Native
- Platform (polyfill)
- Polymer (opinionated way to work with elements)
- Elements
Everything is an element. With Polymer you can declaratively register new elements. It also has helpers to deal with JS interactions such as data bindings and abstracts away the DOM boilerplate. Also event handlers, automatic node finding.
Can create libraries of custom elements to form a UI toolkit. Small primitives can be added together to create larger UI elements.
Don't forget accessibility - use text alternatives, ARIA roles, alternative interaction modes, &c.
Polymer elements are SEO friendly - in Google at least.
Polymer polyfills allow support in modern browsers, as the browsers implement it natively it will fall out of use.
With JS disabled the browser will still render the text - it ignores the custom elements and treats them as <div>s.
Library of elements can be found at: http://customelements.io