Web components the future is here

Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek

Web Components - The Future is

Here

Gil Fink

CEO and Senior Consultant, sparXys


The Pyramid of Doom


About Me • sparXys CEO and Senior consultant

• ASP.NET/IIS Microsoft MVP

• Co-author of Pro Single Page Application

Development (Apress)

• Co-author of 4 Microsoft Official Courses (MOCs)

Agenda • The problems we face

• Web Components APIs o Templates

o Imports

o Shadow DOM

o Custom Elements

• Libraries to the rescue



1. Undescriptive Markup

Markup Example


2. Poor Separation of Concerns

You want HTML, CSS and JavaScript to work together

You end up with a mess

The wiring gets in your way!


3. No Native Templates • Store HTML in hidden DOM element and show it

• Use script tag as a template holder:

<script id=”myTemplate” type=”text/template”> <div> … </div> </script>


4. No Bundling • You want to bundle a complex component

The component includes HTML, CSS and JavaScript

how would you do that? o Use a server side wrapping mechanism?


Web Components to the Rescue

• A set of standards designed to componentize the

web

• Some general goals:

Code Reuse Encapsulation Separation of

Concerns Composition Theming Expressive Semantic


The Web Components Standards

• Reusable DOM fragments Templates

• Load HTML declaratively Imports

• DOM encapsulation Shadow DOM

• Create your own elements Custom

Elements


Setting The Environment • Browsers have only partial support for Web

Components o So we use the webcomponents.js Polyfill for Web Components

• Download: o https://github.com/webcomponents/webcomponentsjs/

o Or install using your favorite package manager (Bower, Nuget)

• Make sure the Polyfill script runs first

https://github.com/webcomponents/webcomponentsjs/

https://github.com/webcomponents/webcomponentsjs/


Demo Setting the environment


Let’s Drill Down


Templates • A new HTML element – template

• Can be used to instantiate document fragments

• Can wrap HTML, style tags and script tags

• No data binding support

• To use the template you need some JavaScript

magic

<template id=”myTemplate”> <div> … </div> </template>


Cloning a Template • Select the template and extract its content

o Using its content property

• Use the importNode function to get the cloned

content

• Only when the clone is appended to the DOM o The style and JavaScript are executed

o Resources like images are retrieved from the server

var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);


Templates Demo


Imports • Load additional HTML documents

o Without Ajax

• A new type of link tag

• Use the rel attribute with the import type:

<link rel=”import” href=”myImport.html”>


Imports and Bundling • Enable to bundle a full component into one HTML

file o The HTML can include scripts and CSS styles

• The whole bundle can be retrieved in a single call


Imports and The DOM • Importing a document doesn’t include it into the

DOM o It will parse it in memory and load all the additional resources

• Use the import property of the link tag:

var content = document.querySelector(‘link[rel=”import”]’).import;


Imports Demo


Import Additional Notes • Scripts running inside the import can reference the

containing document by calling

document.currentScript.ownerDocument

• CORS constraints apply to documents imported

from other domains


Shadow DOM • Encapsulate DOM parts

o The browser will know how to present those parts

o The browser won’t show the encapsulated parts in the source code

• Creates a boundary between the component and

its user


The Problems Shadow DOM Tries to Solve

• Encapsulation of components/widgets

• Style leakage o Leaks from one component to another

o Leaks from imported 3th party library/framework

• Global DOM o id or class attributes all over the place


Shadow DOM in The Browser

<video src="media/myVideo.mp4" controls></video>

<input type="date">


Show Shadow DOM Elements in Chrome

Demo


Shadow DOM – Cont. • Use the createShadowRoot function to wrap an

element as a shadow DOM:

var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;


Styling Shadow DOM • :host and :host() pseudo-class

• ::content pseudo-element

<div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template>

</div>


Shadow DOM Demo


Custom Elements • Enable to extend or to create custom HTML

elements o The new element must inherit from HTMLElement

• Create a custom element using the registerElement

function:

• Extend an existing element:

var myElement = document.registerElement(‘my-element’);

var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });


Custom Elements – Naming

• You can create named elements (almost) any way

you want: o Same naming rules as other HTML tags

o There must be a dash (“-”) in the name

• To future-proof the name against the HTML standard

• To avoid naming collisions


Custom Elements – Usage • Use the element in your DOM:

or use the createElement function:

<my-input></my-input>

var elm = document.createElement(‘my-input’);


Custom Element Callbacks

• Custom elements have life cycle events:

• createdCallback o Called when an instance is created

• attachedCallback o Called when an instance is added to DOM subtree

• detachedCallback o Called when an instance is removed from a DOM subtree

• attributeChangedCallback o Called after an attribute value changes


Custom Elements Demo


The Current State of Web Components

• Still W3C Working Drafts

• Browser support:

http://caniuse.com/#search=web%20components

• Main libraries:

Polymer X-Tag







Polymer • Components library that is written and maintained

by Google

• Includes o Ability to build your own custom components

o Ready to use web components

• Polymer leverages the web components standard


Polymer Catalog • Full catalog that includes various ready to use

components

• You can look at the component categories here:

https://elements.polymer-project.org/

• Support to Google material design and Google API

components included






Creating Custom Elements in Polymer

<dom-module id="contact-card"> <link rel="import" type="css" href="contact-card.css"> <template> <content></content> <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon> </template> <script> Polymer({ is: 'contact-card', properties: { starred: Boolean } }); </script> </dom-module>


Using The Custom Elements in Polymer

<contact-card starred> <img src="profile.jpg" alt="Gil's photo"> <span>Gil Fink</span> </contact-card>


Polymer Demo


X-Tag • Components library that is supported by Microsoft

• Includes only the ability to write your own custom

components o Ready to use web components can be found in the Brick library

• X-Tag leverages the web components standard


Creating Web Components in X-Tag

xtag.register('x-myelement', { lifecycle: { created: function(){ // do something when the element is created } }, events: { focus: function(){ // do something when the element in focus } }, methods: { someMethod: function(){ // implementation } } });


X-Tag Demo


Questions?

Summary • Web Components are emerging standards that

enables: • Encapsulation

• Separation of Concerns

• Element portability

• And more

• They are still in development

• Taking the web one step forward!



Resources • Download the slide deck:

http://bit.ly/1OCOnbL

• http://webcomponents.org/

https://www.polymer-project.org/1.0/

http://www.x-tags.org/

• My Blog – http://www.gilfink.net

• Follow me on Twitter – @gilfink





http://webcomponents.org/












http://www.gilfink.net/


Thank You!

Technology

Web components the future is here