COME HO USATO HANDLEBARS.JS NEL MIO SITO PERSONALE

Handlebars.js favorisce la separazione della logica di presentation da quella di business: è in sostanza un templating language, basato su Moustache, che a partire da un template ed da un oggetto di input è in grado di generare codice html per la visualizzazione di dati seriali in formato json.

Sebbene non sia una tecnologia così fresh, su Github il progetto ha più di 15.000 stars ma l'ultima release risale al 1 agosto del 2023, continuo ad usarlo su alcuni miei progetti che si basano su jQuery o su Javascript puro e che non utilizzano librerie e framework moderni come ad esempio Angular o React.

La mia esigenza era quella di rendere più dinamico l'update dei contenuti del sito personale e del blog, oltre che come detto poc'anzi separare il codice javascript dal layer deputato dalla parte di visualizzazione dei dati. Per far ciò, servendomi di questa semplice ma potente libreria, ho creato una cartella templates a livello della root del progetto ed al cui interno ho, per il momento, inserito due file con estensione .handlebars. 

Questi due file contengono il codice html per:

• la sezione Fotografia
• la sezione Network

Ma come funziona esattamente il processo di rendering dei templates? Semplicemente, al caricamento del dom, i due file handlebars vengono compilati e processati passando loro i dati necessari alla costruzione, e quindi la lista di immagini e la lista dei progetti della sezione Il mio Network. Di seguito lo snippet di codice:

$(document).ready(function () {

  $.get("templates/gallery.handlebars", function (template_text) {
    let template = Handlebars.compile(template_text);
    const htmlStr = template({ pictures: pictures });
    $('.demo-gallery').prepend(htmlStr);
  });

  $.get("templates/network.handlebars", function (template_text) {
    let template = Handlebars.compile(template_text);
    const htmlStr = template({ network: network });
    $('#myNetwork').append(htmlStr);
  });

});

Non avendo però delle API che forniscono i dati su cui i templates andranno ad iterare, ho creato una cartella data sempre a livello della root del progetto, contentente due file .js al cui interno sono ospitate due variabili (network e pictures), costanti, che memorizzano l'array di elementi dati in pasto ad Handlebars. 

Che vantaggi ho nell'utilizzare un approccio simile? Oltre al fatto di organizzare in modo più semplice e snello il codice, supponiamo che io voglia aggiungere una nuova immagine alla sezione fotografica che mostra gli scatti che faccio in giro per l'Italia. Utilizzando Handlebars.js non dovrò più preoccuparmi di aggiungere la porzione di codice html, in soldoni il list item con l'annesso tag img, ma bensì provvederò unicamente ad aggiungere un nuovo oggetto all'array della variabile pictures.

Il processo di restyling tuttavia non si fermerà a questa modifica: sempre con riferimento ad Handlebars, ho intenzione di utilizzare la precompilazione in modo da risparmiare tempo durante il rendering delle sezioni del sito. Come si legge, infatti, dalla documentazione ufficiale:

Using the Handlebars precompiler, you can precompile your Handlebars templates to save time on the client and reduce the required runtime size of the handlebars library.

 

Fatto ciò, ho intenzione di automatizzare il processo di deploy del sito su Hostinger, ossia il web hosting che ospita il mio sito personale ed in generale l'intero mio network. Vorrei fare in modo che, a seguito di una push sul branch main, il sito venga automaticamente deployato includendo anche dei processi di minify di css e js (è probabile che questa parte debba essere inclusa in una Github action). Ma non è tutto, perchè la roadmap include anche:

• migrazione delle immagini nella cdn di Hostinger
• download dinamico del CV realizzato a partire dal codice HTML
• Aggiunta sezione Shop per la vendita delle mie fotografie
• Aggiunta Area privata con condivisione di contenuti inediti
• Standardizzazione della repository per far si che possa essere facilmente replicata altrui

---

Link utili:

• Github personale: https://github.com/pierpaolo1989
• Documentazione ufficiale Handlebars: https://handlebarsjs.com/guide/
• Link Hostinger: Hostinger referral