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
$(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);
});
});
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
- Github personale: https://github.com/pierpaolo1989
- Documentazione ufficiale Handlebars: https://handlebarsjs.com/guide/
- Link Hostinger: Hostinger referral
Comments
Post a Comment