CNIC Information System with Pakdata Cf In Pakistan
Web components the future is here
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
o Templates
o Imports
o Shadow DOM
o Custom 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?
o Use 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 fragmentsTemplates
•Load HTML declarativelyImports
•DOM encapsulationShadow 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
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
12. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
Demo
Setting the environment
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
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);
17. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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”>
18. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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
19. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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;
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
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
23. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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
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>
29. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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’
});
30. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
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
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
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
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
o Ability to build your own custom components
o Ready 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>
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
o Ready 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
} }
});
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