Web components are a tale of four w3c specifications. They are a hot topic now. We’ve all seen big headlines, for instance, “The Web Components revolution”, “Web Components are a game changer”, “A Tectonic Shift for Web Development”, … and so many others. They are certainly exciting and promising, nevertheless, there are some factors holding them back such as performance issues and lack of browser support. Some features seems to be more hassle than they’re worth. In this talk you’ll examine web components from a pragmatic stand point. So if you want to start using web components in production, come to learn what features can you use today. Actually, despite the still short browser support, some of web components features seems to be the best choice to start with . The assessment you’ll learn is the reflection of my personal research and work on my spare time and also feedbacks from my co-workers.
Pre Engineered Building Manufacturers Hyderabad.pptx
Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE
1. Web Components
It's all rainbows and
unicorns! Is it?
Sara HARKOUSSE
BlendWebMix
Lyon, 26, 27 October 2017
1
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
#BlendWebMix #webcomponents 2
3. Women in Tech
Duchess France
@duchessfr
duchess-france.org
Elles bougent (Girls on The Move)
@ellesbougent
ellesbougent.com
#BlendWebMix #webcomponents @Sara_harkousse 3
5. "The web components revolution"
"A Tectonic shift for web development"
"Web components are a game changer"
Web components'
public image
#BlendWebMix #webcomponents @Sara_harkousse 5
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
#BlendWebMix #webcomponents @Sara_harkousse
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/defining-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
12. 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.”
#BlendWebMix #webcomponents @Sara_harkousse 12
14. HTML Template Tag
#BlendWebMix #webcomponents @Sara_harkousse
<template id="template">
<div id="container">
<img class="webcomponents" src="logo.svg">
</div>
</template>
14
15. HTML Template Tag Usage
#BlendWebMix #webcomponents @Sara_harkousse
var template = document.querySelector('#template');
var clone = template.content.cloneNode(true);
var host = document.querySelector('#host');
host.appendChild(clone);
15
16. HTML Template Tag
#BlendWebMix #webcomponents @Sara_harkousse
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
18. How to get my
component?
#BlendWebMix #webcomponents @Sara_harkousse
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
26. #BlendWebMix #webcomponents @Sara_harkousse
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
27. #BlendWebMix #webcomponents @Sara_harkousse
Custom Elements
class CustomButton extends HTMLElement {...}
window.customElements.define('custom-button', CustomButton);
<custom-button></custom-button>
Acts like a div
27
28. #BlendWebMix #webcomponents @Sara_harkousse
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