Composants Web à la conférence I/O 2019
Date de publication : 18 juin 2019
Lors de la conférence Google I/O 2019, Kevin Schaaf du projet Polymer et Caridy Patiño de Salesforce ont parlé de l'état des composants Web.
Les composants Web sont-ils populaires ?
Si vous avez utilisé le Web aujourd'hui, vous avez probablement utilisé des composants Web. D'après nos estimations, entre 5 % et 8 % des chargements de pages utilisent aujourd'hui un ou plusieurs composants Web. Cela fait des composants Web l'une des nouvelles fonctionnalités de plate-forme Web les plus populaires lancées au cours des cinq dernières années.
Vous pouvez trouver des composants Web sur des sites que vous utilisez probablement tous les jours, comme YouTube et GitHub. Ils sont également utilisés sur de nombreux sites d'actualités et de publication créés avec AMP (les composants AMP sont également des composants Web). De nombreuses entreprises adoptent également les composants Web.
Que sont les composants Web ?
Alors, que sont les composants Web ? Les spécifications des composants Web fournissent un ensemble d'API de bas niveau qui vous permettent d'étendre l'ensemble de balises HTML intégré au navigateur. Les composants Web offrent les avantages suivants :
- Méthode courante pour créer un composant (à l'aide des API DOM standards).
- Moyen courant de recevoir et d'envoyer des données (à l'aide de propriétés/d'événements).
En dehors de cette interface standard, les normes ne disent rien sur la façon dont un composant est réellement implémenté :
- Le moteur de rendu qu'il utilise pour créer son DOM.
- Comment il se met à jour en fonction des modifications apportées à ses propriétés ou attributs.
En d'autres termes, les composants Web indiquent au navigateur quand et où créer un composant, mais pas comment le créer.
Les auteurs peuvent choisir des modèles de rendu fonctionnels, comme React, pour créer leurs composants Web, ou utiliser des modèles déclaratifs, comme ceux d'Angular ou de Vue. En tant qu'auteur, vous êtes totalement libre de choisir la technologie que vous utilisez dans le composant, tout en conservant l'interopérabilité.
À quoi servent les composants Web ?
La principale différence entre les composants Web et les systèmes de composants propriétaires est l'interopérabilité. Grâce à leur interface standard, vous pouvez utiliser des composants Web partout où vous utiliseriez un élément intégré tel que <input> ou <video>.
Comme ils peuvent être exprimés en HTML réel, ils peuvent être affichés par tous les frameworks populaires. Vos composants peuvent ainsi être utilisés plus largement, dans un plus grand nombre d'applications, sans que les utilisateurs soient limités à un seul framework.
De plus, comme l'interface des composants est standard, les composants Web implémentés à l'aide de différentes bibliothèques peuvent être combinés sur une même page. Cela renforce l'évolutivité de vos applications lorsque vous mettez à jour votre pile technologique. Au lieu de passer d'un framework à un autre en remplaçant tous vos composants, vous pouvez les mettre à jour un par un.
Qui utilise les composants Web ?
Pour toutes ces raisons, les composants Web rencontrent un grand succès dans de nombreux cas d'utilisation. Trois cas d'utilisation ont été particulièrement populaires : les sites de contenu, les systèmes de conception et les applications d'entreprise.
Sites du Réseau Display,
Les composants Web sont la technologie idéale pour améliorer progressivement le contenu, car ils peuvent déjà être générés au format HTML standard par un nombre incalculable de systèmes CMS.
AMP est un excellent exemple de la rapidité et de la facilité avec lesquelles les composants Web se sont intégrés à l'infrastructure de diffusion de contenu du secteur de l'édition.
Systèmes de conception
De plus en plus d'entreprises unifient la façon dont elles se présentent à l'aide d'un système de conception, c'est-à-dire un ensemble de composants et de consignes qui définissent l'apparence commune des sites et des applications d'une organisation. Les composants Web sont également très utiles dans ce cas.
Souvent, les concepteurs doivent composer avec de nombreuses équipes qui créent leurs propres versions des composants du système de conception sur React, Angular et tous les autres frameworks, au lieu de disposer d'un seul ensemble de composants canoniques.
Les composants Web sont la solution : un système de composants véritablement "write once, run everywhere" (écrire une fois, exécuter partout) qui permet aux équipes de développement d'utiliser le framework de leur choix.
Des entreprises comme ING, EA et Google implémentent leur langage de design dans des composants Web.
Enterprise : composants Web chez Salesforce
Les composants Web connaissent également un essor remarquable au sein des entreprises en tant que technologie sûre et pérenne sur laquelle s'appuyer. Caridy Patiño, architecte de la plate-forme d'interface utilisateur de Salesforce, a expliqué pourquoi ils ont créé leur plate-forme d'interface utilisateur à l'aide de composants Web.
Salesforce est un ensemble d'applications, dont beaucoup sont issues d'acquisitions. Chacun d'eux peut s'exécuter sur sa propre pile technologique. Comme elles sont basées sur des piles différentes, il est difficile de leur donner la même apparence. De plus, Salesforce permet aux clients de créer leurs propres applications personnalisées à l'aide de la plate-forme Salesforce. Idéalement, les composants devraient donc également être utilisables par des développeurs externes.
Salesforce a identifié un ensemble de besoins chez les clients de sa plate-forme :
- Des solutions standards plutôt que propriétaires, ce qui permet de trouver plus facilement des développeurs expérimentés et de former plus rapidement les nouveaux développeurs.
- Un modèle de composant commun : la personnalisation de n'importe quelle application Salesforce fonctionne de la même manière.
Ils ont également identifié des choses que les clients ne voulaient pas :
- Modifications destructives apportées à leurs composants et applications. En d'autres termes, la rétrocompatibilité était indispensable.
- Être coincé avec une technologie obsolète et ne pas pouvoir évoluer.
- Être coincé dans un écosystème fermé.
L'utilisation de composants Web comme base de la nouvelle plate-forme d'interface utilisateur a permis de répondre à tous ces besoins, et le résultat est la nouvelle plate-forme Lightning Web Components.
Premiers pas avec les composants Web
Il existe de nombreuses façons de se lancer dans les composants Web.
Si vous créez une application Web, vous pouvez utiliser certains des nombreux composants Web standards disponibles. En voici quelques exemples :
- Google propose son propre système de conception Material Design sous forme de composants Web : les composants Web Material.
- Les Wired Elements sont un ensemble de composants Web intéressants qui ont l'apparence d'un croquis dessiné à la main.
- Il existe d'excellents composants Web spécialisés, comme
<model-viewer>, que vous pouvez ajouter à n'importe quelle application pour ajouter du contenu 3D.
Si vous développez un système de conception pour votre entreprise, ou si vous vendez un composant ou une bibliothèque unique que vous souhaitez pouvoir utiliser dans n'importe quel environnement, envisagez de créer vos composants à l'aide de composants Web. Vous pouvez utiliser les API de composants Web intégrées, mais elles sont de bas niveau. Il existe donc un certain nombre de bibliothèques disponibles pour faciliter le processus.
Pour commencer à créer vos propres composants, vous pouvez consulter LitElement, une classe de base de composants Web développée par Google qui offre une excellente expérience de rendu fonctionnel semblable à React.
Autres outils et bibliothèques à envisager :
- Stencil est un framework axé sur les composants Web. Il inclut plusieurs fonctionnalités de framework populaires, comme JSX et TypeScript.
- Angular Elements permet d'encapsuler des composants Angular en tant que composants Web.
- Le wrapper de composant Web Vue.js permet de packager des composants Vue en tant que composants Web.
Autres ressources :
- open-wc.org propose d'excellentes informations de démarrage, ainsi que des conseils et des configurations par défaut pour les outils de compilation et de développement.
- Web Fundamentals fournit des informations de base sur les API des composants Web de base, ainsi que des bonnes pratiques pour concevoir des composants Web.
- MDN fournit des documents de référence pour les API de composants Web, ainsi que des tutoriels.