Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"

Web Components
It's all rainbows and
unicorns! Is it?
Sara HARKOUSSE
UNITED DEV CONF
Minsk, 6,7 April 2017
http://vignette2.wikia.nocookie.net/weirdcommunity/images/a/a2/Rainbow-ﬂow-abstract-backgrounds-for-powerpoint.jpg/revision/latest?cb=20130603085532 2

SARA HARKOUSSE
@Sara_harkousse
Tech Lead, front-end Web developer at Dassault Systèmes
3D design & PLM software
Electronics and Computer Science Engineer by training
About me
@UnitedDevConf #webcomponents
3

Women in Tech
Duchess France
@duchessfr
duchess-france.org
Elles bougent (Girls on The Move)
@ellesbougent
ellesbougent.com
@UnitedDevConf #webcomponents @Sara_harkousse
4

Web Components
It's all rainbows and
unicorns! Is it?
http://vignette2.wikia.nocookie.net/weirdcommunity/images/a/a2/Rainbow-ﬂow-abstract-backgrounds-for-powerpoint.jpg/revision/latest?cb=20130603085532 5

"The web components revolution"
"A Tectonic shift for web development"
"Web components are a game changer"
Web components'
public image
6

Outline of this talk
Motivation
Refresher on web components
Dive deep
Concluding remarks
7

Motivation
Modular architecture
Filterable
Product Table
Search Bar Product Table
Product
Row
Product
Category
Row
https://facebook.github.io/react/docs/thinking-in-react.html
8

Angular 4.0 Component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
<my-app><h1>Hello Angular</h1></my-app>
https://embed.plnkr.co/?show=preview&show=app%2Fapp.component.ts
9

Ember 2.12.0 Component
<article class="blog-post">
<h1>{{title}}</h1>
<p>{{yield}}</p>
<p>Edit title: {{input type="text" value=title}}</p>
</article>
{{#each model as |post|}}
{{#blog-post title=post.title}}
{{post.body}}
{{/blog-post}}
{{/each}}
https://guides.emberjs.com/v2.12.0/components/deﬁning-a-component/
10

Polymer 2.0 Element
// Define the class for a new element called custom-element
class CustomElement extends Polymer.Element {
static get is() { return "custom-element"; }
constructor() {
super();
this.textContent = "I'm a custom-element.";
}
}
// Register the new element with the browser
customElements.define(CustomElement.is, CustomElement);
<custom-element></custom-element>
http://plnkr.co/edit/PaCt2M?p=preview
11

Frameworks make it
hard to get along
12

Harmony happens
when there is less
learning curve
13

Browser support
https://www.webcomponents.org/
use webcomponents.js
14

Refresher on web
components
HTML Template Tag
HTML Imports
Custom Elements
Shadow DOM
15

HTML Template Tag
<template id="template">
<div id="container">
<img class="webcomponents" src="https://webcomponents/imgs/webcomponents-logo.svg">
</div>
</template>
https://jsﬁddle.net/sara_harkousse/rnu8zc0c/
16

HTML Template Tag Usage
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
https://jsﬁddle.net/sara_harkousse/rnu8zc0c/
17

Template Tag drawbacks?
18

HTML Template Tag
A way to add inert DOM elements to your
document
Not something that's going to revolutionize your
apps
No two-way data binding, no binding at all
19

HTML Imports
<link rel="import" href="/imports/productRow.html">
<script src="js/productRow.js"></script>
<template>

<template>
20

How to get my
component?
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from productRow.html's document.
var el = content.querySelector('.productRow');
document.body.appendChild(el.cloneNode(true));
21

Why not this way?
var el = require('/imports/productRow');
22

<!doctype html>
<html lang="en">
<head>
</head>
<body>

</body>
</html>
Render blocking
23

<!doctype html>
<html lang="en">
<head>
<link rel="import" href="/imports/productRow.html" async>
</head>
<body>

</body>
</html>
async unblocks the renderer
24

Hammering our
server
Each one of the HTML imports is another
XMLHttpRequest
25

Build tools for HTML
Import
e.g. Vulcanizr (turns all imports into one
import)
26

HTML Import
requires a polyfill
ES6 module?
Note: polyfill doesn’t work with file:/// protocols because it
does a hidden XMLHttpRequest.
https://www.webcomponents.org/
27

Shadow DOM
A tiny document
exists inside of a host element
28

Key concepts
Isolated DOM
Scoped CSS
Rendering of shadow tree replaces that
of host tree
29

Number of shadow
trees
How many shadow trees are too many?
30

What's inside the
Shadow DOM?
What to put in the Shadow DOM and what not to?
<my-app>
31

Shadow DOM
requires a polyfill
Hard to polyfill
32

Use/Don't
use
Shadow
DOM?
callback() {
// Use it
this.root = this.attachShadow({mode: 'open'});
this.root.appendChild(clone);
}
callback() {
// Don't Use it
this.root = this;
this.root.appendChild(clone);
}
33

Use/Don't use
Shadow DOM?
/* Use it */
:host {
color: red;
}
/* Don't use it */
custom-component {
color: red;
}
34

Use AND Don't use
Shadow DOM
if (shadowflag){
this.root = this.attachShadow({mode: 'open'});
} else {
this.root = this;
}
custom-component, :host {
color: red;
}
35

Custom Elements
class UnitedDevConButton extends HTMLElement {...}
window.customElements.define('unitedDevCon-button', UnitedDevConButton);
<unitedDevCon-button></unitedDevCon-button>
Acts like a div
36

Custom Elements
class UnitedDevConButton extends HTMLButtonElement {...}
window.customElements.define('unitedDevCon-button', UnitedDevConButton, {extends: 'button'});
<button is="unitedDevCon-button" disabled>My button!</button>
Acts like a real button
37

Custom Elements
Namespace
Dash (-) rule
38

Custom Elements
ES6 Class
class UnitedDevCon-component extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
...
}
connectedCallback() {
...
}
disconnectedCallback() {
...
}
attributeChangedCallback(attrName, oldVal, newVal) {
...
}
}
39

Component example
Bootstrap Progress Bar
<div class="progress">
<div class="progress-bar" style="width: 60%;">
60%
</div>
</div>
40

Component example
class ProgressBar extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
this.shadow = this.attachShadow({mode: 'open'});
this._complete = 0;
}
get complete() {
return this._complete;
}
set complete(val) {
this.setAttribute('complete', val);
}
}
https://jsﬁddle.net/sara_harkousse/kwwe75yy/
41

static get observedAttributes() {
return ['complete'];
}
attributeChangedCallback(name, oldval, newval) {
// code
}
}
Component example
42

attributeChangedCallback(name, oldval, newval) {
var innerBar = this.shadow.querySelector('.progress-bar-inner');
switch(name) {
case 'complete':
this._complete = parseInt(newval, 10) || 0;
innerBar.style.width = this.complete + '%';
innerBar.innerHTML = this.complete + '%';
}
}
}
Component example
43

connectedCallback() {
var template = `<style>
.progress-bar {
width: 50%;
...
}
.progress-bar-inner {
height: 100%;
....
}
</style>
<div class="progress-bar">
<div class="progress-bar-inner">${this.complete}%</div>
</div>`;
this.shadow.innerHTML = template;
}
}
Component example
44

window.customElements.define('progress-bar', ProgressBar);
// Use
<progress-bar></progress-bar>
Component example
45

Components
on a page
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<custom-navbar style="compact"></custom-navbar>
<custom-toolbar style="full"></custom-toolbar>
<custom-pagecontent>
<custom-item attr="val"></custom-item>
<custom-input attr="val"></custom-input>
<progress-bar></progress-bar>
</custom-pagecontent>
<script>
document.querySelector('progress-bar').addEventListener(
'customevent', function () {
// do something
}
});
</script>
</body>
</html>
46

General concerns
Should you load the polyfills in
every bowser? No.
47

var = webComponentsSupported = ('customElements' in window
&& !!HTMLElement.prototype.attachShadow
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template'));
function loadScript(src) {
return new Promise(function(resolve, reject) {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// Lazy load the polyfill if necessary.
if (!supportsCustomElementsV1) {
loadScript('webcomponents-lite.min.js').then(e => {
// Polyfill loaded.
});
} else {
// Native support. Good to go.
}
48

Complex
documentation
not fun documents to read
49

Takeaway
You will understand some of the design decisions of
major frameworks if you learn about custom
elements
50

Takeaway
Who is using web components?
51

Takeaway
GitHub Mozilla VR Google
52

@UnitedDevConf #webcomponents
Thanks for listening!
Follow for slides
@Sara_harkousse
53

Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"

More Related Content

What's hot (20)

Similar to Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?" (20)

More from IT Event (20)

Recently uploaded (20)

Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"