web components - the future is here
TRANSCRIPT
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Web Components - The Future is
Here
Gil Fink
CEO and Senior Consultant, sparXys
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
The Pyramid of Doom
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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)
• GDG Rashlatz Meetup co-organizer and ng-conf
Israel co-organizer
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:
@SoftArchConf #SoftwareArchitect2015
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
1. Undescriptive Markup
Google+ Example
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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!
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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?
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
The Web Components Standards
• Reusable DOM fragments Templates
• Load HTML declaratively Imports
• DOM encapsulation Shadow DOM
• Create your own elements Custom
Elements
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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 Bower
• Make sure this script runs first
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Let’s Drill Down
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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);
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Templates Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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”>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Imports and Bundling • Enable to bundle a full component into a HTML file
o The HTML can include scripts and CSS styles
• The whole bundle can be retrieved in a single call
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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;
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Imports Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Shadow DOM in The Browser
<video src="media/myVideo.mp4" controls></video>
<input type="date">
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Enabling Chrome to Show Shadow DOM Elements
Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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>’;
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Styling Shadow DOM • :host and :host() pseudo-class
• :host-context() pseudo-class
• ::content pseudo-element
<div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template>
</div>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Shadow DOM Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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’ });
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Custom Elements – Naming
• You can create elements named (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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Custom Elements – Usage • Use the element in your DOM:
or use the createElement function:
<my-input></my-input>
var elm = document.createElement(‘my-input’);
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Custom Elements Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
The Current State of Web Components
• Still W3C Working Drafts
• Browser support:
http://caniuse.com/#search=web%20components
• Main libraries:
Polymer X-Tag
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Using The Custom Elements in Polymer
<contact-card starred> <img src="profile.jpg" alt="Gil's photo"> <span>Gil Fink</span> </contact-card>
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Polymer Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
X-Tag • Components library that is written and maintained
by Mozilla
• 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
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
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 } } });
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
X-Tag Demo
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Questions?
Summary • Web Components are emerging standards that
enables: • Encapsulation
• Separation of Concerns
• Element portability
• And more
• They are still in working drafts
• Taking the web one step forward!
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Resources • Download the slide deck:
• http://webcomponents.org/
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink
Join the conversation on Twitter:
@SoftArchConf #SoftwareArchitect2015
Thank You!