Web components the future is here

A session I delivered in DevWeek 2016 conference. The session explains the Web Components API and later on delve into Polymer and x-tag.

1. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Web Components - The Future is
Here
Gil Fink
CEO and Senior Consultant, sparXys

2. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
The Pyramid of Doom

3. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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)

4. Agenda
•The problems we face
•Web Components APIs
oTemplates
oImports
oShadow DOM
oCustom Elements
•Libraries to the rescue



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

5. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
1. Undescriptive Markup
Markup Example

6. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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!

7. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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>

8. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
4. No Bundling
•You want to bundle a complex component

The component includes HTML, CSS and JavaScript

how would you do that?
oUse a server side wrapping mechanism?

9. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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

10. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
The Web Components
Standards
•Reusable DOM fragments Templates
•Load HTML declaratively Imports
•DOM encapsulation Shadow DOM
•Create your own elements
Custom
Elements

11. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Setting The Environment
•Browsers have only partial support for Web
Components
oSo we use the webcomponents.js Polyfill for Web Components
•Download:
ohttps://github.com/webcomponents/webcomponentsjs /
oOr install using your favorite package manager (Bower, Nuget)
•Make sure the Polyfill script runs first

12. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Demo
Setting the environment

13. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Let’s Drill Down

14. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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>

15. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Cloning a Template
•Select the template and extract its content
oUsing its content property
•Use the importNode function to get the cloned
content
•Only when the clone is appended to the DOM
oThe style and JavaScript are executed
oResources like images are retrieved from the server
var template = document.querySelector(‘#myTemplate’);
var clone = document.importNode(template.content, true);

16. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Templates
Demo

17. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Imports
•Load additional HTML documents
oWithout Ajax

•A new type of link tag
•Use the rel attribute with the import type:
<link rel=”import” href=”myImport.html”>

18. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Imports and Bundling
•Enable to bundle a full component into one HTML
file
oThe HTML can include scripts and CSS styles
•The whole bundle can be retrieved in a single call

19. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Imports and The DOM
•Importing a document doesn’t include it into the
DOM
oIt 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;

20. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Imports
Demo

21. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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

22. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Shadow DOM
•Encapsulate DOM parts
oThe browser will know how to present those parts
oThe browser won’t show the encapsulated parts in the source code
•Creates a boundary between the component and
its user

23. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
The Problems Shadow
DOM Tries to Solve
•Encapsulation of components/widgets
•Style leakage
oLeaks from one component to another
oLeaks from imported 3th party library/framework
•Global DOM
oid or class attributes all over the place

24. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Shadow DOM in The
Browser




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

25. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Show Shadow DOM
Elements in Chrome
Demo

26. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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>’;

27. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Styling Shadow DOM
•:host and :host() pseudo-class
•::content pseudo-element
<div name="myElement">
<style>
:host {
border: 1px solid lightgray;
}
</style>
<template>...</template>
</div>

28. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Shadow DOM
Demo

29. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Custom Elements
•Enable to extend or to create custom HTML
elements
oThe 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’
});

30. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Custom Elements –
Naming
•You can create named elements (almost) any way
you want:
oSame naming rules as other HTML tags
oThere must be a dash (“-”) in the name
•To future-proof the name against the HTML standard
•To avoid naming collisions

31. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Custom Elements – Usage
•Use the element in your DOM:



or use the createElement function:

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

32. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Custom Element
Callbacks
•Custom elements have life cycle events:
•createdCallback
oCalled when an instance is created

•attachedCallback
oCalled when an instance is added to DOM subtree

•detachedCallback
oCalled when an instance is removed from a DOM subtree

•attributeChangedCallback
oCalled after an attribute value changes

33. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Custom Elements
Demo

34. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
The Current State of Web
Components
•Still W3C Working Drafts
•Browser support:
http://caniuse.com/#search=web%20components
•Main libraries:
Polymer X-Tag

35. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Polymer
•Components library that is written and maintained
by Google
•Includes
oAbility to build your own custom components
oReady to use web components
•Polymer leverages the web components standard

36. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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

37. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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>

38. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Using The Custom
Elements in Polymer

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

39. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Polymer
Demo

40. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
X-Tag
•Components library that is supported by Microsoft
•Includes only the ability to write your own custom
components
oReady to use web components can be found in the Brick library
•X-Tag leverages the web components standard

41. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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
} }
});

42. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
X-Tag
Demo

43. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Questions?

44. 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!
Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek

45. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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

46. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Thank You!