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 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. D'après nos calculs, entre 5 et 8 % de toutes les pages chargées aujourd'hui utilisent un ou plusieurs composants Web. Cela fait des composants Web l'une des nouvelles fonctionnalités de plate-forme Web les plus réussies de ces 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 d'édition créés avec AMP, car les composants AMP sont également des composants Web. De nombreuses entreprises adoptent également les 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 permettent d'étendre l'ensemble de balises HTML intégrées du navigateur. Les composants Web fournissent les éléments suivants:
- Méthode courante pour créer un composant (à l'aide d'API DOM standards).
- Méthode courante de réception et d'envoi de données (à l'aide de propriétés/d'événements).
En dehors de cette interface standard, les normes ne disent rien sur la manière dont un composant est réellement implémenté:
- Moteur de rendu utilisé pour créer le 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.
Les auteurs peuvent choisir des modèles de rendu fonctionnel comme React pour créer leurs composants Web, ou utiliser des modèles déclaratifs comme ceux que vous trouverez dans Angular ou Vue. En tant qu'auteur, vous avez la liberté totale 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 ils peuvent être exprimés en HTML, ils peuvent être affichés par tous les frameworks populaires. Vos composants peuvent ainsi être utilisés plus largement, dans un éventail plus diversifié d'applications, sans enfermer les utilisateurs dans un seul framework.
Étant donné que l'interface du composant est standard, les composants Web implémentés à l'aide de différentes bibliothèques peuvent être mélangés sur la même page. Cela permet de pérenniser vos applications lorsque vous mettez à jour votre stack technologique. Au lieu d'effectuer un changement radical entre un framework et 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 connaissent un énorme succès dans divers 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 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 à l'infrastructure de l'industrie de l'édition pour diffuser du contenu.
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, 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 adaptés à cet effet.
Souvent, les concepteurs doivent faire face à de nombreuses équipes qui créent leurs propres versions des composants du système de conception en plus de React, d'Angular et de 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 écrit une fois, exécuté partout, qui laisse aux équipes d'applications 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: composants Web dans Salesforce
Les composants Web connaissent également une progression remarquable au sein des entreprises en tant que technologie sûre et pérenne à standardiser. Caridy Patiño, architecte de la plate-forme d'interface utilisateur de Salesforce, a expliqué pourquoi elle a créé sa plate-forme d'interface utilisateur à 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. Étant donné qu'ils sont basés sur différentes piles, il est difficile de leur donner tous le même aspect. 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 doivent également être 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 de former 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 non compatibles avec leurs composants et applications Autrement dit, la rétrocompatibilité était indispensable.
- être bloqué par une ancienne technologie et ne pas pouvoir évoluer ;
- être enfermé dans un jardin clos ;
L'utilisation de composants Web comme base de la nouvelle plate-forme d'UI répondait à tous ces besoins. C'est ainsi que sont nés les nouveaux composants Web Lightning.
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 prêts à l'emploi disponibles. En voici quelques exemples :
- Google vend son propre système de conception Material sous forme de composants Web: les composants Web Material.
- Les éléments Wired sont un ensemble de composants Web qui présentent un aspect esquissé, dessiné à la main.
- Il existe d'excellents composants Web à usage spécial, comme
<model-viewer>, que vous pouvez ajouter à n'importe quelle application pour y 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és, mais elles sont assez bas niveau. Par conséquent, un certain nombre de bibliothèques sont 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 expérience de rendu fonctionnelle de qualité, semblable à celle de React.
Autres outils et bibliothèques à prendre en compte:
- Stencil est un framework axé sur les composants Web. Il inclut plusieurs fonctionnalités de framework populaires, comme JSX et TypeScript.
- Les éléments Angular permettent d'encapsuler des composants Angular en tant que composants Web.
- Le wrapper de composants Web Vue.js permet de empaqueter des composants Vue en tant que composants Web.
Autres ressources :
- open-wc.org propose d'excellentes informations pour vous lancer, ainsi que des conseils et des configurations par défaut pour les outils de compilation et de développement.
- Principes fondamentaux du Web fournit des informations de base sur les API de base des composants Web et les bonnes pratiques de conception de ces composants.
- MDN fournit des documents de référence sur les API des composants Web, ainsi que des tutoriels. \
Image principale par Jason Tuinstra sur Unsplash.
Remarque de l'éditeur: Le graphique sur l'utilisation des éléments personnalisés a été mis à jour pour afficher l'ensemble des données d'utilisation mensuelles, comme indiqué sur chromestatus.com. Une version précédente de cet article incluait un graphique avec une granularité 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 désormais affichées sans empilement avec une ligne de total pour éliminer toute ambiguïté. Le pic soudain de fin 2017 est dû à une modification du système de collecte des données pour chromestatus.com. Cette modification a affecté les statistiques de toutes les fonctionnalités de la plate-forme Web et a permis d'obtenir des mesures plus précises à l'avenir.