Web components the future is here

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

Web Components - The Future is

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:

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

• 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

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

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:

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

Show Shadow DOM Elements in Chrome

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

Thank You!

Web components the future is here

Technology

Nanotechnology: The Future is Here - CIELAP.org · Nanotechnology: The Future is Here ANNUAL REPORT 2006-2007 Advancing the Environmental AgendaPublished in: ChemPhysChem · 2012Authors:

Demoiselle Components Guidedemoiselle.sourceforge.net/docs/components/...Demoiselle Components Guide Demoiselle Components Humberto Pacheco

Aumento de Capacidad Balde Title Here SUBTITLE HERE CAN BE … de Capacidad Balde... · 2019-04-10 · Title Here SUBTITLE HERE CAN BE LONG OR SHORT… DATE HERE MONTH/YYYY Aumento

Designing the Future - Farnell element14 · 2014. 8. 21. · Siemens Matsushita Components 1 Designing the Future Weil viele unterschiedliche elektronische und elektrische Geräte

The Future is Here - ChartNexusir.chartnexus.com/jftech/docs/Annual Report 2019 - Final.pdf · Key Management Profile 20 Corporate Governance Overview Statement 22 Additional Compliance

Web Components - The Future is Here

Future Future

RAIL SOLUTIONS · Our Statement goes here, concept is to bring the new idea and solution to future of world business. Our Statement goes here, concept is to bring the new idea and

Title Goes Here and Here and Here - SAPNOW

17979-074 MADO Stopfwölfe 6S Englisch -WEB · and food direct marketing. The experiences, which were gained here, contribute to the continuous optimization of the machine. All components

INSERT TITLE HERE Insert Secondary Title Here Insert Secondary Title Here Insert Date Here

3D Tensor Field Theory: Renormalization and One-Loop β ...Fields here are deﬁned over several copies of an abstract Lie group which, by Fourier transform, yield tensor components

- w3.tmit.bme.huw3.tmit.bme.hu/.../vitt4100/materials/FeketeZoltan/3_EPM_Hyperion.pdf · & Hyperion BI Components ... Hyperion Planning. Planning – fő

RS Components · RS Components

Aluminium - · PDF fileafc – Entwicklungsalu & future components - und Handels GmbH A-3100 St. Pölten • Porschestraße 23a • Tel.: +43 (0)2742/730 93 • Fax.: +43 (0)2742

Crane-components 950164-Crane-components

DevOps: The Future is Already Here — It’s Just Unevenly Distributed

USE AND CARE GUIDE - Pilot Pen · USE AND CARE GUIDE 3855 Regent ... FOUNTAIN PENS MECHANICAL PENCILS PRESS HERE GEL ROLLER PENS PRESS HERE PRESS HERE PRESS HERE PRESS HERE PRESS

Aluminium - Spezialprofile · afc – Entwicklungsalu & future components - und Handels GmbH A-3100 St. Pölten • Porschestraße 23a • Tel.: +43 (0)2742/730 93 • Fax.: +43 (0)2742/730

Temel Tasarim - Ankara Üniversitesiacikarsiv.ankara.edu.tr/browse/31060/TTBgrubu_merged_document_ik.pdf · Temel Tasarim Your text here. Your text here Your Text Here Your Text Here