Orchard Harvest 2014 - The Future of Widgets?

© 2014 Orchard Harvest Redmond – WA - 2014
Future of Widgets?
Web Components, Polymer and Orchard
Steve Taylor - Avastec

Ch 14: Adding Behaviors and HTML Components

“Element behaviors are one of the most
significant new capabilities in Microsoft
Internet Explorer 5.5.
They provide the capability to define custom
elements, which can be used in the same way
as normal HTML elements in a Web page. “
source: MDSN - About Element Behaviors

HTML Components Example
<public:component tagname="checkers">
<public:property name="boardWidth" />
<public:method name="newGame()" />
<public:attach event="onmouseover" onevent="mouseover()" />
</public:component>
<script language="Javascript">
function newGame() {
// insert code to initialize a new game here
}
function mouseover() {
// insert code to handle mouseover events
}
</script>
HTML

ASP.NET Server Controls
<asp:button runat="server" id="Button1" />
ASP.NET
<input type="button" id="Button1" />
HTML

AngularJS Directives
<script>
var app = angular.module('myapp', []);
app.directive('helloWorld', function () {
return {
restrict: 'E',
replace: 'true',
template: '<h3>Hello World!</h3>'
};
});
</script>
JavaScript
<hello-world /> HTML
<h3>Hello World!</h3> HTML

Web Components

“Web Components comprises of a set of
emerging standards which are aimed at
making encapsulated and reusable HTML
widgets or components.”

In a nutshell...
<awesome-button text="Pure Awesome!"></awesome-button>
HTML

Bootstrap Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
...
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
HTML

Custom Carousel Element
<my-carousel indicators="true">
<my-slide>...</my-slide>
</my-carousel>
HTML

Web Components consist of:
Custom Elements, which let authors define their own elements,
with new tag names and new script interfaces.
HTML Templates, which define chunks of markup that are inert
but can be activated for use later.
Shadow DOM, which encapsulates a DOM subtree for more
reliable composition of user interface elements.
HTML Imports, which defines how templates and custom
elements are packaged and loaded as a resource.

Custom Elements

Creating Custom Elements
var awesomeButton = document.registerElement('awesome-button');
// Registered elements become a HTMLElement instead of a HTMLUnknownElement
JavaScript
<element name="awesome-button" constructor="awesomeButton">
...
</element>
HTML
<awesome-button></awesome-button>
HTML

Extending Existing Elements
var awesomeButton = document.registerElement('awesome-button', {
prototype: Object.create(HTMLButtonElement.prototype)
});
JavaScript
<element name="awesome-button" extends="button" constructor="awesomeButton">
...
</element>
HTML
<button is="awesome-button"></button>
HTML

Lifecycle Event Callbacks
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback(attrName, oldVal, newVal)

HTML Templates

Declaring a Template
<template>
<button>Pure Awesome!</button>
</template>
HTML
Parsed but not rendered
Scripts not executed
Media not loaded or played
Hidden from main document

Using a Template
<element name="awesome-button">
<template>
</template>
<script>...</script>
</element>
HTML

Shadow DOM

Using Shadow DOM
<awesome-button>
#document-fragment
</awesome-button>
Composed Element
<awesome-button>...</awesome-button>
<script>
var shadow = document.querySelector('awesome-button').createShadowRoot();
shadow.innerHTML = '<button>Pure Awesome!</button>';
</script>
Custom Element

Shadow DOM is All Around Us

Using Shadow DOM with Templates
<template>
<style>
:host {
background-color: red;
}
</style>
</template>
<script>
var template = document.querySelector('template');
this.register({ prototype: {
createdCallback: function() {
this.createShadowRoot().appendChild(template.content.cloneNode(true));
}
}});
</script>
</element>
Custom Element

HTML Imports

Using HTML Imports
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="awesome-button.html" />
</head>
<body>
<awesome-button text="Pure Awesome!"></awesome-button>
</body>
</html>
HTML

Importing Inside Your Element
<link rel="import" href="awesome-tooltip.html" />
<template>
<button id="my-button">Pure Awesome!</button>
<awesome-tooltip target="my-button">
<span>Press the button to see some awesomeness</span>
</awesome-tooltip>
</template>
...
</element>
awesome-button.html

Current Browser Support

Layers of Polymer

Layers of Polymer
Native
The current browser landscape

Layers of Polymer
Native
Platform
Web Components polyfills for all
Modern browsers

Layers of Polymer
Native
Platform
Modern browsers
Polymer
An opinionated way to work with Web
Components

Layers of Polymer
Native
Platform
Modern browsers
Polymer
An opinionated way to work with Web
Components
Elements
Reusable custom elements (in progress)

Why use Polymer?
Less boilerplate code
Simple element registration
Declarative databinding
Declarative event mapping
Published attributes
Change watchers
Automatic node finding

Polymer Example
<link rel="import" href="polymer.html" />
<polymer-element name="awesome-button">
<template>
...
</template>
</polymer-element>
awesome-button.html
<script src="platform.min.js"></script>
<link rel="import" href="awesome-button.html" />
<awesome-button></awesome-button>
HTML

DEMO

Special thanks to…
Eric Bidelman, Rob Dodson, Addy Osmani, Matthew McNulty
….and the rest of the Polymer team

Thanks!
Twitter: @stevetayloruk
LinkedIn: linkedin.com/in/stevetayloruk
Github: github.com/stevetayloruk

Orchard Harvest 2014 - The Future of Widgets?

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Orchard Harvest 2014 - The Future of Widgets? (20)

Recently uploaded (20)

Orchard Harvest 2014 - The Future of Widgets?