Web Components

in ES6 ES2015

Andreas Argelius

Nov 18, 2015

Andreas Argelius

Engineer originally from Sweden, recently moved to Japan to work with JavaScript development.

Enjoys studying Japanese, eating good food and drinking beer.

Avid runner currently preparing for Yokohama Marathon.

Onsen UI

Why is it called Onsen UI?

• Onsen (温泉) is Japanese for "hot spring".
• Very popular vacation spot. Both among people and monkeys.
• Can also be translated to "spa".
• SPA is used as an abbreviation of "Single Page Application".

Introducing

Onsen UI 2.0 Beta

onsen.io/2/

• Material Design
• Custom Elements
• Written in ES2015

Some of the features are:

AngularJS

React

Custom Elements

What is

Web Components?

• Custom Elements
• Shadow DOM
• HTML templates
• HTML imports

Creating

Custom Elements

Elements are defined using

document.registerElement(name, options)

It's a very simple API.

Example

  var proto = Object.create(HTMLElement.prototype);

  proto.createdCallback = function() {
    this.innerHTML = 'The Force will be with you.';
    
    setInterval (function () {
      this.innerHTML = this.innerHTML === 
        'Always.' ? 'The Force will be with you.' : 'Always.';
    }.bind(this), 2000);
  };

  document.registerElement('my-fancy-element', {prototype: proto});

Lifecycle callbacks

• createdCallback()

• attachedCallback()

• detachedCallback()

• attributeChangedCallback()

There are four different lifecycle callbacks:

Web Components in the wild

GitHub is using the Custom Elements API.

Browser support

From MDN:

• The current version is 115KB minified.
• The Shadow DOM polyfill requires 70KB.
• We decided to use only use the Custom Elements API in Onsen UI. It's 16.4KB.

• Too big. Far too big.
• HTML imports doesn't fit into build pipeline.
• Shadow DOM doesn't solve anything that proper namespacing does not.
• JavaScript strings work fine as templates.

ES2015

The language formerly known as ES6

• New JavaScript standard finalized this year.
• Currently not 100% supported in browsers.

• Classes. "class" has been a reserved word for a long time now. Finally it has some use.
• Arrow functions. Another way to define functions.
• Spread operator, Promises, etc.

ES6 classes

class Person {
  constructor(name = 'Andreas') {
    this.name = 'Andreas';
  }

  get name() {
    return this._name;
  }

  set name(n) {
    if (typeof n !== 'string') {
      throw new Error('Name must be a string.');
    }

    this._name = n;
  }

  greeting() {
    alert(`Hello! My name is ${this.name}!`);
  }
}

Introduces constructor, getters, setters, default arguments.

Arrow functions

let add = (a, b) => {
  return a + b;
};

// Even shorter
add = (a, b) => a + b;

// Nice in functional expressions.

let lengths = names.map((n) => n.length);

// Before
lengths = names.map(function(n) {
  return n.length;
});

Yet another way to define functions in JavaScript!

Binds lexical scope

ES2015 features not yet implemented in all browsers!

Babel

Babel will translate ES2015 code into code that can be interpreted and executed by all modern browers.

Wouldn't it be great if we could make Custom Elements as class instances?

Sample app

argelius.github.io/star-rating/

Source is available on GitHub

github.com/argelius/star-rating

class StarRating extends HTMLElement {
  createdCallback() {
    const template = doc.querySelector('template') || document.createElement('template');
    const clone = document.importNode(template.content, true);

    this.createShadowRoot();
    this.shadowRoot.appendChild(clone);

    this._createStars().forEach((star) => {
      this.shadowRoot.appendChild(star);
    });

    this._colorStars();
  }

  attributeChangedCallback(name, from, to) {
    if (name === 'value') {
      this._colorStars();
    }
  }

  get value() {
    const v = parseFloat(this.getAttribute('value') || 0);
    if (!(v >= 0)) {
      return 0;
    }
    return v;
  }

  set value(v) {
    if (!(parseFloat(v) >= 0)) {
      throw new Error('Value must be a number larger or equal to 0.');
    }

    this.setAttribute('value', v);
  }

  get max() {
    return parseInt (this.getAttribute ('max') || 5);
  }

  set max(v) {
    throw new Error('The maximum value can\'t be changed.');
  }

  get _stars() {
    return Array.from(this.shadowRoot.childNodes)
      .filter ((node) => node.nodeName.toLowerCase () === 'span');
  }

  _createStars() {
    const stars = [];

    for (let i = 0; i < this.max; i++) {
      const star = document.createElement('span');
      star.innerHTML = '★';
      stars.push(star);

      const innerStar = document.createElement('span');
      innerStar.innerHTML = '★';
      star.appendChild(innerStar);
    }

    return stars;
  }

  _colorStars() {
    const value = this.value;
    let p;

    for (var i = 0; i < this.max; i++) {
      const star = this._stars[i];
      const innerStar = star.children[0];

      if (i + 1 <= value) {
        innerStar.style.width = '100%';
      }
      else {
        innerStar.style.width = 0;
      }

      p = value - i;

      if (p > 0 && p < 1) {
        innerStar.style.width = p * 100 + '%';
      }
    }
  }
}


window.StarRatingElement = document.registerElement('star-rating', StarRating);

Unit tests with Karma

Thank you for listening!