Orchard Harvest 2014 - The Future of Widgets?

© 2014 Orchard Harvest Redmond – WA - 2014

Future of Widgets?Web Components, Polymer and Orchard

Steve Taylor - Avastec

© 2014 Orchard Harvest Redmond – WA - 2014

Ch 14: Adding Behaviors and HTML Components

© 2014 Orchard Harvest Redmond – WA - 2014

“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

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

ASP.NET Server Controls

<asp:button runat="server" id="Button1" />

ASP.NET

<input type="button" id="Button1" />

HTML

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

Web Components

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

In a nutshell...

<awesome-button text="Pure Awesome!"></awesome-button>

HTML

© 2014 Orchard Harvest Redmond – WA - 2014

Bootstrap Carousel<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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

© 2014 Orchard Harvest Redmond – WA - 2014

Custom Carousel Element

<my-carousel indicators="true"> <my-slide>...</my-slide> <my-slide>...</my-slide> <my-slide>...</my-slide></my-carousel>

HTML

© 2014 Orchard Harvest Redmond – WA - 2014

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.

© 2014 Orchard Harvest Redmond – WA - 2014

Custom Elements

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

Lifecycle Event Callbacks

createdCallback

attachedCallback

detachedCallback

attributeChangedCallback(attrName, oldVal, newVal)

© 2014 Orchard Harvest Redmond – WA - 2014

HTML Templates

© 2014 Orchard Harvest Redmond – WA - 2014

Declaring a Template

<template> <button>Pure Awesome!</button></template>

HTML

Parsed but not renderedScripts not executedMedia not loaded or playedHidden from main document

© 2014 Orchard Harvest Redmond – WA - 2014

Using a Template

<element name="awesome-button"> <template> <button>Pure Awesome!</button> </template> <script>...</script></element>

HTML

© 2014 Orchard Harvest Redmond – WA - 2014

Shadow DOM

© 2014 Orchard Harvest Redmond – WA - 2014

Using Shadow DOM

<awesome-button> #document-fragment <button>Pure Awesome!</button></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

© 2014 Orchard Harvest Redmond – WA - 2014

Shadow DOM is All Around Us

© 2014 Orchard Harvest Redmond – WA - 2014

Using Shadow DOM with Templates<element name="awesome-button"> <template>

<style> :host { background-color: red; } </style> <button>Pure Awesome!</button> </template> <script> var template = document.querySelector('template'); this.register({ prototype: { createdCallback: function() { this.createShadowRoot().appendChild(template.content.cloneNode(true)); } }}); </script></element>

Custom Element

© 2014 Orchard Harvest Redmond – WA - 2014

HTML Imports

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

Importing Inside Your Element

<link rel="import" href="awesome-tooltip.html" />

<element name="awesome-button"> <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

© 2014 Orchard Harvest Redmond – WA - 2014

Current Browser Support

© 2014 Orchard Harvest Redmond – WA - 2014

© 2014 Orchard Harvest Redmond – WA - 2014

Layers of Polymer

© 2014 Orchard Harvest Redmond – WA - 2014

Layers of Polymer

NativeThe current browser landscape

© 2014 Orchard Harvest Redmond – WA - 2014

Layers of Polymer

NativeThe current browser landscape

PlatformWeb Components polyfills for allModern browsers

© 2014 Orchard Harvest Redmond – WA - 2014

Layers of Polymer

NativeThe current browser landscape

PlatformWeb Components polyfills for allModern browsers

PolymerAn opinionated way to work with WebComponents

© 2014 Orchard Harvest Redmond – WA - 2014

Layers of Polymer

NativeThe current browser landscape

PlatformWeb Components polyfills for allModern browsers

PolymerAn opinionated way to work with WebComponents

ElementsReusable custom elements (in progress)

© 2014 Orchard Harvest Redmond – WA - 2014

Why use Polymer?

Less boilerplate codeSimple element registrationDeclarative databindingDeclarative event mappingPublished attributesChange watchersAutomatic node finding

© 2014 Orchard Harvest Redmond – WA - 2014

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

© 2014 Orchard Harvest Redmond – WA - 2014

DEMO

© 2014 Orchard Harvest Redmond – WA - 2014

Special thanks to…Eric Bidelman, Rob Dodson, Addy Osmani, Matthew McNulty

….and the rest of the Polymer team

© 2014 Orchard Harvest Redmond – WA - 2014

Thanks!Twitter: @stevetayloruk

LinkedIn: linkedin.com/in/stevetayloruk

Github: github.com/stevetayloruk