TL;DR;
Avec les Composants Web tu peux désormais créer des éléments HTML réutilisables. Pour fonctionner, ils nécessitent l’utilisation de 4 nouvelles API HTML5 qui sont : Custom Element, Shadow DOM, HTML Template et HTML import. Comme elles ne sont pas encore supportées par tous les browsers, t’auras besoin du polyfill webcomponent.js pour travailler correctement.
Introduction
Dans le monde du web, il y’a une contrainte que l’on connaît depuis fort longtemps, c’est la difficulté de réutilisation du html qui a été créé. Bien souvent, pour réutiliser un composant, on mettait en place ce fameux design pattern bien connue du copy/paste, avec tous les désavantages que ça peut amener.
Pour éviter cela, on a commencé à créer nos éléments côtés serveur, en générant nos balises HTML avec des langages comme php, python, … On pouvait enfin commencer à faire du DRY.
Par la suite, l’évolution du JavaScript a mis au monde quelques librairies de templating (Handlebar, Mustache, …) qui ont favorisé cette philosophie de création d’élément réutilisable.
Dans la même ligne, les librairies permettant de faire des SPA (Single Page Application) ont pris le relais et ont mis à disposition de véritables systèmes orientés composants. On notera par exemple les vues de BackboneJS, les composants de Ember, les directives de Angular (ensuite transformé en component dans les dernières version) et enfin les composants de React ou Angular2. Mais la fonctionnalité n’est toujours pas native…
La good news
Heureusement, le W3C qui a remarqué ce manque, s’est réuni afin de créer un système de composant web natif et ainsi offrir aux développeurs la possibilité de créer leurs propres éléments avec leur propres fonctionnalités et qui pourront fonctionner dans tous les browsers sans ajout de librairie supplémentaires. Jusque là, ça vend du rêve. Mais voyons ce qu’il en est vraiment actuellement…
Comment créer des composants web
Les composants Web du W3C combinent les 4 nouvelles API suivantes qui sont expliquées plus en détail dans d’autres articles de ce site :
- Custom Elements (voir l’article dédié)
- Shadow DOM (voir l’article dédié)
- HTML Template
- HTML Import
Chaque points amène sa touche personnelle qui permettra de créer notre composant et dont voici une rapide explication :
Custom Element
Nous permettra de définir une balise personnalisée qui sera reconnu par le navigateur et qui aura son propre comportement que nous aurons défini en JavaScript.
Shadow DOM
Le shadow DOM nous permettra d’encapsuler le code de notre composant dans un scope isolé, afin de ne pas subir les styles CSS mis en place dans la page, mais également afin que le DOM encapsulé ne soit pas directement accessible par le JavaScript de la page.
HTML Template
La balise template du html5 est un élément inerte qui pourra contenir du code. Celui-ci sera par contre complètement ignoré lors du rendering de la page et devra être « importé » à l’aide du JavaScript dans la page courante.
HTML Import
Comme son nom l’indique, ceci nous permettra d’importer un document HTML dans lequel nous aurons défini un composant personnalisé, afin de le réutilisé dans notre document courant.
Les limitations actuelles
L’implémentation dans les navigateurs
La mauvaise nouvelle, c’est qu’à la date de cet article, seul 2 navigateurs (Chrome et Opera) implémentent toutes ces fonctionnalités.
On ne parlera pas d’Internet Explorer qui de toute façon gardera à vie sa réputation de traine savatte. Mais Microsoft Edge, qui était sensé être le browser de Microsoft devant faire oublier les déboires d’IE ne semble pas vouloir se presser d’implémenter ces fonctionnalités non plus (voir le user voice ).
Firefox, lui qui est plutôt à la pointe d’habitude a également une autre opinion sur l’utilité de ces différentes API et tarde ainsi à les mettre en place. Actuellement les fonctionnalités sont implémentées mais doivent être activées à l’aide d’un flag…
Au vu de tout ça, il est donc nécessaire de passer par des polyfills qui tenteront tant bien que mal de combler le manque. On utilisera ainsi le webcomponent.js qui s’en sort plutôt bien, si ce n’est pour le shadow DOM, dont le scope CSS ne pourra pas être isolé sans une gestion native par le browser.
La taille des composants
C’est génial, on a maintenant une possibilité de réutiliser les composants qu’on créé. N’empêche que si on a de gros composants métiers, la méthode la plus pratique est toujours d’utiliser un React ou Angular (ou autres librairies/frameworks, ne soyons pas fan boy).
Le but de ces composants web est donc plutôt de créer des éléments unitaires personnalisés que nous réutiliserons dans nos applications. Pour tout ce qui nécessite une gestion d’état, de modèles, etc. on restera sur nos habitudes et on délèguera plutôt cette logique à nos framework préférés.