Web Components
Today


Presentor: Jeremy Wilken

Examples: https://github.com/gnomeontherun/
web-components-today

Web Components

are the future present.

My definition

Web Componets are custom elements that behave like standard HTML elements and are easy to reuse and don't interfer with other elements.

Key Goals of Web Components

  • Encapsulation - keep component logic isolated
  • Isolation - keep component internals hidden
  • Reusability - make features easy to reuse
  • Native - expose standard event APIs
  • Customizable - style and extendable
  • Declarative - expressive markup

Web Components are 4 technologies

  • Custom Elements (encapsulation, declarative)
  • HTML Imports (reusability)
  • Templates (encapsulation, reusability)
  • Shadow DOM (isolation)

Fair warning

The Spec is not finalized, a polyfill is needed,
and API changes are possible.

Let's dig into code

GitHub Buttons

http://ghbtns.com

Iframe

Web Component


Using an element




Vanilla Javascript

is using just ES5 Javascript to create web components.


http://w3c.github.io/webcomponents/explainer/

Vanilla Javascript Example

https://gnomeontherun.github.io/
web-components-today/components/vanilla

Vanilla Javascript

  • Just the native APIs
  • Most flexibility
  • Can be efficient
  • Great for simple
  • Most work to implement
  • Opportunity for bad design
  • Lacks supporting tools
  • Best practices unknown

X-Tag

is a custom elements toolkit.


http://x-tags.org

X-Tag Example

https://gnomeontherun.github.io/
web-components-today/components/x-tag

X-Tag

  • Cleaner API
  • Lifecycle and events
  • Mixins and utilities
  • Provides support for IE9+
  • No Shadow DOM (by default)
  • Documentation lacking
  • No two way data binding
  • Manual templating

Polymer

is a two part toolkit. It contains a set of polyfills, and a framework to develop custom elements.


http://polymer-project.org

Polymer Example

https://gnomeontherun.github.io/
web-components-today/components/polymer

Polymer

  • Custom elements as APIs
  • Two way data binding
  • Rich framework
  • Docs are growing
  • Active development
  • Loads assets
  • Alpha
  • IE10+

AngularJS

is a Javascript toolkit for building applications in the browser.


http://angularjs.org

AngularJS Example

https://gnomeontherun.github.io/
web-components-today/components/angular

Web Components using AngularJS

  • Extensive APIs
  • Declarative markup
  • Lots of flexibility
  • Strong templating
  • No styling isolation
  • Difficult to reuse
  • Needs Angular application
  • Doesn't use native APIs

Web Components do not solve

  • External dependency management (like jQuery)
  • Accessibility requirements
  • Duplication of features, the same as jQuery plugin duplication
  • Doesn't enforce quality of componentization

Other considerations

  • Packaging options: Polymer has Vulcanize, Grunt/Gulp/etc tasks
  • Favor simplicity over complexity
  • Limit dependencies
  • Make web components like native elements

Thanks!

https://gnomeontherun.github.io/
web-components-today

 

Jeremy Wilken

@gnomeontherun

Resources