Composants Web à Google 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 évoqué l'état des composants Web.
Quelle est la popularité des composants Web ?
Si vous avez utilisé le Web aujourd'hui, vous avez probablement utilisé des composants Web. Selon 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 réussies 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 conçus avec AMP (les composants AMP sont également des composants Web). De nombreuses entreprises adoptent également les composants Web.
Que sont les composants Web ?
Qu'est-ce qu'un composant Web ? Les spécifications des composants Web fournissent un ensemble d'API de bas niveau qui vous permettent d'étendre l'ensemble intégré de balises HTML du navigateur. Les composants Web offrent les avantages suivants :
- Méthode courante pour créer un composant (à l'aide des API DOM standards).
- Méthode courante de réception et d'envoi de données (à l'aide de propriétés/é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 ils peuvent utiliser des modèles déclaratifs comme ceux que l'on trouve dans Angular ou Vue. En tant qu'auteur, vous êtes 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 réside dans 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 elles peuvent être exprimées en HTML réel, elles peuvent être affichées par tous les frameworks populaires. Vos composants peuvent ainsi être utilisés plus largement, dans un éventail d'applications plus diversifié, sans que les utilisateurs soient liés à un framework spécifique.
De plus, comme l'interface de composant est standard, les composants Web implémentés à l'aide de différentes bibliothèques peuvent être combinés sur la même page. Cela permet de pérenniser vos applications lorsque vous mettez à jour votre pile technologique. Au lieu d'un changement radical entre un framework et un autre, où vous remplacez tous vos composants, vous pouvez mettre à jour vos composants un par un.
Qui utilise les composants Web ?
Pour toutes ces raisons, les composants Web connaissent un énorme succès dans différents cas d'utilisation. Trois cas d'utilisation sont 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 en tant que code HTML standard par un nombre incalculable de systèmes de gestion de contenu.
AMP est un excellent exemple de la rapidité et de la facilité avec lesquelles les composants Web se sont intégrés à l'infrastructure du secteur de l'édition pour la diffusion de contenu.
Systèmes de conception
De plus en plus d'entreprises unifient leur présentation à 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 applications d'une organisation. Les composants Web sont également très utiles dans ce cas.
Souvent, les concepteurs doivent faire face à 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 d'avoir un seul ensemble de composants canoniques.
Les composants Web sont la solution : un système de composants qui permet d'écrire du code une seule fois et de l'exécuter partout, tout en laissant aux équipes d'application la liberté d'utiliser le framework de leur choix.
Des entreprises comme ING, EA et Google implémentent le langage de conception de leur entreprise dans des composants Web.
Enterprise: Web components at Salesforce
Les composants Web font également des progrès remarquables au sein des entreprises en tant que technologie sûre et pérenne sur laquelle s'appuyer pour la standardisation. Caridy Patiño, architecte de la plate-forme d'UI de Salesforce, explique pourquoi ils ont créé leur plate-forme d'UI à l'aide de composants Web.
Salesforce est un ensemble d'applications, dont beaucoup proviennent d'acquisitions. Chacun d'eux peut s'exécuter sur sa propre pile technologique. Comme ils sont conçus 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. L'idéal serait que les composants soient également utilisables par des développeurs externes.
Salesforce a identifié un ensemble de besoins des 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 d'intégrer plus rapidement de 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é certains éléments que les clients ne souhaitaient pas :
- Modifications incompatibles sur leurs composants et applications. En d'autres termes, la rétrocompatibilité était indispensable.
- Être bloqué avec une ancienne technologie et ne pas pouvoir évoluer.
- Être coincé dans un jardin clos.
L'utilisation de composants Web comme base de la nouvelle plate-forme d'UI répond à tous ces besoins. Le résultat est le nouveau Lightning Web Components.
Premiers pas avec les composants Web
Il existe de nombreuses façons de commencer à utiliser les composants Web.
Si vous créez une application Web, envisagez d'utiliser certains des nombreux composants Web standards disponibles. En voici quelques exemples :
- Google vend son propre système Material Design en tant que composants Web : Material Web Components.
- Les éléments filaires sont un ensemble de composants Web intéressants qui présentent un aspect esquissé, dessiné à la main.
- Il existe d'excellents composants Web à usage spécifique, comme
<model-viewer>, que vous pouvez déposer dans 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 rendre utilisable 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 assez bas niveau. Il existe donc un certain nombre de bibliothèques 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 qui privilégie les composants Web. Il inclut plusieurs fonctionnalités de frameworks 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 d'empaqueter les composants Vue en tant que composants Web.
Autres ressources :
- Le site open-wc.org propose d'excellentes informations pour vous aider à démarrer, 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 et les bonnes pratiques pour concevoir des composants Web.
- MDN fournit des documents de référence pour les API des composants Web, ainsi que des tutoriels.