Still got your Skate on

Trey (Z) Shugart

DogeScripter, Atlassian

@treshugart

slides.com/treshugart/still-got-your-skate-js-on/live

skate.js

Skate

Web component library focusing on the custom element spec.

• Tag, attribute and class bindings
• Element lifecycle handlers
• Attribute lifecycle handlers
• Event binding and delegation
• Templating support
• Works in IE9+
• Super fast, super tiny

Custom Elements

Tag bindings

<my-component></my-component>

skate('my-component', {
  ...
});

Existing Elements

"is" attribute bindings

<div is="my-component"></div>

skate('my-component', {
  extends: 'div',
  ...
});

Attributes

Attribute bindings

<div my-component></div>
<span my-component></span>
<a my-component></a>
...

skate('my-component', {
  type: skate.types.ATTR
  ...
});

skate('my-component', {
  type: skate.types.ATTR
  extends: 'div',
  ...
});

Classes

Class bindings

<div class="my-component"></div>
<span class="my-component"></span>
<a class="my-component"></a>
...

skate('my-component', {
  type: skate.types.CLASS
  ...
});

skate('my-component', {
  type: skate.types.CLASS
  extends: 'div',
  ...
});

Element Lifecycle

Lifecycle callbacks

var MyComponent = skate('my-component', {
  created: function (element) {},
  attached: function (element) {},
  detached: function (element) {}
});

// created()
var element = new MyComponent(); // or: document.createElement('my-component')

// attached()
document.body.appendChild(element);

// detached()
element.remove();

// created(), then attached(), in that order
document.body.innerHTML = '<my-component></my-component>';

// detached();
document.body.elements[0].remove();

Custom Methods & Properties

document.querySelector('bad-doge').bark();

skate('bad-doge', {
  prototype: {
    bark: function () {
      ...
    }
  }
});

Attribute Lifecycle

Changes to any attribute

skate('my-component' {
  attributes: function (element, data) {}
});

skate('my-component' {
  attributes: {
    'my-attribute': function (element, data) {}
  }
});

skate('my-component' {
  attributes: {
    'my-attribute': {
      created: function (element, data) {},
      updated: function (element, data) {},
      removed: function (element, data) {}
    }
  }
});

Events

Event binding

skate('my-component', {
  events: {
    click: function (element, eventObject) {}
  }
});

skate('my-component', {
  events: {
    'click .selector': function (element, eventObject, currentTarget) {}
  }
});

Templating

Template hook

var template = Handlebars.compile('Hello, {{name}}!');

skate('my-component', {
  template: function (element) {
    element.innerHTML = template({
      name: 'World'
    });
  }
});

Why

Why don't we use:

• Polymer
• Ember
• Angular
• React
• etc

Why

• Size & speed
• Backward compatibility
• Framework agnostic
• Easier to swallow
• Future

Thanks!

github.com/skatejs/skatejs