23 dicembre 2011

Mustache – template logic-less, con i baffi

minddriven-logo-mustache

È sempre un piacere trovare un nuovo strumento che risolve in maniera egregia un’esigenza su cui volevamo, da tempo, metterci al lavoro.

L’idea di scrivere un engine generico per renderizzare dei template di testo mi solleticava da tempo, e in Mustache ho trovato (per puro caso), una soluzione davvero ottima ed elegante che supera di gran lunga ciò che volevo scrivere.

Cosa fa Mustache ? Riceve in input un template di testo e una struttura dati generica. Restituisce in uscita un documento di testo contenente il ‘rendering’ dei dati nel template.

Si tratta di uno strumento rivoluzionario ? No. Esistono tanti meccanismi, in tanti linguaggi e piattaforme, per fare la stessa cosa.

Cosa ha di bello Mustache ? Mustache si distingue dagli altri per l’immediatezza della sintassi, per la disponibilità su diverse piattaforme e linguaggi (Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, node.js), e per l’approccio ‘logic-less’ (ovvero senza condizioni, cicli e altri meccanismi tipici dei linguaggi di programmazione).

Logic-less ? Sì e no. Niente cicli, condizioni, scelte. In realtà non è del tutto vero: la logica c’è eccome, ma viene nascosta in maniera abbastanza elegante con una sintassi pulita e intuitiva.

Vogliamo fare un esempio ? E facciamolo.

Supponiamo di avere una struttura dati Utente con campi Nome, Cognome, Età. Per visualizzare la struttura in una pagina HTML potremo usare un template simile al seguente.

Ciao <b>{{Nome}} {{Cognome}}</b>, non mi avevi detto di avere {{Eta}} anni !

I ‘baffi’, come potete intuire, sono le parentesi graffe che distinguono i tag di Mustache. I tag identificano i campi della struttura e, in questo caso, permettono l’inserimento ‘brutale’ del contenuto nel template.

Qualcosa di più complesso ? Supponiamo di avere una collezione di strutture di questo tipo. Un template che sia in grado di mostrare tutti i record sarà scritto come segue:

<b>Utenti</b>
<ul>
  {{#Utente}}
   <li>{{Nome}} {{Cognome}}</li>
  {{/Utente}}
</ul>

In questo caso ecco il ciclo ‘nascosto’ dai tag di Mustache. Tutto ciò che si trova tra il tag di apertura {{#Utente}} e il tag di chiusura {{/Utente}} viene duplicato per il numero di record nella collezione.

Tutto qui ? Per cominciare.

In realtà il manuale descrive un’altra decina di varianti nei tag e nelle regole che permettono di realizzare rendering ben più complessi. Un demo interattivo permette anche di giocare un po’ con il meccanismo per capire bene il funzionamento prima di fare ‘danni’ con il proprio codice.

Le potenzialità di questo strumento, se ne sentivate l’esigenza, emergono subito. Separare layout e dati è sempre una bella pratica da seguire con assiduità, ma quante volte vi siete ritrovati con la formattazione HTML all’interno del vostro codice lato server ? (“Solo stavolta, è un piccolo tag, lo toglieremo appena possibile”)

Mustache vi da una mano in questo senso, rendendo molto più immediato realizzare anche piccoli template ‘volanti’ da renderizzare parzialmente, ma sempre separando dati e codice dal layout. La capacità di essere inserito in molti linguaggi e piattaforme, inoltre, rende Mustache particolarmente appetibile per condividere, ad esempio, la stessa logica sia lato client (in javascript) che lato server (C#, Ruby o PHP).

Volendo infine sbizzarrirci, Mustache non è necessariamente limitato al web e all’HTML. Può essere usato per generare qualunque formato di testo: documenti, immagini SVG, codice sorgente, metadati. A voi le idee e gli spunti.

In ogni caso, utile o meno, vi consiglio di ‘fare un giretto’ sul sito ufficiale e di provare a giocare con la sintassi. Potrebbe piacervi.