Composants Web lors de Google I/O 2019
Lors de la conférence Google I/O 2019, Kevin Schaaf du projet Polymer et Caridy Patiño (Salesforce) ont parlé de 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 nous, entre 5 et 8 % de l'ensemble des chargements de pages utilisent un ou plusieurs composants Web. Cela fait des composants Web l'une des nouvelles fonctionnalités de plate-forme Web les plus performantes, 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 à l'aide du format AMP. Les composants AMP sont également des composants Web. De nombreuses entreprises adoptent également des composants Web.
Que sont les composants Web ?
Que sont les composants Web ? Les spécifications des composants Web fournissent un ensemble d'API de bas niveau qui vous permet d'étendre l'ensemble de balises HTML intégrées au navigateur. Les composants Web offrent les avantages suivants:
- Méthode courante de création d'un composant (à l'aide des API DOM standards).
- Moyen courant de recevoir et d'envoyer des données (à l'aide de propriétés/événements).
En dehors de cette interface standard, les normes ne précisent rien sur la façon dont un composant est réellement implémenté:
- Moteur de rendu utilisé pour créer son DOM
- La manière dont 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.
Les auteurs peuvent choisir des modèles de rendu fonctionnels tout comme React pour créer leurs composants Web, ou utiliser des modèles déclaratifs comme ceux disponibles dans Angular ou Vue. En tant qu'auteur, vous êtes libre de choisir la technologie que vous utilisez dans le composant, tout en maintenant 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é. En raison de leur interface standard, vous pouvez utiliser des composants Web partout où vous souhaitez utiliser un élément intégré comme <input> ou <video>.
Comme ils peuvent être exprimés sous forme de code HTML réel, ils peuvent être affichés par tous les frameworks courants. Ainsi, vos composants peuvent être utilisés plus largement, dans une gamme d'applications plus diversifiée, sans imposer aux utilisateurs un seul framework.
L'interface des composants étant standard, les composants Web implémentés à l'aide de différentes bibliothèques peuvent être combinés sur la même page. En mettant à jour votre pile technologique, vous assurez la pérennité de vos applications. Au lieu d'un immense changement d'un framework à un autre, où vous remplacez tous vos composants, vous pouvez mettre à jour vos composants un par un.
Qui utilise les composants Web ?
C'est pour toutes ces raisons que les composants Web connaissent un énorme succès dans de nombreux cas d'utilisation différents. 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 les contenus, car ils peuvent déjà être générés en 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 s'intègrent dans l'infrastructure du secteur de l'édition pour diffuser du contenu.
Les systèmes de conception
De plus en plus d'entreprises unifient leur façon de se présenter à l'aide d'un système de conception, un ensemble de composants et de directives qui définissent l'aspect général des sites et des applications d'une organisation. Les composants Web conviennent également parfaitement ici.
Souvent, les concepteurs doivent être confrontés à de nombreuses équipes qui créent leurs propres versions des composants du système de conception avec React, Angular et tous les autres frameworks, au lieu d'avoir un seul ensemble de composants canoniques.
Les composants Web sont la solution : il s'agit d'un système de composants qui s'exécute une fois et n'importe où, tout en permettant aux équipes d'applications d'utiliser le framework de leur choix.
Des entreprises comme ING, EA et Google implémentent leur langage de conception dans leurs composants Web.
Entreprise: composants Web chez Salesforce
Les composants Web sont également en train d'être à la pointe de la technologie dans les entreprises, car ils constituent une technologie sûre et pérenne à utiliser comme standard. Caridy Patiño, architecte de la plate-forme d'interface utilisateur de Salesforce, a expliqué pourquoi l'entreprise a créé cette plate-forme à l'aide de composants Web.
Salesforce est un ensemble d'applications, dont beaucoup proviennent d'acquisitions. Chacune d'entre elles peut fonctionner sur sa propre pile technologique. Comme elles reposent sur des piles différentes, il est difficile de leur donner la même apparence. En outre, Salesforce permet aux clients de créer leurs propres applications personnalisées à l'aide de la plate-forme Salesforce. Dans l'idéal, les composants devraient donc également être utilisables par des développeurs externes.
Salesforce a identifié un ensemble de besoins parmi les clients de sa plate-forme:
- Les solutions standards, plutôt que propriétaires, permettent de trouver plus facilement des développeurs expérimentés et de déployer plus rapidement de nouveaux développeurs.
- Modèle de composant courant permettant de personnaliser une application Salesforce de la même manière.
Elle a également identifié des éléments que les clients ne recherchaient pas:
- Modifications destructives de leurs composants et applications En d'autres termes, la rétrocompatibilité était indispensable.
- Être coincé avec d'anciennes technologies et incapable d'évoluer.
- Je suis coincée à l'intérieur d'un jardin clos.
L'utilisation de composants Web comme base pour la nouvelle plate-forme d'interface utilisateur a répondu à tous ces besoins, et le résultat : les nouveaux composants Web Lightning.
Premiers pas avec les composants Web
Il existe de nombreuses façons de se lancer avec les composants Web.
Si vous créez une application Web, pensez à utiliser certains des nombreux composants Web prêts à l'emploi disponibles. En voici quelques exemples :
- Google propose son propre système Material Design sous forme de composants Web: les composants Web Material.
- Les éléments filaires sont un ensemble complet de composants Web au design soigné et dessiné à la main.
- Il existe d'excellents composants Web spéciaux, tels que
<model-viewer>, que vous pouvez intégrer à 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 seul composant ou une seule bibliothèque que vous souhaitez 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 assez basiques. Il existe donc un certain nombre de bibliothèques disponibles pour faciliter le processus.
Pour commencer à créer vos propres composants, vous pouvez essayer LitElement, une classe de base de composants Web développée par Google qui offre une excellente expérience de rendu fonctionnelle semblable à celle de React.
Autres outils et bibliothèques à envisager:
- Stencil est un framework Web axé sur les composants. Il inclut plusieurs fonctionnalités de framework populaires, telles que JSX et TypeScript.
- Les éléments Angular permettent d'encapsuler des composants Angular en tant que composants Web.
- Le wrapper de composant Web Vue.js permet de créer des packages à partir de composants Vue en tant que composants Web.
Autres ressources :
- Le site open-wc.org propose des informations de démarrage très utiles, ainsi que des conseils et des configurations par défaut pour les outils de compilation et de développement.
- Le cours Web Fundamentals présente les API de base des composants Web, ainsi que les bonnes pratiques à suivre pour concevoir des composants Web.
- MDN fournit de la documentation de référence sur les API de composants Web, ainsi que des tutoriels. \
Image principale de Jason Tuinstra sur Unsplash.
Note de l'éditeur: Le graphique d'utilisation des éléments personnalisés a été mis à jour pour afficher les données d'utilisation mensuelles complètes, comme indiqué sur chromestatus.com. Une version précédente de cet article comprenait un graphique avec une précision de six mois, sans les mois les plus récents. Les séries V0 et V1 du graphique d'origine étaient empilées. Elles sont maintenant affichées de manière non empilée avec une ligne totale pour éliminer toute ambiguïté. Le pic soudain de fin 2017 est dû à une modification du système de collecte de données de chromestatus.com. Cette modification a affecté les statistiques de toutes les fonctionnalités de la plate-forme Web et a permis de réaliser des mesures plus précises à l'avenir.