Custom Elements ed il futuro del Web Development


Ciao ragazzi! Benvenuti in una puntata della serie pillole. Oggi vedremo un argomento secondo me molto
interessante che riguarda l’evoluzione del web. In particolare daremo uno sguardo da vicino
ai custom elements, che cosa sono, a che cosa servono e perché si è deciso di implementarli
all’interno delle specifiche dell’HTML5. I custom elements in realtà fanno parte di
una famiglia più grande, quella dei web components che non è altri se non una suite di differenti
tecnologie che possono essere utilizzate assieme o separatamente per permettere la creazione
di elementi personalizzati (vedremo poi più in dettaglio di che cosa stiamo parlando),
versatili, con funzionalità incapsulate e che possono essere riutilizzati all’interno del nostro
codice senza pericoli di collisioni di alcun genere. Uno dei “problemi storici” dell’HTML è sempre
stato il fatto di avere dei TAG ben definiti e fissi che da una parte hanno permesso la
standardizzazione nella creazione di pagine web, dall’altra ne hanno appiattito il senso
e limitato le possibilità. Ad esempio: abbiamo il TAG

per la creazione
di contenitori, poi c’è il tag

per i paragrafi testuali, il tag

    ed i vari

    1. etc per la creazione di elenchi puntati e/o numerati, e così via. Quindi in sostanza tutte le pagine web ad
      oggi non sono altro che una sequenza di TAG ben definiti, immutabili e contenuti
      all’interno del. I custom elements, che sono la tecnologia
      più importante tra le 4 esistenti nella famiglia dei web components, permettono di creare nuovi
      tipi di elementi HTML, fondamentalmente stiamo parlando di nuovi TAG utilizzabili all’interno
      di pagine HTML, che possono godere di funzionalità peculiari dedicate. Prima di entrare nel dettaglio, ci tengo a
      riportarvi tutte le tecnologie facenti parte dei web components.
      Come detto, abbiamo i custom elements che sono un set di API JavaScript e che permettono
      la creazione di nuovi elementi HTML e ne consentono la definizione del comportamento.
      Abbiamo poi lo shadow DOM che è un altro set di API JavaScript e che permette di collegare
      ad un elemento HTML un DOM “fantasma” e di controllarne le funzionalità associate. Questo DOM è renderizzato in maniera separata
      rispetto a quello principale del documento, e questo permette di mantere private le proprietà
      e features dell’elemento stesso cosicché non ci siano collisioni con le altre parti
      del documento. Troviamo poi i template HTML che consentono
      la creazione di template appunto che non vengono renderizzati e mostrati direttamente sulla
      pagina, bensì sono blocchi di codice HTML che possono essere riutilizzati più volte
      come base per strutture personalizzate. Ed infine ci sono gli import HTML e CSS
      changes i quali consentono, una volta creati gli elementi personalizzati, di farceli riutilizzare
      inserendoli in file separati e quindi importandoli all’interno delle pagine in cui desideriamo
      utilizzarli. I web components sono un argomento
      decisamente nuovo ed infatti non tutti i browser
      li supportano al 100%… La più recente specifica è la revisione
      v1, e le ultime versioni di Chrome-Safari ed in generale qualsiasi browser che utilizza
      WebKit come motore ne hanno piena compatibilità; Firefox la sta introducendo man mano, ma non
      tutto è gestito completamente; Edge deve ultimarne il supporto, e allo stesso modo
      i vari browser secondari (anche mobile) non sono ancora pronti all’adozione nativa. Per superare questi limiti esistono librerie
      polyfill (in descrizione trovate alcuni link di supporto), librerie che mettono una pezza
      e consentono già ora di far riconoscere al browser gran parte delle tecnologie descritte. Io stesso per mostrarvi tra poco un esempio
      su Firefox ho adoperato una libreria esterna. Ma torniamo ai custom elements. Come vi ho appena raccontato sono loro i veri
      protagonisti della storia, visto che il resto dei web components fa fondamentalmente
      da supporto ad essi. Quindi abbiamo detto che cosa sono i custom
      elements (cioè API JavaScript), a che cosa servono (cioè per la creazione di TAG personalizzati),
      e perché sono stati implementati nell’HTML5 (cioè per superare i limiti del DOM e del
      linguaggio HTML stesso). Ma quindi, come li sfruttiamo? Tanto per cominciare questi elementi personalizzati
      possono essere sia costruiti completamente da zero, sia estendere elementi già esistenti,
      o ancora è possibile creare custom element che estendano altri custom elements. Ad esempio si può creare un elemento “my-element”
      ex novo, oppure creare un “my-button” che estende il TAG HTML. Ovviamente questi elementi possono essere
      generati anche direttamente in JavaScript con la funzione document.createElement
      (“nome-del-custom-element”, e poi eventualmente { is: “nome-del-tag-che-abbiamo-esteso” }) e poi appesi al DOM. OK! Fin qui abbiamo creato uno o più nuovi elementi
      personalizzati, ma che alla fine non fanno nulla. Diamogli quindi motivo di esistere aggiungendo
      loro un comportamento. Ad esempio possiamo fare in modo che il nostro
      “my-element” contenga al suo interno un blocco di testo ed una immagine posizionati uno di
      fianco all’altra. La struttura dovrà perciò essere composta
      da un wrapper che conterrà il tutto, quindi la suddetta immagine ed il blocco testuale. Per velocizzare lo sviluppo creiamo tutto
      l’occorrente direttamente nel costruttore della nostra classe. Ovviamente dovremo avere nella nostra cartella
      in cui è contenuta la pagina che stiamo creando anche le risorse grafiche che richiediamo. In questo esempio ho predisposto alcune immagini
      demo, ma è ovvio che tutto può essere reso più complesso a piacere. La prima cosa da fare quindi è indicare uno
      shadow root DOM in cui verranno posizionati gli altri elementi. Dopodiché creiamo la struttura desiderata
      con il wrapper e immagine + testo. Catturiamo quindi gli attributi “text” e “img” che
      consentiranno di aggiungere testo ed immagine al nostro elemento personalizzato,
      come vedremo tra un attimo. Il wrapper va appeso allo shadow DOM e ad esso
      vanno collegati l’icona ed il blocco di testo. Per quanto riguarda il CSS per comodità lo
      posizioniamo in un file esterno, ma è sempre possibile definirlo un po’ dove si
      vuole, anche qui nella stessa classe. Creata la classe, definiamo il nostro custom
      element con l’API apposita e lo includiamo nella nostra pagina HTML in modo diretto,
      specificando come anticipato gli attributi “text” e “img” con le informazioni del caso. E per rendere l’esempio più sensato, creiamo
      3 istanze del nostro custom element. E voilà possiamo vedere come il browser vada
      ad interpretare il nostro elemento personalizzato, eseguire il javascript ad esso connesso e
      generare automaticamente tutto l’HTML indicato. Ovviamente stiamo parlando di un esempio davvero
      banale, ma che può già far capire come sia possibile ideare dei piccoli componenti (complessi
      a piacere) in grado di vivere all’interno di una pagina HTML con funzionalità avanzate
      rispetto ai TAG tradizionali. Possiamo infatti associare funzioni particolari,
      possiamo far interagire in tempo reale i custom element con gli eventi del DOM (visto che
      l’interazione è binaria tra classe JavaScript e HTML generato e in tempo reale),
      e via discorrendo. Il tutto senza la necessità di utilizzare
      framework particolari e sfruttando nativamente tutte le tecnologie offerte dall’HTML5 e dai
      web components. In tutto questo, di fondamentale importanza
      per i custom elements sono i metodi di callback che vengono richiamati durante il ciclo di
      vita degli elementi stessi. Ci sono 4 metodi che sono richiamati rispettivamente
      quando una istanza del nostro elemento personalizzato viene: creata, inserita nel DOM, rimossa dal
      documento, oppure quando un suo attributo viene aggiunto/rimosso o aggiornato. Questi metodi sono davvero utili perché consentono
      di far dialogare i nostri elementi personalizzati con altri elementi presenti sulla pagina,
      in modo completamente automatico. Ovviamente non è necessario definirli, va
      fatto soltanto se desideriamo che i nostri custom elements dialoghino con l’esterno
      tramite precisi eventi. Direi però di fermarci qui per non aggiungere
      troppa carne al fuoco. Bene, credo di avervi dato una panoramica
      sufficentemente esaustiva sui custom elements e sul perché potranno fornire interessanti
      funzionalità per gli sviluppatori nella creazione di applicazioni e siti Web. Spero che il video vi sia stato utile, in
      caso fatemelo sapere con un feedback, e se avete domande non esitate a scrivere qui sotto
      nei commenti oppure sui vari canali social o anche sul blog. Ci sentiamo al prossimo video: se ancora non
      foste iscritti al canale, fatelo attivando le notifiche per essere subito avvisati quando
      lo pubblicherò. A presto, ciao!!

Be the first to comment

Leave a Reply

Your email address will not be published.


*