Web Components via Polymer Project

Matthew General

Senior Engineer

Buffalo Portal

Web Components

• W3C Features for DOM/HTML
• Component-based engineering
• Introduces new APIs:
  • Custom Elements
  • Shadow DOM
  • HTML Imports
  • HTML Templates
• It's a standard!

Polymer Project

• Library designed to ease developers into using web components
• Polyfills missing APIs in older browsers
• Can be used now!
• Working on v2, which makes use of ES6 features, optimizes, and breaks some things
• Library of elements at your disposal

Web Components

• Templates
• Shadow DOM
• Custom Elements
• HTML Imports

Polymer Project

Polymer 1.0+ works with the latest two versions of all major browsers

Polyfilled using webcomponents.js (or webcomponents-lite.js) maintained by webcomponents.org

Browser Support

HTML Templates

• Many JS-land implementations of templates
  • mustache.js
  • handlebars.js
• Native templates can be safer
• Native templates are standard
• Native templates are cleaner
• Parsed but not executed until cloned

Custom Elements

• Exactly what you think it is, custom DOM elements
• Define using ES2015 class
• Class extends HTMLElement or another element
• Resusable, extendable, Object Oriented

HTML Imports

• Componentize your scripts
• Basically pull a given component into a standalone document
• Helps encapsulate styles, scripts and DOM
• Makes it easier to build a registry of components

Shadow DOM

oooOOOooOoOOoOOoOooOOOooo

• Actual encapsulation for your components
• Takes an element and attaches a special DOM
• Styles and additional elements can live here
• Can be native elements or custom elements
• Scopes markup and CSS to host element
• Styles defined inside won't leak outside
• Styles defined outside won't affect the main page

Shady DOM

Sketchy...

• Like shadow DOM but not quite (Still Sketchy)
• Enough encapsulation to fake shadow DOM
• polyfilling shadow DOM entirely is slow and a lot of code
• Shady DOM lets you fake it enough for web components to work
• Has the problems that necessitate Shadow DOM
  • leaking implementation
  • affected by stylesheets

Competition

What about React by Facebook?

React

• Uses virtual DOM
• Powered by diffing
• Fast because it's not DOM
  • essentially tree of nested functions, only rerender if inputs change
• often uses JSX
  • requires arcane webpack knowledge

Web Components

• Standard for the future
• Not yet available natively on all browsers
  • polyfills :(
• Still DOM
  • console log DOM node and see how much is bound to it
• No need for JSX, no transpiling necessary, webpack? Not needed.

Opinions

I have many... but these are about web components

• Browser support is poor
• There will be unwillingness to leave competitive approaches
  • Though you can wrap other libraries fairly safely
• Built on modern standards is a huge plus, but legacy support will stimie adoption, though some have made the leap
• Slightly less nasty feeling compared to JSX
• Components rock, seriously
• Declarative routing weirds me out, still
• I remain optimistic about it

Tour my website