Embed Size (px)
DESCRIPTION
Presented on June 9th 2014 at the Orchard Harvest 2014 event which was held at Microsoft's HQ in Redmond, WA. Many technologies, past and present have tried to "componentize" HTML. Each with their own implementations and approaches. Web Components are a standard implementation backed by the W3C that aim to tackle this. Polymer is a library from Google that sits on top of Web Components and makes the creation of custom elements a lot easier. The presentation, talks on how Web Components & Polymer can be used within Orchard CMS.
Citation preview
© 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
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
