Chaque fois, lorsqu'un groupe de standards Web Components est mentionné dans un article ou dans des commentaires, presque la même chose se produit: des gens qui, souvent, ont très peu d'idée de ce qui est en jeu, commencent à partager des opinions «d'experts». A chaque fois, les discussions glissent dans un même scénario, dont le nom rime avec le mot "tour". Et j'aimerais beaucoup une transition positive, constructive et vers des questions d'application pratique. Dans cet article, je vais essayer de répondre immédiatement à la grande majorité des questions typiques et réfuter le maximum d'idées fausses courantes. Par la suite, dans une situation difficile, il sera possible de battre avec un seul lien. Alors allons-y.
Les bases
Les composants Web sont un ensemble de spécifications modernes comprenant les éléments de base suivants:
Éléments personnalisés - une capacité native de créer vos propres balises HTML, avec le comportement, l'apparence et votre propre balisage interne spécifiés.
Shadow DOM - séparation de la structure interne du composant avec encapsulation des styles internes et du reste du corps du document.
Modèle - une balise spéciale qui vous permet de stocker des morceaux de balisage, de les appliquer et de les réutiliser si nécessaire.
Importations HTML - la possibilité d'importer des blocs HTML stockés dans d'autres fichiers HTML
Le plat de tout ce qui précède peut être assaisonné avec des variables CSS natives, des modules ES natifs et une poussée de serveur HTTP / 2. Il y a également des emplacements, des attributs personnalisés, des événements personnalisés et d'autres détails. À leur sujet un peu plus tard, lorsque nous passerons à la pratique.
Oui, ces composants Web ne sont presque pas pris en charge.
Les chiffres secs sont les meilleurs amis d'un ingénieur. Jetons un œil à «presque nulle part» sous cet angle:
Éléments personnalisés - 78,71%
DOM fantôme - 79,12%
Modèle - 89,61%
Importations HTML - 69,16%
Comme nous pouvons le voir, les technologies ci-dessus fonctionnent dans les navigateurs pour la grande majorité des utilisateurs. Les importations HTML gâchent un peu l'image, mais nous ne sommes pas obligés d'utiliser l'ensemble complet (je préfère les modules ES natifs pour tout décomposer en blocs pratiques), même individuellement, vous pouvez en trouver beaucoup de «savoureux» sur cette liste.
Je recommande fortement de ne pas me faire confiance aveuglément, mais de suivre les liens fournis. Là, par exemple, vous pouvez voir l'état actuel de ces spécifications et le fait que les éléments personnalisés et le Shadow DOM
ont reçu un support complet dans Firefox, à partir de la version 63 . Lorsque la plupart des utilisateurs de renards passeront à cette version, et que ce moment approche à grands pas, les chiffres globaux deviendront encore plus attrayants. De plus, vous avez peut-être remarqué la «prise en charge incomplète» des éléments personnalisés et du Shadow DOM dans Safari. Un navigateur Apple ne vous permettra pas d'hériter votre composant d'un élément de navigateur natif intégré, tel qu'un bouton, une sélection, etc. Safari a également quelques nuances dans les sélecteurs CSS lors de l'utilisation du DOM fantôme. En pratique, il est tout à fait possible de vivre avec et de ne pas pleurer. Apparemment, par tradition, Microsoft Edge est un outsider parmi les navigateurs modernes. Les développeurs affirment que le support est en cours d'implémentation. Nous attendons.
Eh bien, que faire du reste ~ 20% des utilisateurs?
Les Polyfiles peuvent être utilisés pour soutenir ces gars-là. Oui, cela fonctionnera un peu plus lentement avec les polyphiles, mais ce n'est pas perceptible à l'œil nu. Mais pour tout le monde - ce sera plus rapide.
Nous avons essayé il y a cinq ans de réaliser un projet sur le polymère. Tout était terriblement lent.
En ces temps «lointains», le projet de norme (v0) faisait rage, dont le support n'était implémenté que dans Chrome. Depuis lors, beaucoup de choses ont changé: une nouvelle version de la norme, la v1, a été adoptée, la prise en charge native a été mise en œuvre dans divers navigateurs, les polyphiles ont été réécrits et les bonnes pratiques sont allées jusqu'au bout. Le polymère lui-même est passé d'un aperçu technologique à une solution complètement fonctionnelle, ce qui est agréable à gérer.
Certains polymères ... De quoi s'agit-il?
Polymer est une bibliothèque pour créer des composants Web. Il implémente la prise en charge de tout ce «sucre» auquel nous sommes si habitués lorsque nous travaillons avec des frameworks frontaux populaires: liaisons de données dynamiques, répéteurs pour travailler avec des tableaux, etc. À l'heure actuelle, la 3ème version stable a déjà été publiée cette bibliothèque. Le développement est réalisé avec la participation active des développeurs Chrome. L'écosystème est maintenu par Google.
La longueur totale de la barbe des développeurs est ...Quand utiliser les composants Web?
Si vous avez besoin d'une bibliothèque partagée universelle de composants d'interface utilisateur. Un cas dans la vie: un projet dans lequel l'application principale est écrite dans React et le back office dans Angular. Et je veux la similitude et toutes sortes de réutilisation de la base de code. Et les composants Web se sentent bien
dans différents écosystèmes .
Si vous êtes proche de la conception dans l'approche du navigateur . Vous pouvez créer sans reconstruire constamment l'application et sans dépendances inutiles. Cela rend le prototypage une expérience très agréable et permet à votre application d'évoluer en douceur de l'état du prototype à l'état de la version de production. J'adore ça.
Si vous aimez le bon vieux POO : créez une classe en héritant d'un élément HTML, implémentez-y les fonctionnalités et les chignons souhaités, puis héritez-en des classes pour des composants spécialisés. Et maintenant, vous avez votre propre microframework. La beauté!
Si vous détestez BEM : Shadow DOM isole les styles de composants. Pas besoin de nommage monstrueux à plusieurs étages, ni de navigation vers les déclarations dans un tas CSS commun. Tout est compact dans un composant: styles, mise en page, logique.
Si vous développez des applications basées sur Electron. La version actuelle de Chromium in Electron prend déjà en charge tout ce dont vous avez besoin. Malgré le décalage général dans les versions.
Si vous voulez écrire votre framework / bibliothèque. Les composants Web sont une excellente base de composition pour de telles expériences.
Si vous avez besoin d'une approche hybride: vous implémentez des pages Web classiques avec des éléments SPA : les balises personnalisées peuvent être utilisées avec n'importe quel moteur de modèle de serveur, elles peuvent simplement faire partie du balisage général et définir votre objectif au bon moment. Vous pouvez maintenir un équilibre délicat entre ce qui est rendu sur le serveur et ce qui fonctionne sur le client.
Si vos utilisateurs utilisent des navigateurs modernes. En soi.
Si vous développez PWA : les principales plates-formes mobiles prennent tout en charge. Pour un démarrage rapide, il existe un
kit de démarrage pwa .
Si vous êtes intéressé par une sécurité accrue des applications et qu'un audit de dépendance détaillé est prohibitif pour vous. Ici, tout est simple: moins de dépendances - moins de trous non contrôlés.
Si vous êtes un optimiseur maniaque et aimez travailler avec l'API DOM : les composants Web font partie de l'API DOM, avec toutes les fonctionnalités standard des éléments DOM ordinaires.
Si vous avez brûlé de briser la compatibilité descendante des versions de bibliothèque : lorsque tout est basé sur le standard hardcore, il est en quelque sorte plus fiable.
Quand vous ne devez PAS utiliser de composants Web
Lorsque les exigences de votre projet, il est nécessaire de prendre en charge les navigateurs anciens et exotiques. Dans ce cas, vous ne serez pas envié en général. Mes condoléances.
Lorsque vous développez des produits simples avec un cycle de vie court et que vous n'avez pas besoin de développer une base de code unique.Lorsque vous traitez principalement avec un code hérité.Lorsque vous et vos collègues n'utilisez que quelque chose à la mode et ne voulez rien savoir d'autre.Pourquoi ai-je besoin de tout cela? J'ai React / Vue / Angular / etc, assez pour moi ...
Ensuite, qu'une partie importante de ce que JavaScript fait dans les bibliothèques et les frameworks populaires peut être déplacée vers une implémentation de navigateur de niveau inférieur. Par souci de vitesse, réduire la quantité exorbitante de dépendances, réduire la dépendance même des dépendances. Pour le bien.