Nous avons tous des projets sur lesquels nous pr\u00e9f\u00e9rerions ne pas travailler. Le code est devenu ing\u00e9rable, la port\u00e9e a \u00e9volu\u00e9, des corrections rapides ont \u00e9t\u00e9 appliqu\u00e9es par-dessus d’autres corrections et la structure s’est effondr\u00e9e sous son poids de code spaghetti. Le codage peut \u00eatre une activit\u00e9 d\u00e9sordonn\u00e9e.<\/p>\n
Les projets gagnent \u00e0 utiliser des modules simples et ind\u00e9pendants qui ont une seule responsabilit\u00e9. Le code modulaire est encapsul\u00e9, il y a donc moins besoin de se soucier de la mise en \u0153uvre. Tant que vous savez ce qu’un module va produire lorsqu’il re\u00e7oit un ensemble d’entr\u00e9es, vous n’avez pas n\u00e9cessairement besoin de comprendre comment<\/i> il a atteint cet objectif.<\/p>\n
Appliquer les concepts modulaires \u00e0 un seul langage de programmation<\/a> est simple, mais le d\u00e9veloppement web n\u00e9cessite un m\u00e9lange vari\u00e9 de technologies. Les navigateurs<\/a> analysent le HTML<\/a>, le CSS et le JavaScript pour rendre le contenu, les styles et les fonctionnalit\u00e9s de la page.<\/p>\n Ils ne se m\u00e9langent pas toujours facilement car :<\/p>\n Ces probl\u00e8mes s’ajoutent \u00e0 ceux rencontr\u00e9s par les moteurs d’ex\u00e9cution des langages, les frameworks<\/a>, les bases de donn\u00e9es et les autres d\u00e9pendances utilis\u00e9es sur le serveur.<\/p>\n Un composant web est un moyen de cr\u00e9er un bloc de code encapsul\u00e9, \u00e0 responsabilit\u00e9 unique, qui peut \u00eatre r\u00e9utilis\u00e9 sur n’importe quelle page.<\/p>\n Consid\u00e9rez la balise HTML Le style et les fonctionnalit\u00e9s sont fournis, mais vous peux apporter des modifications en utilisant divers attributs et appels API JavaScript. Un nombre quelconque d’\u00e9l\u00e9ments Et si vous avez besoin de votre propre fonctionnalit\u00e9 personnalis\u00e9e ? Par exemple, un \u00e9l\u00e9ment indiquant le nombre de mots sur la page ? Il n’y a pas (encore) de balise HTML Les frameworks tels que React<\/a> et Vue.js<\/a> permettent aux d\u00e9veloppeurs de cr\u00e9er des composants web dont le contenu, le style et la fonctionnalit\u00e9 peuvent \u00eatre d\u00e9finis dans un seul fichier JavaScript. Ils permettent de r\u00e9soudre de nombreux probl\u00e8mes de programmation complexes mais n’oubliez pas que :<\/p>\n Heureusement, les concepts populaires introduits dans les biblioth\u00e8ques et les frameworks font g\u00e9n\u00e9ralement leur chemin dans les normes web. Cela a pris du temps, mais les composants web sont arriv\u00e9s.<\/p>\n\n Apr\u00e8s de nombreux faux d\u00e9parts sp\u00e9cifiques aux fournisseurs, le concept de composants web standard a \u00e9t\u00e9 pr\u00e9sent\u00e9 pour la premi\u00e8re fois par Alex Russell lors de la conf\u00e9rence Fronteers en 2011<\/a>. La biblioth\u00e8que Polymer<\/a> de Google (un polyfill bas\u00e9 sur les propositions actuelles) est arriv\u00e9e deux ans plus tard, mais les premi\u00e8res impl\u00e9mentations ne sont apparues dans Chrome et Safari qu’en 2016.<\/p>\n Les fournisseurs de navigateurs ont mis du temps \u00e0 n\u00e9gocier les d\u00e9tails, mais les composants web ont \u00e9t\u00e9 ajout\u00e9s \u00e0 Firefox en 2018 et \u00e0 Edge en 2020 (lorsque Microsoft a adopt\u00e9 le moteur Chromium).<\/p>\n Il est compr\u00e9hensible que peu de d\u00e9veloppeurs aient voulu ou pu adopter les composants web, mais nous avons finalement atteint un bon niveau de prise en charge des navigateurs avec des API stables. Tout n’est pas parfait, mais ils constituent une alternative de plus en plus viable aux composants bas\u00e9s sur des frameworks.<\/p>\n M\u00eame si vous n’\u00eates pas encore pr\u00eat \u00e0 abandonner votre pr\u00e9f\u00e9r\u00e9, les composants web sont compatibles avec tous les<\/i> frameworks et les API seront prises en charge pendant des ann\u00e9es.<\/p>\n Des d\u00e9p\u00f4tes de composants web pr\u00e9-construits sont disponibles pour que tout le monde puisse y jeter un \u0153il :<\/p>\n …mais \u00e9crire votre propre code est plus amusant !<\/p>\n Ce tutoriel fournit une introduction compl\u00e8te aux composants web \u00e9crits sans framework JavaScript. Vous apprendrez ce qu’ils sont et comment les adapter \u00e0 vos projets web. Vous aurez besoin de quelques connaissances en HTML5<\/a>, CSS et JavaScript.<\/p>\n Les composants web sont des \u00e9l\u00e9ments HTML personnalis\u00e9s tels que Vous devez d\u00e9finir une classe ES2015 pour contr\u00f4ler l’\u00e9l\u00e9ment. Elle peut porter n’importe quel nom, mais HelloWorld est une pratique courante. Elle doit \u00e9tendre l’interface HTMLElement<\/a>, qui repr\u00e9sente les propri\u00e9t\u00e9s et m\u00e9thodes par d\u00e9faut de chaque \u00e9l\u00e9ment HTML.<\/p>\n\n
Consultez notre guide vid\u00e9o<\/a> sur les composants web<\/h3>\n
Que sont les composants web ?<\/h2>\n
<video><\/strong><\/code> . Avec une URL<\/a>, un spectateur peut utiliser des contr\u00f4les comme la lecture, la pause, le retour en arri\u00e8re, l’avance et le r\u00e9glage du volume.<\/p>\n<vid\u00e9o><\/strong><\/code> peuvent \u00eatre plac\u00e9s \u00e0 l’int\u00e9rieur d’autres balises, et ils n’entreront pas en conflit.<\/p>\n<wordcount><\/strong><\/code>.<\/p>\n\n
Une br\u00e8ve histoire des composants web<\/h2>\n
\n
Commencer \u00e0 utiliser les composants web<\/h2>\n
<hello-world><\/hello-world><\/strong><\/code>. Le nom doit contenir un tiret pour ne jamais entrer en conflit avec des \u00e9l\u00e9ments officiellement pris en charge dans la sp\u00e9cification HTML.<\/p>\n