1

Schermata-07-2456485-alle-16.41.51Che siate sviluppatori web di mestiere o per passione prima o poi vi sarete sicuramente trovati a dover inserire del contenuto dinamicamente all’interno delle pagine.

Sempre più spesso siti internet, applicazioni web e mobili fanno uso di richieste asincrone a migliorare l’esperienza dell’utente che non deve ricaricare la pagina per effettuare ogni singola operazione.

Tale processo prevede, per l’appunto, l’inserimento di dati all’interno del DOM della pagina successivamente al caricamento iniziale.

Per chi si trova per la prima volta ad approcciare questo tipo di programmazione la tentazione di inserire i dati usando complesse concatenazioni è davvero forte… e ci si ritrova facilmente a dover gestire enormi file javascript che contengono sia la logica che l’output. Un esempio può essere qualcosa del genere:

Visto l’esempio sopra, piuttosto semplice, cominciamo a fare il bilancio sull’efficacia del codice appena visto.

Pro

  • Tutto il codice si trova in un solo file (ma è davvero un vantaggio?);
  • Niente librerie esterne.

Contro

  • Il codice HTML inserito in javascript è di difficile lettura;
  • Tutto il codice è nel file .js, il file .html che dovrebbe contenere l’output è, di fatto, praticamente vuoto;
  • Se dovessimo fare qualche modifica ai contenuti essi sarebbero messi in cache in quanto contenuti nel file .js;
  • Se dovessimo procedere alla localizzazione dei contenuti dovremmo passare delle variabili js complicando ulteriormente la situazione;
  • Se non si conosce l’origine dei dati (ex. JSON) bisognerà sanificare i dati;
  • Infine pensate di dover aggiungere un nuovo elemento dinamicamente… dovremmo riscrivere completamente il nostro codice!

Quando è sconsigliato adottare la concatenazione?

Quelli sopra esposti sono solo alcuni dei motivi per cui è necessario trovare una soluzione alternativa alla concatenazione che, riassumendo, è sconsigliata nei seguenti casi:

  • Per caricare dati dal server in liste con molte informazioni;
  • Per aggiungere/aggiornare elementi in tempo reale;
  • Quando si ha la necessità di aggiungere elementi complessi alle pagine;
  • In definitiva quando il rendering HTML viene effettuato lato Client;

Gli javascript template engine… Quale scegliere?

Per fortuna per ogni problema c’è una soluzione, nel nostro caso è quella di adottare un template engine, ovvero una libreria di istruzioni che ci permetta di separare il codice js da quello HTML di cui il browser dovrà fare il rendering.

Ad oggi esistono numerosi template engine, ci sono interi framework che dispongono di un proprio template engine come AngularJS, per esempio.

Informandomi e testando diversi template engine sono approdato infine su Handlebars.js . In realtà, di tutti quelli che ho provato mi è sembrato il più completo, semplice e ben documentato ma soprattutto fa quello che deve fare senza fronzoli! Chiaramente se state lavorando ad un progetto con Underscore.js ha poco senso affidarsi ad una libreria esterna quando quest’ultimo già contiene l’ottimo Underscore template ma negli altri casi Handlebars.js è davvero una manna.

Non è detto che siccome Handlebars.js sia perfetto per le mie necessità debba esserlo anche per le vostre… Vi consiglio quindi questo ottimo tool che in base alle necessità consiglia il Template Engine Javascript più adatto alle vostre esigenze!

Handlebars.js

Bando alle ciance e vediamo un pò come funziona…

Dimenticavo, Handlebars.js lavora magnificamente con jQuery, per cui vediamo lo stesso codice ma con l’aiuto del nostro prezioso alleato:

Analizzando il risultato ci si rende presto conto di quanto questo codice sia:

  • Separato nella logica e nell’output;
  • Riutilizzabile;
  • Di semplice lettura;
  • Più sicuro (anche se non potete verificarlo dalll’esempio, infatti, gli operatori {{…}} sanitizzano qualsiasi valore venga passato attraverso).

Solo alcuni degli ottimi motivi per adottare questo fantastico template engine nei vostri progetti! Se avete bisogno di maggiori chiarimenti o magari avete qualche approfondimento/correzione da fare non esitate a commentare sotto. Per quanto riguarda la documentazione di Handlebars.js potete trovarla assieme al download a questo indirizzo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *