Post on 22-Jan-2018
Mixité dans le monde des Web Components
Horacio Gonzalez@LostInBrittany
Cyril Balit@cbalit
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Horacio Gonzalez
@LostInBrittany
Cityzen Datahttp://cityzendata.com
Spaniard lost in Brittany, developer, dreamer and all-around geek
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
CTO Front
@cbalit
Cyril Balit
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Everything begins with a conversation
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Both of us have spoken quite a lot about Polymer...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
We have told everybody about the upcoming revolution of the Web Components
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
About app built brick by brick
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
So we met often, and we decided to do a talk together
But about what?Polymer?
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
We have introduced Polymer, explained the Polymer API,
done Polymer hands-on labs, taught Polymer...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
So this time...
This time needed to be different
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
The 3 minutes context
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
HTMLIMPORTS
SHADOWDOM
TEMPLATES CUSTOMELEMENTS
Web Components
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
To define your own HTML tag
Custom Element
<body>
...
<script>
window.customElements.define('my-element',
class extends HTMLElement {...});
</script>
<my-element></my-element>
</body>
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
To encapsulate subtree and style in an element
Shadow DOM
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
const shadowRoot = host.attachShadow({mode:'open'});
shadowRoot.textContent = 'こんにちは、影の世界!';
</script>
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
To include an html page in another one
HTML Imports
<link rel="import" href="warnings.html">
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
To have clonable document template
Template
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Polyfills...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
But in fact, it’s just an element…
● Attributes
● Properties
● Methods
● Events
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
But even more important… Why?
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Frameworks are born, evolve, are forked, die...
And everybody has their favorite one...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
I learnt it the hard way, as an angular fanboy...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
When I hit a wall...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Encapsulated, reusable and composable widgets for the Web Platform
And then I understood...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Too pretty to be true?
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Variations of the same questionsBut does it really works with <inser techno here/>?
And what about the other web components technologies?
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Objectifs
Using web components from different libraries in several webapp frameworks
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Demo time!
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Some after thoughts...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
All the good things ends...
After Nantes, Grenoble, Paris and now Toulouse,
it's the last time we do this talk...
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Because it is not needed anymore!
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
But they are lots of web component libraries!
Do all of them work with the frameworks as well as Polymer or Vanilla elements?
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
Well, in fact the DO
They are all standards compliant custom elements!You can mix and match at will
@LostInBrittany @cbalit#WebComponents #DevFestToulouse
We want the code!
And you can get it:
https://github.com/LostInBrittany/web-components-in-frameworks https://github.com/LostInBrittany/a-world-outside-polymer