Les web components

Que sont-ils ?

Que sont-ils ?

• Un ensemble de quatre principes :
  • Templates
  • Imports
  • Custom elements
  • Shadow DOM
• Une approche orientée composant
• Une norme

Que ne sont-ils pas ?

• Un framework
• Un module JS
• Une structure de projet
• Une difficulté

Les web components

Quoi ?

Quoi ?

• Templates
• Imports
• Custom elements
• Shadow DOM

Templates

• Revenir au bases du web : HTML & CSS
• L'améliorer avec des attributs dynamiques
• Modifier le DOM selon les configurations
  • ⇒ Comme Angular, React…

Imports

• Dépendances entre les composants
• A la demande (Just needed & just in time)
• Peut (presque) remplacer les modules ES6

Custom elements

• Réutiliser les composants développés
• Les utiliser comme des composants natifs

Shadow DOM

• Encapsulation
• Mon composant est un élément du DOM
• Les enfants du template sont inaccessibles
• Les enfants du composant sont accessibles

Les web components

Pourquoi ? Quel intérêt ?

Pourquoi ? Quel intérêt ?

• Réutilisabilité
• Indépendant des frameworks et outils
• Utilisables dans les framework et outils

Et Angular, React, … ?

• Peut-on utiliser Angular dans React ?
• Peut-on utiliser React dans Angular ?
• Comment utiliser un « élément » existant ?
• Les web components sont naturellement compatibles

Les web components

Examples ?

Example 1

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/kwc-i18n/kwc-i18n.html">
<link rel="import" href="/bower_components/kwc-callout/kwc-callout.html">

<!-- ... -->

<kwc-callout type="warning" closeable>
  <!-- kwc-i18n converts given key into translated text from external JSON. -->
  <p><kwc-i18n key="global.use-cookies" show></kwc-i18n></p>
</kwc-callout>

<!-- ... -->

Example 2

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/kwc-table/kwc-table.html">
<link rel="import" href="/bower_components/kwc-i18n/kwc-i18n.html">
<link rel="import" href="/dist/lib/vep/services/show-service/show-service.html">
<link rel="import" href="/dist/lib/vep/services/company-service/company-service.html">

<dom-module id="page-shows">
  <template>
    <h1><kwc-i18n key="page-shows.title" show></kwc-i18n></h1>

    <!-- Creates a table with [[shows]] as data -->
    <kwc-table data="[[shows]]">
      <!-- Defines the column which can be used to sort data -->
      <kwc-table-column header="[[i18nTitle]]" property="title" sortable>
        <!-- Defines how the cell will be rendered -->
        <kwc-table-cell>
          <template>
            <a href="/show/read/[[row.canonical]]">[[value]]</a>
          </template>
        </kwc-table-cell>
      </kwc-table-column>
      <!-- Defines another column with default cell rendering -->
      <kwc-table-column header="[[i18nAuthor]]" property="author" sortable></kwc-table-column>
      <kwc-table-column header="[[i18nDirector]]" property="director" sortable></kwc-table-column>
      <kwc-table-column header="[[i18nCompany]]" property="company" sortable>
        <kwc-table-cell>
          <template>
            <!-- Calls a function into my component when rendering -->
            {{getCompany(value)}}
          </template>
        </kwc-table-cell>
      </kwc-table-column>
    </kwc-table>
    
    <kwc-i18n key="page-shows.table.title" var="{{i18nTitle}}"></kwc-i18n>
    <kwc-i18n key="page-shows.table.author" var="{{i18nAuthor}}"></kwc-i18n>
    <kwc-i18n key="page-shows.table.director" var="{{i18nDirector}}"></kwc-i18n>
    <kwc-i18n key="page-shows.table.company" var="{{i18nCompany}}"></kwc-i18n>
  </template>

  <!-- In dev, I have two files, but my build system "inline" the script for prod version. -->
  <script src="./page-shows.js" inline></script>
</dom-module>

Example 2

(function () {
  const showService = window.vep.services.show;
  const companyService = window.vep.services.company;

  class PageShows {
    beforeRegister() {
      this.is = "page-shows";

      this.properties = {
        shows: {
          type: Array,
          value: []
        },
        companies: {
          type: Array,
          value: []
        }
      };
    }
    attached() {
      const that = this;
      showService.findAll().then((shows) => that.shows = shows);
      companyService.findAll().then((companies) => that.companies = companies);
    }
    getCompany(companyCanonical) {
      const company = this.companies.find((c) => c.canonical === companyCanonical);
      return company ? company.name : null;
    }
  }

  Polymer(PageShows);
})();

Example 2

Les web components

Conclusion

Conclusion

• N'est pas un framework
• Est une norme de ES
• Est utilisable par tous les outils
• Est simple d'utilisation