Yehor Lvivski

@lvivski

Web Components

Facebook

Delphi

jQuery Era

$('input').datePicker()

jQuery Cons

Spaghetti
Styles should be added separately
Ease to break

Sencha (ExtJS)

Separate markup tree
Over-verbose
Heavyweight

Twitter

BEM

BEM.block('date-picker', {...}) {block: 'date-picker'}

AngularJS

        angular.directive(
          'mega-tag', function() {
          return {
            restrict: 'E',
            link: function
              (scope, element, attrs)
              {...}
          }
        })

AngularJS

<mega-tag></mega-tag>

ReactJS

        React.createClass({
          render: function() {
            return (<div>
            {this.props.awesome}
            </div>)
          }
        })

W3C

Web Components

<x-button>WASSUP</x-button>

Web Components

<template> — blueprint
Shadow DOM — encapsulation
Custom elements (x-) — toolbelt

Introduction to Web Components

Templates

{{ mustache }} handlebars underscore.js
Jade EJS

HTML is not a String

        <template id="awesome">
          <img src="">
          <div class="title"></div>
        </template>

HTML Templates

        var t = document
    .querySelector('#awesome')
        t.content
    .querySelector('img')
    .src = 'http://...'
        var c = document
    .importNode(t.content, true)
        document.body.appendChild(c)

Shadow DOM

Encapsulation (styles, scripts)
Inserion points
styling hooks (custom pseudo els)
:host selector

w3c spec

Shadow DOM

        <div id="host">
        <h1>Normal DOM</h1>
        </div>

        var shadow = document
    .querySelector('#host')
    .createShadowRoot()
        shadow.innerHTML = '<div>Shadow DOM</div>'

Normal DOM

Shadow Pseudo

        <style>
          #host::x-pseudo {
          color: blue
          }
        </style>
        <div id="host"></div>
        <script>
        document
  .querySelector('#host')
  .createShadowRoot()
  .innerHTML =
  '<div pseudo="x-pseudo">\
  </div>'
        </script>

CSS Variables

        x-tag {
          color: var(tag-color);
          font: var(tag-font)}

        #host {
          var-tag-color: blue;
          var-tag-font: sans-serif}

CSS Custom Properties

        <div id="host">
        <h1>Normal DOM</h1>
        <div>other content</div>
        </div>

        <style>
        h1, h2 {font-size: 25pt}
        </style>
        <content select="h1"></content>
        <h2>sub header<h2>
        <content select="*"></content>

        <template id="tpl">
          <content></content>
        </template>
        <script>
        var XProto = 
    Object.create(HTMLElement.prototype)
        XProto.createdCallback = function() {
          var t = document
      .querySelector('#tpl')
          var c = document
      .importNode(t.content, true)
          this.createShadowRoot().appendChild(c)
        }
        document.register('x-tag', {
         prototype: XProto
        })</script>

        <link rel="import"
  href="x-tag.html">
        <x-tag>
          ...
        </x-tag>

29
24*
17

I want to use it NOW

Thanks

lvivski