Internet è in continua evoluzione e come frontend developer non ti puoi permettere di rimanere indietro e non approfondire le tue conoscenze. Cavoli noi ci crediamo talmente tanto che abbiamo addirittura aperto una scuola dedicata e pubblicato corsi sempre aggiornati!
Però oggi non sono qua per parlarti della nostra scuola o del nostro approccio alla formazione, hai cliccato su questo titolo perché sei interessato agli HTML Import e non vedo l’ora di approfondire con te la loro conoscenza!
Prima di far questo devo collegarmi all’articolo precedente in cui ti ho presentato i Web Components, una nuova soluzione che ti permetterà di costruire le tue pagine web modularmente. Proprio come per Ajax, i Web Components non sono un’unica tecnologia, ma piuttosto sono un insieme di implementazioni che collaborano tra loro per raggiungere un risultato.
L’acronimo Ajax significa Asynchronous JavaScript and XML ovvero mescolare alcune funzioni JavaScript con dei dati ottenuti da un file XML (oggi è molto più comune usare gli oggetti JSON) per aggiornare sezioni di una pagina web in modo asincrono.
Gli HTML Import sono una di queste tecnologie che permettono di importare pagine web dentro altre, fornendoci la modularità necessaria per lavorare con componenti separati anche in team di grandi dimensioni; oppure ti permetteranno di lavorare con più tranquillità scomponendo il tuo progetto in elementi più semplici da gestire.
Come il titolo di questo articolo ti dovrebbe portare a pensare, tra poco andremo ad analizzare da vicino l’esistenza e l’utilizzo di questo componente di HTML5 che a breve rivoluzionerà completamente il nostro lavoro. Quando i web components inizieranno a essere largamente utilizzati, noi non penseremo più ad elementi HTML distinti comep, div, h1; piuttosto inizieremo a pensare a quale modulo potrà funzionare meglio.
Mi accorgo che sto dando tante cose per scontato, a breve inizieremo ad entrare nel vivo e ti spiegherò tutto per filo e per segno, ma prima di proseguire voglio farti capire bene a quale tipo di rivoluzione ci stiamo approcciando.
Sempre più spesso si sente dire che le conoscenze di HTML e CSS sono ormai uno standard e anche se per certi versi lo sono, conoscere le ultime funzionalità di HTML5 e tecniche CSS avanzate (come le animazioni o gli pseudo-elementi) non è roba da poco. Allo stesso tempo, queste approfondite conoscenze non ti basteranno per essere chiamato Frontend Developer, noi non siamo ancora sviluppatori se ci fermiamo a dei metalinguaggi.
Saremo considerati degli sviluppatori anche perché conosceremo un linguaggio come JavaScript e saremo in grado di integrare funzionalità avanzate all’interno delle pagine che stiamo sviluppando.
Ti ho ricordato i tre linguaggi pilastri dello sviluppo web perché con i Web Components avrai la possibilità di utilizzarli tutti e tre senza conoscerli da vicino. Ovviamente l’obiettivo di questa piattaforma è quello di farti diventare un vero professionista e conoscere bene questo tridente; ma ogni tanto scoprire una tecnica che ci permette di essere più veloci non dovrebbe far tanto male.
Preparandoci quindi a questo nuovo standard è giunto il momento di approfondire la conoscenza con il motore che mette in moto tutto quando: HTML Import.
Cosa può fare HTML Import
Questo nuovo componente non ancora inserito nelle specifiche HTML fà una cosa sola, ma la fa benissimo: ci permette di importare componenti HTML esterni.
Quanto scritto può sembrare incredibilmente ovvio, ma se sviluppi da qualche tempo ti accorgi che non è affatto così. Anzi fino a oggi non esisteva una soluzione che mi permettesse di importare del codice HTML utilizzando soltanto HTML.
Usando invece linguaggi di programmazione come il PHP avremmo potuto usare funzioni come require() o import() che aiutano a importare porzioni di codice (anche HTML) all’interno dei file che compongono il progetto.
Se ci pensi un attimo sù possiamo dire di avere gli iframe, ma questi non permettono di personalizzare il contenuto che stiamo importando dalle pagine esterne.
E questo è un grosso limite!
Eppure l’HTML offre molti strumenti che permettono di riferirsi a un file esterno per inserirlo nelle proprie pagine.
Possiamo includere delle immagini grazie a <img>, riprodurre video o audio rispettivamente con <video> e <audio>, siamo anche in grado di collegare fogli di stile grazie a <link> e <script> personalizzando così le nostre pagine; perché deve essere così difficile includere un pezzo di codice HTML all’interno di un altro?
A parte gli iframe o qualche tecnica JavaScript che si ispira molto alla struttura dei moduli, non avevamo ancora una soluzione semplice per utilizzare questa funzionalità.
Ed ecco che con gli HTML Import tutto questo diventa possibile con un semplice elemento HTML, che tra l’altro conosciamo anche molto bene:<link rel="import" href="componente.html" >
Con questo semplice tag HTML, che usi quotidianamente per collegare i tuoi fogli di stile alla tua pagina web, puoi importare componenti HTML esterni con pochissima fatica. Anche se io non faccio altro che parlare di HTML c’è una cosa che non ti ho ancora detto, ovvero non importerai soltanto dei componenti costruiti con questo metalinguaggio ma anche tutti quelli che è in grado di eseguire nel browser.
Quindi importando un singolo file .html sarai in grado di importare sia codice CSS (che ti aiuterà a aggiungere stile al componente stesso) sia codice JavaScript (che invece ti aiuterà ad aggiungere funzionalità).
Questa dovrebbe essere una notizia che ti fa saltare di gioia perché, come abbiamo detto nell’articolo dedicato ai Web Components, adesso sei in grado di importare dei blocchi di codice che hanno funzionalità avanzate senza neanche doverti sforzare a programmare tu stesso queste caratteristiche.
Purtroppo non tutte le buone notizie possono rimanere tali perché gli HTML Import non sono ancora diventati uno standard riconosciuto dai maggiori browser in circolazione. Questa sintassi è perfettamente riconosciuta da Google Chrome (che ne fa largo uso), ma gli altri browser devono ancora reggere il passo.
Nonostante Mozilla abbia dichiarato la volontà di non aggiungere la compatibilità al suo browser (anche se possiamo aggiungerla visitando la pagina about:config come mostrato nell’immagine qua sopra), al momento dobbiamo accontentarci del polyfil creato proprio da Web Components che con Bower puoi tranquillamente installare con un:$bower install --save webcomponents/webcomponentsjs
Ovviamente non sei costretto a utilizzare questo componente aggiuntivo visto che potrai tranquillamente scaricare il file .js direttamente dal sito.
Qualunque sia la tua preferenza per l’installazione di questo script, ti consiglio caldamente di utilizzare il polyfil perché ti permetterà di rendere compatibile queste funzionalità anche con altri browser.
Se ti interessa scoprire come inserire un elemento puoi fare riferimento al nostro articolo precedente dove ti mostriamo come questo sia possibile utilizzando Polymer, in questo articolo il nostro unico interesse e rivolto nei confronti delle funzionalità messe a disposizione da questa nuova soluzione.
Come si comporta HTML Import
Quando un browser si trova di fronte a un elemento HTML importato si comporta nello stesso modo di quando carica la pagina web del nostro sito. Il suo parser permette di interpretare il contenuto in ordine lineare. Questo significa che gli elementi script che vengono trovati nella parte superiore dell’HTML verranno eseguiti precedentemente rispetto a quelli che si trovano sul fondo, stessa cosa accade ovviamente anche agli elementi link che andremo a utilizzare.
Visto che i browser attendono il download dei file JavaScript collegati alla pagina prima di leggere gli altri elementi HTML e iniziare a renderizzare la pagina, bisogna stare attenti alle performance. Te lo dico perché molto spesso un elemento HTML importato contiene anche codice JavaScript e CSS che dovrà essere scaricato a sua volta e rallenterà di conseguenza il caricamento della pagina.
Per risolvere questo problema è possibile attivare un’attributo che ti permetterà di caricare in modo asincrono le varie risorse che compongono l’elemento. Questo è un grosso vantaggio visto che altrimenti le nostre pagine subirebbero un forte rallentamento.
<link async rel="import" href="componente.html">
Inserendo soltanto async sarai in grado di modificare la tipologia di connessione che il tuo browser avrà con il server che contiene le risorse del sito. In una connessione normale il nostro utilizzo del sito è stato delegato ad una forma di richiesta/risposta dove dobbiamo attendere il ricevimento delle informazioni desiderate prima di poter svolgere un’altra attività sul sito.
Come puoi notare dallo schema che ho riprodotto qua sopra, ogni volta che richiediamo qualcosa al server (come un componente della pagina) dobbiamo restare in attesa della sua risposta prima di poter vedere le nuove informazioni. Benché questa sia una situazione che sussiste da decine di anni e che viene parzialmente risolta anche con l’avvento dell’HTTP2, oggi possiamo velocizzare ulteriormente utilizzando una connessione asincrona.
Spero che questo schema non sia troppo complesso, ma quello che ho cercato di farti vedere è che con delle connessioni asincrone permettiamo al browser di richiedere e aggiornare delle porzioni della pagina man mano che le informazioni vengono restituite dal server.
Per il nostro utente finale significa poter avere un’esperienza d’uso più fluida e non dover aspettare il completo caricamento della pagina per poterla consultare.
La gestione delle dipendenze
Aver scoperto che è possibile utilizzare HTML Import con una connessione asincrona ci ha permesso di capire che grazie a questo semplice attributo i vari elementi che colleghiamo saranno caricati man mano che questi verranno restituiti dal server.
Come si può notare anche dalle immagini, questo si traduce in un lavoro più veloce da parte del server e incrementa le prestazioni del sito, per fortuna c’è anche un’altra caratteristica che permette a questo modulo di lavorare al massimo delle prestazioni.
Visto che importando file .html abbiamo anche l’opportunità di eseguire codice JavaScript e i fogli di stile dobbiamo pensare a come verranno gestite le dipendenze dei nostri script. Ad esempio se per la creazione dei tuoi elementi hai preso come base jQuery, in ogni tuo elemento sarà presente una stringa del tipo <script src="jquery.min.js"></script> perché ovviamente non possiamo sapere se nelle pagine in cui verrà inserita sarà presente anche questa libreria.
Se sei uno sviluppatore che tiene d’occhio le prestazioni (chi non lo è al giorno d’oggi), ti sarai immediatamente preoccupato di come potresti appesantire le tua applicazioni andando a richiedere tutte le volte lo stesso file.
HTML Import è veramente molto intelligente perché prima ancora di andare a caricare i vari elementi, cercherà di capire se ci sono diverse librerie che vengono caricate e le carica una singola volta. Questo si traduce in una singola chiamata HTTP che permette di velocizzare incredibilmente i tempi di risposta del nostro sito web.
Conclusioni
Spero che questa introduzione alle HTML Import ti sia stata di aiuto e ti abbia fatto capire che cosa permettono di fare ad oggi. La soluzione è veramente interessante perché questa è la tecnologia che ti permetterà di costruire applicazioni web in pochissimo tempo inserendo man mano degli elementi con la stessa semplicità con la quale gestiamo il nostro codice HTML.
La possibilità di importare dei file HTML ci permette anche di risparmiare righe di codice che è sempre un’attività che vogliamo ottimizzare dato che rappresenta una gran perdita di tempo.
Recentemente Mozilla ha dichiarato apertamente di non voler implementare questa caratteristica, almeno per il momento, perché è l’unica che ancora non è stata decisa all’interno del W3C e preferiscono quindi osservare prima quale sintassi verrà utilizzata all’interno di EcmaScript 6 (ES6) per includere i suoi moduli.
Onestamente anche io sono rimasto molto colpito da questa loro decisione, ma la cosa più importante da capire è che una parte del web sta già utilizzando questa tecnologia e come frontend developer non possiamo lasciare che alcune lotte di quartiere ci limitino la scoperta delle nuove soluzioni che il web ha da offrire.
Tu che ne pensi dei Web Components e in particolar modo degli HTML Import? Pensi di avvicinarti maggiormente a questa nuova tecnologia o preferisci approfondire altro? Nell’attesa di un tuo commento nelle prossime settimane andremo ad approfondire alcuni dei nostri argomenti di punta come Sass e gli altri strumenti utili che il web ha ci mette a disposizione.
Lascia un commento