Why you should be using Web Components. And How - DevWeek 2015

Why you should be using Web
Components Now. And How.
PHIL @LEGGETTER
Head of Evangelism
2 / 145

What we'll cover
What are Web Components?
State of native support
Componentised Web Apps now
Why Web Components are the future!
3 / 145

What we'll cover
State of native support
Componentised Web Apps now
Why Web Components are the future!
♥ Eric Bidelman's Google IO 2014 talk ♥
4 / 145

5 / 145

Custom Elements
HTML Templates
Shadow DOM
HTML Imports
6 / 145

<button>Click Me</button> Click Me
<input type="text" />
<input type="number" />
<input type="password" /> They all look the same
<select>
<option>Select Me</option>
<option>Dude</option>
</select>
Select Me
<label>Check Me</label>
<input type="checkbox" />
Check Me
Right Now - Elements
a, b, blockquote, body, br, code, div, em, fieldset, h1, h2, hr, img, li, ol, p, pre, span,
strong, style, table, tr, td, ...
8 / 145

<header>I'm a header</header> Stuff around sections or grouping content e.g. main, nav,
footer, figure, article, asideetc.
<progress />
Form improvements e.g. meter, datalist, keygen,
output
<video />
Embedded content e.g. audio, canvas, svg, math
HTML5 Elements
9 / 145

Elements - Structure & Meaning
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Elements</title>
<meta name="description" content="" />
<link rel="stylesheet" href="css/stylez.css" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
<header>
<p>Hello world! This (part of) is HTML5 Boilerplate.</p>
</header>
<main>
<article>Ohhhh. Interesting</article>
</main>
<footer>© me</footer>
<script src="js/script.js"></script>
</body>
</html>
10 / 145

The Solution:
<Custom Elements />
13 / 145

The Solution:
<Custom Elements />
More than just markup
IMHO the most important part of Web
Components
14 / 145

Custom Elements: A new Gmail
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A new Gmail?</title>
<meta name="description" content="">
</head>
<body>
15 / 145

<!doctype html>
<html>
<head>
</head>
<body>
<header>
<img src="img/logo.png" alt="Google Logo" />
<gmail-search />
<gmail-account-strip />
</header>
16 / 145

<!doctype html>
<html>
<head>
</head>
<body>
<header>
<gmail-search />
</header>
<gmail-side-bar>
<nav is="gmail-labels"></nav>
<gmail-contacts />
</gmail-sidebar>
17 / 145

<!doctype html>
<html>
<head>
</head>
<body>
<header>
<gmail-search />
</header>
<gmail-side-bar>
<gmail-contacts />
</gmail-sidebar>
<main>
<nav is="gmail-categories"></nav>
<gmail-email-list />
</main>
18 / 145

<!doctype html>
<html>
<head>
</head>
<body>
<header>
<gmail-search />
</header>
<gmail-side-bar>
<gmail-contacts />
</gmail-sidebar>
<main>
</main>
<gmail-talk />
</body>
19 / 145

<img src="http://avatars.io/twitter/leggetter" />
<img src="http://avatars.io/facebook/leggetter" />
<img src="http://avatars.io/instagram/leggetter" />
<img src="http://avatars.io/gravatar/phil@pusher.com" />
Start Simple - An Avatar
20 / 145

Custom Elements
<my-avatar service="twitter" username="leggetter" />
21 / 145

Custom Elements
<script>
var MyAvatarPrototype = Object.create(HTMLElement.prototype);
22 / 145

Custom Elements
<script>
MyAvatarPrototype.createdCallback = function() {
var username = this.getAttribute('username');
var service = this.getAttribute('service');
23 / 145

Custom Elements
<script>
var url = 'http://avatars.io/' + service + '/' + username;
24 / 145

Custom Elements
<script>
var img = document.createElement( 'img' );
img.setAttribute('src', url);
this.appendChild(img);
};
25 / 145

Custom Elements
<script>
var img = document.createElement( 'img' );
img.setAttribute('src', url);
this.appendChild(img);
};
document.registerElement('my-avatar', {
prototype: MyAvatarPrototype
});
</script>
Define your own elements. 26 / 145

<my-avatar service="facebook" username="leggetter" />
<my-avatar service="instagram" username="leggetter" />
<my-avatar service="twitter" username="garyshort" />
<my-avatar />
27 / 145

Custom Elements - Extending
<img is="my-avatar-ext" service="twitter" username="leggetter" />
28 / 145

Custom Elements - Lifecycle
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback(attrName,
oldVal, newVal)
32 / 145

Create Elements using
JavaScript
<script>
function createPhils() {
var tooManyPhils = 104;
var phils = 0;
do {
var el = document.createElement( 'my-avatar' );
el.setAttribute('service', 'twitter');
el.setAttribute('username', 'leggetter');
document.getElementById( 'phils' ).appendChild( el );
++phils;
} while( phils < tooManyPhils );
}
</script>
Create Phils
33 / 145

Templates
Native HTML Templating
Support
35 / 145

HTML Templates Create Avatar
<template id="my-avatar-template">
<style>
.container { background-color: cyan; }

</style>
<div class="container">
<img class="avatar" />
<span class="username"></span>
<span class="service"></span>
</div>
</template>
37 / 145

Why native HTML Templates?
Libraries → Native
Native benefits
Document fragment = lightweight
Inert until cloned/used
42 / 145

Shadow DOM
DOM/CSS "scoping" /
protection
43 / 145

Shadow DOM - Already using
it
44 / 145

Shadow DOM SubTrees
Light DOM
Shadow DOM
Composed (rendered) DOM
45 / 145

Light DOM
<my-custom-element>
<q>Hello World</q> 
</my-custom-element>
46 / 145

Shadow DOM
#document-fragment

<span>People say: <content></content></span>
<footer>sometimes</footer>
47 / 145

Rendered DOM
<my-custom-element>
<span>People say: <q>Hello World</q></span>
<footer>sometimes</footer>
</my-custom-element>
48 / 145

Shadow DOM - Problems it
solves
49 / 145

Styles <span class="container">Bleed!</span>
<template id="my-avatar-tmpl">
<style>
...
<my-avatar-tmpl service="twitter" username="leggetter" />
Styles Bleed!
Me
Shadow DOM - Problems it solves
50 / 145

Styles <span class="container">Bleed!</span>
<template id="my-avatar-tmpl">
<style>
...
<my-avatar-tmpl service="twitter" username="leggetter" />
Styles Bleed!
Me
<img id="avatar" />
...
</template>
Global DOM
e.g. id
attributes
Shadow DOM - Problems it solves
51 / 145

Shadow DOM - In Action Create DevWeek
52 / 145

<template id="my-avatar-shadow-tmpl">
<style>
.container { background-color: red; color: white; }
...
</style>
<img id="avatar" />
...
</div>
</template>
53 / 145

Why Shadow DOM?
DOM & CSS Scoping
Protection for all: Page and Element
Encapsulation
58 / 145

HTML Imports
Loading & Dependency
Management
59 / 145

HTML Imports - Example
Before
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="fonts.css" />
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
60 / 145

HTML Imports - Example
Before
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="fonts.css" />
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
After
<link rel="import" href="bootstrap.html" />
61 / 145

HTML Imports - Composition
team-pusher.html
62 / 145

team-pusher.html
<link rel="import" href="my-avatar-import.html" />
63 / 145

team-pusher.html
<template id="team-pusher-tmpl">
<style> </style>
<my-avatar-import service="twitter" username="maxthelion" />
<my-avatar-import service="twitter" username="copypastaa" />
...
<my-avatar-import service="twitter" username="leggetter" />
</template>
...
64 / 145

team-pusher.html
<template id="team-pusher-tmpl">
<style> </style>
<my-avatar-import service="twitter" username="maxthelion" />
<my-avatar-import service="twitter" username="copypastaa" />
...
<my-avatar-import service="twitter" username="leggetter" />
</template>
<script>
var TeamPusherPrototype = Object.create(HTMLElement.prototype);
TeamPusherPrototype.createdCallback = function() {
// Get template, createShadowRoot etc.
};
document.registerElement('dunddd-organisers', {
prototype: TeamPusherPrototype
});
</script>
...
65 / 145

Demo
<link rel="import" href="assets/team-pusher.html" />
<team-pusher></team-pusher>
66 / 145

Demo
<link rel="import" href="assets/team-pusher.html" />
<team-pusher></team-pusher>
maxthelion
twitter
copypastaa
twitter
zimbatm
twitter
loicdumas
twitter
mdpye
twitter
olga_dukova
twitter
pawel_ledwon
twitter
hamchapman
twitter
rumblesan
twitter
jamessiddle
twitter
willsewell_
twitter
leggetter
twitter
67 / 145

HTML Imports - Gotchas /
Patterns!
68 / 145

Get & use documentfrom the
currentScript
( function( currentScript ) {
var ownerDoc = currentScript.ownerDocument;
} )( document._currentScript || document.currentScript );
69 / 145

importNodeand NOT
cloneNodefor Template
// Note: use ownerDoc
var content = ownerDoc.querySelector( '#my-template' );
var clone = ownerDoc.importNode( content, true );
70 / 145

You can't <link>into the Shadow
DOM
<template>
<link rel="stylesheet" href="path/to/style.css" />
</template>
71 / 145

Why Use HTML Imports?
Bundle JS/HTML/CSS → single URL
Basic dependency management
Sharing & reuse
Supports composition
72 / 145

State of Native Support
73 / 145

Browsers
Chrome
41
Firefox
36
Safari 8 IE 10
Custom
Elements
Y N* N N
Templates Y Y Y N
Shadow DOM Y N* N N
HTML Imports Y N* N N
* Can be enabled in config
74 / 145

Firefox
https://hacks.mozilla.org/2014/12/mozilla-and-web-
“Mozilla will not ship an
implementation of HTML Imports.
We expect that once JavaScript
modules ... is shipped, the way we
look at this problem will have
changed.
75 / 145

Browsers - with Polyfills
Chrome
42
Firefox
36
Safari 8 IE 10
Custom
Elements
Y Y Y Y
Templates Y Y Y Y
Shadow DOM Y Y* Y* Y*
HTML Imports Y Y Y Y
http://webcomponents.org/polyfills
* Shadow DOM Polyfill limitations
80 / 145

Componentised Web Apps
now
81 / 145

now - questions?
Should native browser support stop us thinking about
building componentised web apps?
82 / 145

now - questions?
No!
83 / 145

now - questions?
No!
Should we be build componentised web apps anyway?
84 / 145

now - questions?
No!
Should we be build componentised web apps anyway?
We're already building web apps out of
components right now!
85 / 145

JavaScript
Libraries & Frameworks
86 / 145

AngularJS
<script src="js/angular.min.js"></script>
88 / 145

AngularJS
<script>
angular.module('demo', [])
.directive('ngAvatar', function () {
return {
89 / 145

AngularJS
<script>
return {
restrict:"AEC",
90 / 145

AngularJS
<script>
return {
restrict:"AEC",
scope: {
service: '@',
username: '@'
},
91 / 145

AngularJS
<script>
return {
restrict:"AEC",
scope: {
service: '@',
username: '@'
},
template: '<img src="http://avatars.io/' +
'{{service}}/{{username}}" />'
};
});
</script>
<body ng-app="demo">
92 / 145

AngularJS
<script>
return {
restrict:"AEC",
scope: {
service: '@',
username: '@'
},
};
});
</script>
<ng-avatar service="twitter" username="leggetter" />
93 / 145

AngularJS
<script>
return {
restrict:"AEC",
scope: {
service: '@',
username: '@'
},
};
});
</script>
94 / 145

EmberJS
<script src="js/jquery-1.10.0.min.js"></script>
96 / 145

EmberJS
<script src="js/handlebars.js"></script>
97 / 145

EmberJS
<script src="js/ember.js"></script>
98 / 145

EmberJS
<script>
var App = Ember.Application.create();
App.EmAvatarComponent = Ember.Component.extend({
99 / 145

EmberJS
<script>
url: function () {
return 'http://avatars.io/' +
this.get( 'service' ) + '/' +
this.get( 'username' );
}.property( 'username' , 'service' )
});
</script>
100 / 145

EmberJS
<script>
url: function () {
});
</script>
<script type="text/x-handlebars" id="components/em-avatar">
<img {{bind-attr src=url}} />
</script>
101 / 145

EmberJS
<script>
url: function () {
});
</script>
<script type="text/x-handlebars" id="components/em-avatar">
<img {{bind-attr src=url}} />
</script>
<script type="text/x-handlebars">
{{em-avatar service="twitter" username="leggetter"}}
</script>
102 / 145

ReactJS
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
104 / 145

ReactJS
<script type="text/jsx">
var ReAvatar = React.createClass({
render: function() {
return (
<img src={"http://avatars.io/" +
this.props.service + "/" +
this.props.username} />
);
}
});
105 / 145

ReactJS
return (
);
}
});
React.renderComponent(
<ReAvatar service="twitter" username="leggetter" />,
document.querySelector('re-avatar')
);
</script>
106 / 145

ReactJS
return (
);
}
});
);
</script>
<re-avatar />
107 / 145

ReactJS
return (
);
}
});
);
</script>
<re-avatar />
108 / 145

Many More...
KnockoutJS Components
Backbone components
Backbone with React components
CanJS components
And...
109 / 145

Polymer
<script src="webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="polymer/polymer.html">
111 / 145

Polymer
<polymer-element name="po-avatar" attributes="service username">
112 / 145

Polymer
<template>
<img src="http://avatars.io/{{service}}/{{username}}" />
</template>
113 / 145

Polymer
<template>
</template>
<script>
Polymer('po-avatar', {});
</script>
</polymer-element>
114 / 145

Polymer
<template>
</template>
<script>
</script>
</polymer-element>
<po-avatar service="facebook" username="leggetter" />
115 / 145

Polymer
<template>
</template>
<script>
</script>
</polymer-element>
<po-avatar service="facebook" username="leggetter" />
116 / 145

Who's Building Componentised Web
Apps now?
119 / 145

Who's Building Componentised Web
Apps now?
Angular, Ember, Backbone, Knockout, React, Web Components with
Polyfills, Polymer
You probably are already
vs.
120 / 145

Examples
From Eric's Slides
GitHub
Chrome OS
GMail built in Polymer
Topeka game built in Polymer
121 / 145

Why Web Components are
the future!
122 / 145

1. You're already building
componentised web apps
If you're not, you probably
should be
123 / 145

Libraries
Alignment toward Web Components
Angular - Directives
Ember - Components
Knockout - Components
Polymer - build upon Web Components
Angular 2...
125 / 145

Browser Vendor Support
Google
Opera - uses Blink
Mozilla
Microsoft - ?
previously: HTA & ASP.NET Controls
In high demand on IE UserVoice
Apple - ?
127 / 145

3. Encourages good software
development
Component-based
Development
129 / 145

Separation of Concerns
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<gmail-search />
</header>
<gmail-side-bar>
<gmail-contacts />
</gmail-sidebar>
<main>
</main>
<gmail-talk />
</body> 130 / 145

Encapsulation
Shadow DOM - Style & DOM encapsulation
Does NOT offer JavaScript protection
Hacky Custom Element
leggetter
twitter
Don't click me!
131 / 145

Loose Coupling
Custom Events
Element API (interface)
Existing messaging frameworks
132 / 145

Custom Events
<script>
var CustomEventPrototype = Object.create(HTMLElement.prototype);
CustomEventPrototype.createdCallback = function() {
// Build element ...
this.addEventListener('click', function() {
var customEvent = new CustomEvent('cheese');
this.dispatchEvent(customEvent);
}.bind(this));
};
// ...
133 / 145

Custom Events
<script>
var CustomEventPrototype = Object.create(HTMLElement.prototype);
CustomEventPrototype.createdCallback = function() {
// Build element ...
this.addEventListener('click', function() {
var customEvent = new CustomEvent('cheese');
this.dispatchEvent(customEvent);
}.bind(this));
};
// ...
var customEl = document.getElementById('my_custom_ev');
customEl.addEventListener('cheese', function() {
alert('cheese fired!');
});
</script>
<custom-event-ex id="my_custom_ev"></custom-event-ex>
134 / 145

Element API Attributes & Methods
<script>
CustomEventPrototype.startSpin = function() {
this.img.classList.toggle('spin');
};
CustomEventPrototype.stopSpin = function() {
this.img.classList.toggle('spin');
};
// ...
var spinEl = document.getElementById('spin_el');
spinEl.startSpin();
// ...
spinEl.stopSpin();
</script>
<custom-event-ex id="spin_el"></custom-event-ex>
135 / 145

Reusability
<link rel="import" href="https://some-cdn.com/my-avatar.html" />
137 / 145

High Cohesion
myavatar.html
├── js/script.js
├── css/styles.css
└── img/bg.png
138 / 145

Problems? Solved in the
future?
HTML Imports
Vulcanize | HTTP2
Shared scripts?
Cache
Multiple versions?
Better Cross-component communication?
Allow <link>for CSS in Shadow DOM?
139 / 145

Summary
Custom Elements - Awesome
140 / 145

Summary
HTML Templates, Shadow DOM, HTML Imports - Native FTW
141 / 145

Summary
You can & are building componentised web apps now
142 / 145

Summary
Trends & "best practice" ♥ Web Components
143 / 145

Summary
Trends & "best practice" ♥ Web Components
Web Components are the future!
144 / 145

Why you should be using Web
Components Now. And How.
Questions?
leggetter.github.io/web-components-now
PHIL @LEGGETTER
Head of Evangelism
145 / 145

Why you should be using Web Components. And How - DevWeek 2015

More Related Content

What's hot (20)

Similar to Why you should be using Web Components. And How - DevWeek 2015 (20)

More from Phil Leggetter (20)

Recently uploaded (20)

Why you should be using Web Components. And How - DevWeek 2015