Introduction to Web Components and Polymer

A cheatsheet on creating web components by TJ Monserrat

https://bit.ly/tjmonsi-intro-web-components​

Who am I?

Follow Me

Reminder for the 2nd talk

Install Polymer-cli:

npm i -g polymer-cli

Introduction to Web Components and Polymer

What is a web component?

Web Components is a suite of different technologies allowing you to create reusable custom user interface components

Web components are re-usable lego blocks that creates web-apps

Why do we need web components?

Reusing code as much as possible is a good idea.

- MDN Web docs: Web Components

... the purpose of [information] hiding is to make inaccessible certain details that should not affect other parts of a system.

- “Abstraction, Encapsulation, and Information Hiding.”

document.querySelector('#button-unique')
  .addEventListener('click', handleClick)

The purpose of web components is to provide developers with the ability to create re-usable and encapsulated components...

But we are creating
components before...

Imperative way of creating components...

Vanilla

jQuery

jQuery

Creation is encapsulated...

making creation re-usable...

Limitations...

Output is still exposed on accidental manipulation...

Virtual DOM

Angular / React / Vue

Angular / React / Vue

Angular / React / Vue

+

=

https://medium.com/naukri-engineering/naukriengineering-virtual-dom-fa8019c626b

Limitations...

You cannot build a web component
without them...

Output is still exposed on accidental manipulation...

Custom Element and Shadow DOM specs

Custom Element 

<this-is-my-element></this-is-my-element>

customElements.define('name-of-custom-element', CustomElementClass)

https://codepen.io/tjmonsi/pen/GQqEya

Shadow DOM

this.attachShadow({mode: 'open'});

https://codepen.io/tjmonsi/pen/aqZybR

Lifecycle

connectedCallback () { }

https://codepen.io/tjmonsi/pen/ZrOJrq

disconnectedCallback () { }

https://codepen.io/tjmonsi/pen/jZMQNo

attributeChangedCallback () { }

static get observedAttributes() { }

https://codepen.io/tjmonsi/pen/wyzRLe

So how do we create a proper web component now?

Let's spice things up...

https://codepen.io/tjmonsi/pen/KQgJKR

But what if we want to track many attributes?

Or change attributes without using "setAttributes"

https://codepen.io/tjmonsi/pen/mXrvER

Or use some form of templating?

https://codepen.io/tjmonsi/pen/WMGPOy

But I want it simple...

Introducing
Polymer

Let's build the same
component using
Polymer...

Bower route

https://codepen.io/tjmonsi/pen/yvaZjw

npm route

https://codepen.io/tjmonsi/pen/aqmMbm

Problems I encountered...

<link rel="import"> is only supported in Chrome (but polyfilled in other browsers)

bower is deprecated in favor of npm

You'll have to use the same Polymer.Element file on all polymer elements to avoid
dom-module conflicts

Future of Templating and tracking property changes...

https://codepen.io/tjmonsi/pen/WMGmjq

What's next?

The race towards below 50KB web-app first-load

Questions

Follow Me