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
  ...
});

Restrict to <div>

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
  ...
});

Restrict to <div>

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) {}
});

Specific attributes

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

specific changes to an attribute

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) {}
  }
});

and delegation

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

Made with Slides.com