Google Chrome Summit: Reusable Components for the Web

by November 20, 2013

In his presentation at the Google Chrome Dev Summit in Mountain View CA, Eric Bidelman talked about the Polymer project to bring declarative, encapsulated, and reusable components to the Web. Here are my notes from his talk:

  • In an HTML select menu you can do a lot of things declaratively. This component not only has a number of capabilities but some limitations as well.
  • To create custom elements, we tend to layer on scripts and mark-up that makes things hard to maintain.
  • How can we make markup meaningful again? Can we use declarative nature of the Web to make the DOM as a first class citizen on the Web again?
  • Polymer is based on four standards: templates, HTMl imports, custom elements, and the shadow DOM.
  • Polymer is a set of polyfills that add support for shadow DOM, custom elements, HTML imports, pointer events, etc.
  • There is a sugaring layer that provides ways (convenience APIs) to use all the Web component concepts together.
  • The philosophy of Polymer is: Everything is a component; eliminate boilerplates, and support modern browsers.
  • Everything can be set up as an element with declared attributes and values including Ajax, Flexbox, and more.
  • Non-visual utility elements don't put anything on the page. They provide services, data, and behaviors. This is conceptually a bit odd but int he big picture it makes sense.
  • There are also elements that render components and put things on the page like menus, cards, buttons, etc.
  • If you are building a polymer element, you get Pointer events by default that integrate input types into one.
  • To make a UI element, create a definition, declare it, create DOM, or the new operator in Javascript.
  • Complex elements often need properties and methods. These can be added to prototypes.
  • You can data-bind inside components using media queries to add and remove markup.