Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE

Web Components
It's all rainbows and
unicorns! Is it?
Sara HARKOUSSE
BlendWebMix
Lyon, 26, 27 October 2017
1

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
#BlendWebMix #webcomponents 2

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

Web Components
It's all rainbows and
unicorns! Is it?
4

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

Web components'
public image
#BlendWebMix #webcomponents @Sara_harkousse
"The broken promise of Web Components"
6

Motivation
Modular architecture
Filterable
Product Table
Search Bar Product Table
Product
Row
Product
Category
Row
7

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
Ember 2.16.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/
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
8

Frameworks make it
hard to get along
9

Harmony happens
when there is less
learning curve
10

Browser support
use webcomponents.js

Refresher on web
components
Web components are a set of web platform APIs
that allow you to create new custom, reusable,
encapsulated HTML tags to use in web apps.”

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

HTML Template Tag
<template id="template">
<div id="container">
<img class="webcomponents" src="logo.svg">
</div>
</template>
14

HTML Template Tag Usage
var template = document.querySelector('#template');
var clone = template.content.cloneNode(true);
var host = document.querySelector('#host');
host.appendChild(clone);
15

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
16

HTML Imports
<link rel="import" href="component.html">
<link rel="stylesheet" href="style.css">
<div id="container">
<img class="rotate" src="logo.svg">
</div>
<script src="script.js"></script>
17

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

HTML Import
requires a polyfill
ES module?
19

ES module
// export feature
export const Component = // …
// import feature
import {Component} from '../components/cutom-component.js';
20

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

Key concepts
Isolated DOM
Scoped CSS
22

Shadow DOM
requires a polyfill
Hard to polyfill
23

Use/Don't
use
Shadow
DOM?
callback() {
// Use it
this.root = this.attachShadow({mode: 'open'});
var clone = document.importNode(template.content, true);
this.root.appendChild(clone);
}
callback() {
// Don't Use it
this.root = this;
var clone = document.importNode(template.content, true);
this.root.appendChild(clone);
}
24

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

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

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

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

Custom Elements
Namespace
Dash (-) rule
29

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

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

Components
on a page <!doctype html>
<html lang="en">
<head>
<link rel="import" href="/imports/productRow.html">
</head>
<body>
<custom-navbar style="compact"></custom-navbar>
<custom-toolbar style="full"></custom-toolbar>
<custom-pagecontent>
<custom-input attr="val"></custom-input>
<progress-bar></progress-bar>
</custom-pagecontent>
<script>
document.querySelector('custom-input').dispatchEvent(new CustomEvent('customevent', {
detail: { prop: true }
}));
document.querySelector('progress-bar').addEventListener(
'customevent', function () {
// do something
}
});
</script>
</body>
</html>
33

Takeaway
Template tag? yeah! why not?
Use ES module instead of HTML Imports
Use Shadom DOM with a flag
Custom Elements?? Go, Go, Go
34

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

#BlendWebMix #webcomponents
Thanks for listening!
Follow for slides
@Sara_harkousse
https://github.com/SaraHarkousse
36

Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE

More Related Content

Similar to Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE (20)

More from La Cuisine du Web (20)

Recently uploaded (20)

Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE