eb.io/p-web-components

ComponentFuture of HTML

Eric Bollens / eric@eb.io / ebollens [GitHub] / @ericbollens [Twitter]

Before We Start...

About This Presentation

The slides from this presentation eb.io/p-web-components

Example code from this presentation github.com/ebollens/p-web-components/tree/gh-pages/ex

This presentation is open source github.com/ebollens/p-web-components

About Me

Chief Technology Officer

Formerly, Open Source Architect

Open source, modern web & IoT evangelist

The Original Vision for HTML

Originally, just text and links

Support added for images and media

Becomes a publishing and marketing medium

By the late 1990's, the web was no longer optional

From Information to Interaction

DotCom era bore a new generation of web tech

eCommerce Social networks Blogs, wikis and podcasts Streaming services

Boom turned to bust, but "Web 2.0" remained

Rich Internet Applications Web-oriented Architecture Social Web

Keeping Up with the Changing Model

HTML suffers from its success

Divitis XHTML, DHTML, ActiveX, Java JavaScript Mega-Frameworks Flash & Silverlight

HTML 5

Structural semantics Interactive features

A larger feature set... but still a discrete one

Beyond Discrete Semantics

Semantics should be

Domain-applicable Expressive Encapsulated Reusable Composable Extensible

Web Components

Custom Elements define new HTML tags

HTML Templates inject dynamic content into static markup structures

Shadow DOM scope markup and styles in a separate DOM tree

HTML Imports import HTML documents into other HTML documents

We'll Also Touch On

ES6 Modules & Module Loading for keeping JavaScript namespaces sane

Polyfills bringing the future to today

A Motivating Example

Data collection @ CloudCompli

Develop software for environmental compliance Workflows driven by inspections & other data collection Compliance isn't simple or accommodating Need a simple definition language for complex forms

We need more than HTML forms offer out-of-the-box

Why Isn't HTML Enough?

HTML forms are flat Hard to represent sets, sub-structures & complex data types

HTML forms are missing controls we need Signatures, geocoding, graphical, etc.

HTML forms are weak on behavioral definitions Conditional applicability, multi-group sets, etc.

A Comparison

The Old Way Most forms over 1k LOC Largest form over 3k LOC Limited reusability Mid-level engineer required

The New Way Largest form less than 1k LOC Control behaviors completely reusable "Intern-ready"

Custom Elements

Basics

var XFoo = document.registerElement('x-foo');

Use within the DOM

<x-foo></x-foo>

Instantiate the element

document.body.appendChild(new XFoo());

More About Registration

var XFoo = document.registerElement('x-foo');

var XFoo = document.registerElement('x-foo', { 
  prototype: Object.create(HTMLElement.prototype) 
});

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

XFooProto.foo = function() { alert('foo() called'); };

XFooProto.bar = 5;

var XFoo = document.registerElement('x-foo', {
  prototype: XFooProto
});

Extending an Element

var MegaButton = document.registerElement('mega-button', { 
  prototype: Object.create(HTMLButtonElement.prototype), 
  extends: 'button'
});

Attributes, methods and callbacks inherited from button

<button is="mega-button">

var megaButton = document.createElement('button', 'mega-button');

[is="mega-button"] { font-size: 2em; }

For Convinience, Setters & Getters

var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.foo = function() { alert('foo() called'); };
XFooProto.bar = 5;
var XFoo = document.registerElement('x-foo', {
  prototype: XFooProto
});

var XFoo = document.registerElement('x-foo', { 
  prototype: Object.create(HTMLElement.prototype, { 
    foo: { 
      value: function() { alert('foo() called'); } 
    },
    bar: { 
      get: function() { return 5; } 
    }
  })
});

Custom Element Lifecycle

createdCallback when instance of element is created

attachedCallback when an instance is inserted into the document

detachedCallback when an instance is removed from the document

attributeChangedCallback(attrName, oldVal, newVal) when an attribute is added, removed or updated

Putting Custom Elements to Work

Latitude Input: Custom Callback

<input is="type-lat" name="latitude">

var initializeInputTypeLat = function(){
  var self = this;
  self.type = 'number';
  self.min = -90;
  self.max = 90;
  self.step = 'any';
  navigator.geolocation.getCurrentPosition(function(position){
    self.value = position.coords.latitude;
  });
}

document.registerElement('type-lat', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype, {
    attachedCallback: {
      value: initializeInputTypeLat
    }
  })
});

Nested Data

<form is="hierarchical-form" action="/report" method="POST">
    <input type="text" name="title">
    <fieldset is="control-group" data-name="location">
        <legend>Location</legend>
        <input is="type-lat" name="latitude">
        <input is="type-lng" name="longitude">
    </fieldset>
    <input type="submit">
</form>

{
    "title": "Example",
    "location": {
        "latitude": "34.068077", 
        "longitude": "-118.442542"
    }
}

Control Group

<fieldset is="control-group" data-name="location">
    <legend>Location</legend>
    <input is="type-lat" name="latitude">
    <input is="type-lng" name="longitude">
</fieldset>

group.value == {
    "latitude": "34.068077", 
    "longitude": "-118.442542"
}

control-group as a meta-field It's value should be an object of sub-fields It's name should be used for form data or in a parent group

Control Group: Value Getter

document.registerElement('control-group', {
  extends: 'fieldset',
  prototype: Object.create(HTMLFieldSetElement.prototype, {
    value: {
      get: getValueForControlGroup
    }
  })
});

var getValueForControlGroup = function(){
    var values = {};
    $(this).find(processableSelector)
           .not($(this).find(exclusionSelector))
           .each(function(){
        var name = $(this).attr('name');
        if(name && this.value !== undefined){
            values[name] = this.value;
        }
    });
    return values;
}

Control Group: Name

data-name attribute for fieldset name

document.registerElement('control-group', {
  extends: 'fieldset',
  prototype: Object.create(HTMLFieldSetElement.prototype, {
    value: {
      get: getValueForControlGroup
    },
    name: {
      get: function(){
        return $(this).attr('data-name');
      },
      set: function(value){
        $(this).attr('data-name', value);
      }
    }
  })
});

Control Group: Value Setter

document.registerElement('control-group', {
  extends: 'fieldset',
  prototype: Object.create(HTMLFieldSetElement.prototype, {
    value: {
      get: getValueForControlGroup,
      set: setValueForControlGroup
    },
    /* .. */
  })
});

var setValueForControlGroup = function(){
    $(this).find(processableSelector)
       .not($(this).find(exclusionSelector))
       .each(function(){
            var name = this.name;
            if(value[name])
                this.value = value[name]
    });
}

Form: Values

form.value == {
    "title": "Example",
    "location": {
        "latitude": "34.068077", 
        "longitude": "-118.442542"
}   }

form.value = {
    "some-group": {
        "some-field": "some value"
}   }

document.registerElement('hierarchical-form', {
    extends: 'form',
    prototype: Object.create(HTMLFormElement.prototype, {
        value: {
            get: getValueForControlGroup,
            set: setValueForControlGroup
        }
    })
});

Form: Submission

<form is="hierarchical-form" action="server/submit.php" method="POST"
      data-success="server/success.php" data-error="server/error.php">

document.registerElement('hierarchical-form', {
    extends: 'form',
    prototype: Object.create(HTMLFormElement.prototype, {
        attachedCallback: {
            value: function(){ overrideFormSubmitHandler(this); }
}   })  });

var overrideFormSubmitHandler = function(form){
    $(form).submit(function(e){ 
        e.preventDefault();
        $.ajax({ url: $(form).attr('action'),
                 method: $(form).attr('method'),
                 data: JSON.stringify(form.value),
                 contentType: 'application/json; charset=utf-8',
                 success: function(){ 
                     window.location = $(form).attr('data-success'); },
                 error: function(){ 
                     window.location = $(form).attr('data-error'); }
})  })  };

Getting Organized

Quickly Becoming a Mess

(function(){
    
    var processableFields = [
            'input', 
            'textarea', 
            'select', 
            'fieldset[is="control-group"]'
        ],
        processableSelector = processableFields.join(', '),
        exclusionSelector = processableFields
            .map(function(f){ 
                return 'fieldset[is="control-group"] '+f; 
            }).join(', ');
    
    var HierarchicalGroupValueProperties = {
        value: {
            get: function(){
                
                var values = {}

                $(this).find(processableSelector)
                       .not($(this).find(exclusionSelector))
                       .each(function(){
                    var name = this.name;
                    if(name && this.value !== undefined){
                        values[name] = this.value;
                    }
                });

                return values;
            },
            set: function(value){
                
                $(this).find(processableSelector)
                       .not($(this).find(exclusionSelector))
                       .each(function(){
                    var name = this.name;
                    if(value[name])
                        this.value = value[name]
                });
                
            }
        }
    }
    
    window.HierarchicalFormElement = document.registerElement(
            'hierarchical-form', {
        extends: 'form',
        prototype: Object.create(HTMLFormElement.prototype, 
                $.extend({}, HierarchicalGroupValueProperties, {
            attachedCallback: {
                value: function(){
                    var form = this;
                    $(this).submit(function(e){
                        e.preventDefault();
                        $.ajax({
                            url: $(form).attr('action') 
                                    ? $(form).attr('action') 
                                    : '#',
                            method: $(form).attr('method') 
                                    ? $(form).attr('method') 
                                    : 'GET',
                            data: JSON.stringify(form.value),
                            contentType: 
                                'application/json; charset=utf-8',
                            success: function(){ 
                                if($(form).attr('data-success'))
                                    window.location = 
                                        $(form).attr('data-success'); 
                            },
                            error: function(){ 
                                console.log(arguments)
                                if($(form).attr('data-error'))
                                    window.location = 
                                        $(form).attr('data-error'); 
                            }
                        })
                    })
                }
            }
        }))
    });

    window.ControlGroupElement = document.registerElement(
            'control-group', {
        extends: 'fieldset',
        prototype: Object.create(HTMLFieldSetElement.prototype, 
                $.extend({}, HierarchicalGroupValueProperties, {
            name: {
                get: function(){
                    return $(this).attr('data-name');
                },
                set: function(value){
                    $(this).attr('data-name', value);
                }
            }
        }))
    });

    window.InputTypeLatElement = document.registerElement(
            'type-lat', {
        extends: 'input',
        prototype: Object.create(HTMLInputElement.prototype, {
            attachedCallback: {
                value: function(){
                    var self = this;
                    self.type = 'number';
                    self.min = -90;
                    self.max = 90;
                    self.step = 'any';
                    navigator.geolocation.getCurrentPosition(
                        function(position){
                            self.value = position.coords.latitude;
                        });
                }
            }
        })
    });

    window.InputTypeLngElement = document.registerElement(
            'type-lng', {
        extends: 'input',
        prototype: Object.create(HTMLInputElement.prototype, {
            attachedCallback: {
                value: function(){
                    var self = this;
                    self.type = 'number';
                    self.min = -180;
                    self.max = 180;
                    self.step = 'any';
                    navigator.geolocation.getCurrentPosition(
                        function(position){
                            self.value = position.coords.longitude;
                        });
                }
            }
        })
    });
    
})()

Partial Loading

Great for resources

But historically bad for HTML

AJAX <iframe> Hacks (overloading <script>, hiding in comments, etc.)

HTML Imports

<link rel='import' href='elements/fieldset_control-group.html'>

<script type='text/javascript' src="../libraries/jquery.js"></script>
<script type='text/javascript'>
document.registerElement('control-group', {
    /* .. */
});
</script>

Support for recursion

<link rel='import' href='elements.html'>

<link rel='import' href='elements/form_hierarchical-form.html'>
<link rel='import' href='elements/fieldset_control-group.html'>
<link rel='import' href='elements/input_type-lat.html'>
<link rel='import' href='elements/input_type-lng.html'>

Namespace Chaos

Multiple elements may need the same routines

var HierarchicalGroupValue = (function(){

    var processableFields = [
            'input', 
            'textarea', 
            'select', 
            'fieldset[is="control-group"]'
        ],
        processableSelector = processableFields.join(', '),
        exclusionSelector = processableFields
            .map(function(f){ 
                return 'fieldset[is="control-group"] '+f; 
            }).join(', ');

    return {
        get: function(){

            var values = {}

            $(this).find(processableSelector)
                   .not($(this).find(exclusionSelector))
                   .each(function(){
                var name = this.name;
                if(name && this.value !== undefined){
                    values[name] = this.value;
                }
            });

            return values;
        },
        set: function(){

            $(this).find(processableSelector)
                   .not($(this).find(exclusionSelector))
                   .each(function(){
                var name = this.name;
                if(value[name])
                    this.value = value[name]
            });

        }
    };

})();

ES6 Modules

var processableFields = ['input', 'textarea', 'select', 'fieldset[is="control-group"]'],
    processableSelector = processableFields.join(', '),
    exclusionSelector = processableFields.map(function(f){ 
            return 'fieldset[is="control-group"] '+f; 
        }).join(', ');
export function get(){ /* .. */ };
export function set(value){ /* .. */ };

import { get } from 'hierarchicalGroupValue';
get.call(element)

import * from 'hierarchicalGroupValue';
hierarchicalGroupValue.get.call(element)

import * from 'hierarchicalGroupValue';
document.registerElement('control-group', {
    extends: 'form',
    prototype: Object.create(HTMLFieldSetElement.prototype, {
        value: hierarchicalGroupValue,
        attachedCallback: { /* .. */ }
    })
});

ES6 Module Loader

System.import('helpers/hierarchical-group-value').then(function(hgv){
    document.registerElement('hierarchical-form', {
        extends: 'form',
        prototype: Object.create(HTMLFormElement.prototype, {
            value: hgv,
            /* .. */
        })
    });
});

Multiple ES6 Modules

Promise.all([
    'helpers/hierarchical-group-value', 'helpers/data-name'
].map(function(m){ return System.import(m) })).then(function(m) {
    var hierarchicalGroupValue = m[0],
        dataName = m[1];
    document.registerElement('control-group', {
        extends: 'fieldset',
        prototype: Object.create(HTMLFieldSetElement.prototype, {
            value: hierarchicalGroupValue,
            name: dataName
        })
    });
});

Templates & Shadow DOM

Multiple Group Control

Multiple sets of the same group of controls and the ability to add more sets

<fieldset is='multi-group-control' data-name='issues'>
    <legend>Issues</legend>
    <fieldset is="control-group">
        <input type='text' name='identifier'>
        <textarea name='description'></textarea>
    </fieldset>
    <fieldset is="control-group">
        <input type='text' name='identifier'>
        <textarea name='description'></textarea>
    </fieldset>
    <!-- .. -->
    <button>+</button>
</fieldset>

Scaffolding the Control

Let's implement a Web Component for this where...

you define a template for the group

<fieldset is='multi-group-control' data-name='issues'>
    <legend>Issues</legend>
    <template>
        <input type='text' name='identifier'>
        <textarea name='description'></textarea>
    </template>
</fieldset>

the value is an array of the group values

[
    { "name": "..", "description": ".." },
    { "name": "..", "description": ".." }
]

Template Element

Inert until activated Markup is hidden and doesn't render until activated

No side-effects Scripts don't run and media isn't retrieved until activated

Not in DOM tree Not selectable by usual DOM methods May be placed anywhere in head, body or frameset

Using Template for Delayed Activation

<button onclick="example()">Use me</button>
<div id="container"></div>

<template> 
  <div>Template used: <span>0</span></div> 
  <script>alert('Foobar!')</script> 
</template>

function example() { 
  var content = document.querySelector('template').content,
      span = content.querySelector('span');

  span.textContent = parseInt(span.textContent) + 1;

  document.querySelector('#container')
          .appendChild(document.importNode(content, true));
}

Generating the Meta-Control

<fieldset is='multi-group-control' data-name='issues'>
    <legend>Issues</legend>
    <template>
        <input type='text' name='identifier'>
        <textarea name='description'></textarea>
    </template>
</fieldset>

attachedCallback: {
    value: function(){
        var control = this;
        this.template = $(this).children('template').get()[0];
        this.container = document.createElement('div');
        $(this).append(this.container);
        this.$button = $('<button>').attr('type', 'button')
                            .text('+')
                            .click(function(){
                                control.addControlGroup();
                             })
                            .appendTo(this);
    }
}

Generating a Control Group

<fieldset is='multi-group-control' data-name='issues'>
    <legend>Issues</legend>
    <template>
        <input type='text' name='identifier'>
        <textarea name='description'></textarea>
    </template>
</fieldset>

addControlGroup: {
    value: function(value){
        var clone = document.importNode(this.template.content, true),
            $newGroup = $('<fieldset is="control-group">');

        $newGroup.append(clone);
        $(this.container).append($newGroup);

        if(value !== undefined)
            $newGroup.get()[0].value = value;
    }
}

The Meta-Group's Getter & Setter

[
    { "name": "..", "description": ".." },
    { "name": "..", "description": ".." }
]

get: function(){
    var groups = [];
    $(this.container).children().each(function(){
        groups.push(this.value);
    });
    return groups;
}

set: function(values){
    values.forEach(function(value){
        this.addControlGroup(value);
    }, this);
}

Leaky Implementation Details

What about namespace clashes?

If we use a class in our widget, external definitions might leak in

When building and using widgets, we want to...

Encapsulate implementation details Isolate from exterior styles and behaviors

We need to isolate the widget's DOM tree

Shadow DOM

this.container = document.createElement('div');

$(this).append(this.container);

var shadowContainer = document.createElement('div'),
    shadow = shadowContainer.createShadowRoot();

this.container = shadow;

$(this).append(shadowContainer);

<div>
    #shadow-root
        <fieldset is="control-group"><!-- .. --></fieldset>
        <!-- .. -->
</div>

A Lot More Than This

Styling shadow DOM trees

:host(:hover) { /* .. */ }
:host-context(.my-ctx) { /* .. */ }

[is="multi-group-control"] > ::shadow > [is="control-group"] {/* .. */}

Projecting content

<div is="name-badge">
  <span class="f">Eric</span>
  <span class="l">Bollens</span>
</div>

<template> 
  Hi! My name is
  <br><content select=".l"></content>, <content select=".f"></content>
</template>

Use with Caution!

Shadow DOM & template polyfills have to wrap... Document, Window, Element, XMLHttpRequest, Node, NodeList, DOMTokenList, FormData, WebGLRenderingContext, Selection, and another 25 or so elements...

Oh, and functions like... createElement, createEvent, getElementById, getSelection, querySelector, querySelectorAll, and another 15 or so core ones...

We love Web Components at CloudCompli, but... we do not yet use template and Shadow DOM

Experiences from the Real World

This Stuff Isn't Easy

3 rewrites and 100 hours on our form components But estimated savings producing forms over 10x that

Edge cases and race conditions Event model and asynchronous loading get messy fast

Performance can be tough You're in the DOM node initialization process

Browser bugs/inconsistencies and limited debugging The browsers aren't doing this all right yet either

Browser Support, Polyfills and Failings

You are on the bleeding edge But browsers are fixing bugs and shipping more

Polyfills do pretty good with most of this But pieces of it are definitely not for the feint of heart

Web Components Polyfill github.com/WebComponents/webcomponentsjs

ES6 Modules github.com/ModuleLoader/es6-module-loader github.com/google/traceur-compiler

Great Promise for the Future

We've only scratched the surface So many more features and yet unforeseen outcomes

Makes HTML future-proof Allows us to define our own domain-specific elements

Start using Web Components today webcomponents.org customelements.io component.kitchen

Thank You

Any Questions?