Un’accattivante Introduzione agli HTML Import

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!

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. Infatti, proprio come fa Ajax, i Web Components non sono un’unica tecnologia, ma piuttosto sono un insieme di implementazioni che collaborano.

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.

salto

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 le tecniche avanzate dei CSS3 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 il linguaggio 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 il mio obiettivo, sia con questo sito sia con la nostra scuola online, è 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

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 ad oggi non esisteva una soluzione che mi permettesse di importare del codice HTML utilizzando soltanto HTML.

Se ci pensi un attimo sù possiamo dire di avere gli iframe, anche se questi non permettono di personalizzare il contenuto che stiamo importando dalle pagine esterne.

Ma questo è un grosso limite se pensiamo a tutti i modi in cui possiamo importare del contenuto con questo linguaggio. 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, 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:

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 con 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 delle 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.

attiva-web-components-firefox

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 precedente), al momento dobbiamo accontentarci del polyfil creato proprio da Web Components che con Bower puoi tranquillamente installare con un:

Ovviamente non sei costretto a utilizzare questo componente aggiuntivo visto che potrai tranquillamente scaricare il file .js direttamente dal sito, ma 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 riguarda nello specifico le funzionalità messe a disposizione da questa nuova soluzione.

Come si comporta HTML Import

Quando un browser si trova di fronte ad un elemento HTML importato si comporta nello stesso modo di quando carica la pagina web del nostro sito; praticamente 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.

Visto che i browser attendono il download dei file JavaScript collegati alla pagina prima di leggere gli altri elementi HTML e quindi renderizzare la pagina, bisogna stare attenti alle performance perché molto spesso un elemento HTML importato contiene anche codice JavaScript e CSS.

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.

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.

connessione-classica

Come puoi notare dallo schema che ho riprodotto qua sopra, ogni volta che richiediamo qualcosa al server (come una nuova pagina ad esempio) 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 verrà parzialmente risolta anche con l’avvento dell’HTTP2, oggi possiamo velocizzare ulteriormente utilizzando una connessione asincrona.

connessione-ajax

Spero che questo schema non sia troppo complesso, ma quello che ho cercato di farti vedere è che con delle connessioni asincrone noi permettiamo al nostro browser di richiedere ed aggiornare delle porzioni della nostra 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 sia del codice JavaScript sia importare i nostri fogli di stile bisogna per un momento soffermarsi 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 come scoperto anche per le Sprite CSS 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à 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 di quelle che ci fanno perdere la maggior quantità di tempo.

Recentemente Mozilla ha dichiarato apertamente di non voler implementare questa caratteristica, almeno per il momento, perché è l’unica che ancora non è stata delineata 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 il tuo Pensiero