Tutti noi abbiamo progetti a cui preferiremmo non lavorare. Il codice \u00e8 diventato ingestibile, lo scopo si \u00e8 evoluto, sono state fatte correzioni veloci su altre correzioni e la struttura \u00e8 crollata sotto il suo peso di spaghetti code. Creare codice pu\u00f2 essere un affare disordinato.<\/p>\n
I progetti beneficiano dell’utilizzo di moduli semplici e indipendenti con una sola responsabilit\u00e0. Il codice modulare \u00e8 incapsulato, quindi c’\u00e8 meno bisogno di preoccuparsi dell’implementazione. Finch\u00e9 si sa cosa produrr\u00e0 un modulo quando gli viene dato un insieme di input, non si ha necessariamente bisogno di capire come<\/em> ha raggiunto quell’obiettivo.<\/p>\n Applicare concetti modulari a un singolo linguaggio di programmazione<\/a> \u00e8 semplice, ma lo sviluppo web richiede un mix diversificato di tecnologie. I browser<\/a> analizzano HTML<\/a>, CSS e JavaScript per rendere il contenuto della pagina, gli stili e le funzionalit\u00e0.<\/p>\n Non sempre si combinano facilmente perch\u00e9:<\/p>\n Questi problemi si aggiungono a quelli incontrati da runtime di linguaggi, framework<\/a>, database e altre dipendenze utilizzate sul server.<\/p>\n Un Web Component \u00e8 un modo per creare un blocco di codice incapsulato e a responsabilit\u00e0 singola che pu\u00f2 essere riutilizzato in qualsiasi pagina.<\/p>\n Considerate il tag HTML Lo stile e la funzionalit\u00e0 sono forniti, anche se \u00e8 possibile apportare modifiche utilizzando vari attributi e chiamate all’API JavaScript. Qualsiasi numero di elementi E se avete bisogno di una vostra funzionalit\u00e0 custom? Ad esempio, un elemento che mostri il numero di parole nella pagina? Non c’\u00e8 un tag HTML Framework come React<\/a> e Vue.js<\/a> permettono agli sviluppatori di creare componenti web dove il contenuto, lo stile e le funzionalit\u00e0 possono essere definiti in un singolo file JavaScript. Questi risolvono molti problemi di programmazione complessi, ma bisogna tenere a mente che:<\/p>\n Per fortuna, i concetti popolari introdotti nelle librerie e nei framework di solito si fanno strada negli standard web. C’\u00e8 voluto del tempo, ma i Web Component sono arrivati.<\/p>\n\n Dopo molte false partenze, il concetto di Web Component standard \u00e8 stato introdotto per la prima volta da Alex Russell alla conferenza Fronteers nel 2011<\/a>. La libreria Polymer<\/a> di Google (un polyfill basato sulle proposte correnti) \u00e8 arrivata due anni dopo, ma in Chrome e Safari le prime implementazioni non sono apparse fino al 2016.<\/p>\n I vendor dei browser si sono presi del tempo per negoziare i dettagli, ma i Web Component sono stati aggiunti a Firefox nel 2018 e Edge nel 2020 (quando Microsoft \u00e8 passata al motore Chromium).<\/p>\n Comprensibilmente, pochi sviluppatori sono stati disposti o sono riusciti ad adottare i Web Component, ma abbiamo finalmente raggiunto un buon livello di supporto da parte dei browser con API stabili. Non tutto \u00e8 perfetto, ma sono un’alternativa sempre pi\u00f9 valida ai componenti basati su framework.<\/p>\n Anche se non siete ancora disposti a liberarvi del vostro framework preferito, i Web Component sono compatibili con ogni<\/em> framework e le API saranno supportate per gli anni a venire.<\/p>\n Ecco un elenco di repository di componenti web pre-costruiti disponibili per tutti:<\/p>\n … ma scrivere il proprio codice \u00e8 pi\u00f9 divertente!<\/p>\n Questo tutorial offre un’introduzione completa ai componenti web scritti senza un framework JavaScript. Vi spiegheremo cosa sono e come adattarli ai vostri progetti web. Avrete bisogno di qualche conoscenza di HTML5<\/a>, CSS e JavaScript.<\/p>\n I componenti web sono elementi HTML personalizzati come Dovete definire una classe ES2015 per controllare l’elemento. Pu\u00f2 avere qualsiasi nome, ma HelloWorld \u00e8 tra i pi\u00f9 comuni. Deve estendere l’interfaccia HTMLElement<\/a>, che rappresenta le propriet\u00e0 e i metodi predefiniti di ogni elemento HTML.<\/p>\n\n
Guarda la nostra video guida<\/a> ai componenti web<\/h3>\n
Cosa Sono i Web Component?<\/h2>\n
<video><\/strong><\/code> . Dato un URL<\/a>, un utente pu\u00f2 utilizzare controlli come play, pausa, indietro, avanti e regolare il volume.<\/p>\n<video><\/strong><\/code> pu\u00f2 essere collocato all’interno di altri tag, e non entreranno in conflitto.<\/p>\n<wordcount><\/strong><\/code> (per il momento).<\/p>\n\n
Breve Storia dei Web Component<\/h2>\n
\n
Introduzione ai Web Component<\/h2>\n
<hello-world><\/hello-world><\/b><\/code>. Il nome deve contenere un trattino per non andare in conflitto con elementi supportati ufficialmente nella specifica HTML.<\/p>\n