Un sito web non è nulla senza servizi, ma se l'occhio vuole la sua parte, anche la veste grafica non deve essere trascurata. La produzione di HTML SEO friendly parte dalla conoscenza della giusta semantica: l'utilizzo degli opportuni tag all'interno delle varie sezioni della pagina. In secondo luogo, ora che abbiamo ottenuto un buon voto dai motori di indicizzazione, dobbiamo attrarre l'attenzione dell'utente, dando degli stili ai componenti che rendano la pagina oggettivamente bella e facile da navigare o leggere.

Tutto questo, per noi sviluppatori, si traduce in un file .html e uno .css nel quale andremo a scrivere tag e stili, unendoli tramite l'utilizzo di id, classi o puntando direttamente l'elemento. Chi ha già avuto esperienza in materia sa benissimo a cosa si andrà incontro: ore e ore di sviluppo in cui i caratteri < e > diventeranno i nostri peggiori nemici, insieme alle parole class, style e id.

Fortuna vuole che HTML, essendo un linguaggio a marcatori, ha degli standard ed è quindi possibile creare degli alias, se così possiamo chiamarli, per scrivere gli stessi oggetti, utilizzando una sintassi più stringata. Questo set di regole viene definito un pre-processore HTML.

I pre-processori HTML non sono da confondere con librerie come Handlebars, Mustache, JsRender che producono codice HTML a runtime, il risultato della compilazione tramite pre-processori sarà una file HTML, che potremo modificare a integrare nell'applicazione.

Come si può capire dal nome, il compito di Slim è alleggerire la scrittura HTML, proponendo una sintassi molto snella, ma mantenendo una leggibilità elevata, consentendo anche ai meno esperti di scrivere o leggere un template. È un linguaggio a indentazione, nel quale è necessario rispettare le spaziature per poter ottenere il giusto puzzle di elementi HTML.

Basandosi su Ruby, sarà necessario installare sulla macchina il runtime ([link](https://www.ruby-lang.org/it/downloads/)) e successivamente il compilatore tramite il seguente comando.

gem install slim

A questo punto non servirà altro che creare un file con estensione .slim nel quale inserire un template, come nello snippet seguente.

doctype html
html
  head
    title Mia applicazione
    meta name="author" content=Morgan

  body
    h1 Anagrafica

    #content
      label.font-blue.bold Nome
      p Morgan
      label.font-green Cognome
      p Pizzini

    <div>
      <p>Ciao Mondo!</p>
    </div>

    div id="footer"
      p
        | Grazie,
            Contattaci al numero 123456
              Copyright 2021

Dall'analisi del codice possiamo capire che:

• Stiamo creando un tag head con all'interno title e meta author
• Un body con un tag h1 Anagrafica
• Il div, essendo l'elemento più usato, può essere sottinteso: utilizzando #content stiamo creando un div con id content
• Le classi si possono specificare tramite il ., la prima label avrà 2 classi: font-blue e bold
• Slim permette l'utilizzo anche di normale HTML, in tal caso il codice non verrà compilato, e ci permetterà di migrare al nuovo template senza dover riscrivere tutto da zero
• Se la sintassi risulta troppo stringata possiamo utilizzare una modalità di scrittura più espressiva come div id="footer"
• Le pipe (|) funzionano come un legante, permettendoci di scrivere codice su più righe, ma inserendolo sempre nello stesso tag

Abbiamo anche la possibilità di creare pagine che si adattino ai nostri input: nel caso in cui volessimo creare una landing page o una newsletter in cui l'unica variante è il messaggio, potremmo creare un template come:

div
  p= message

In seguito, per convertilo in HTML ci servirà utilizzare slimrb, installata insieme a slim, che compilerà il file .slim in uno .html

slimrb newsletter.slim -l '{"message": "Grazie!"}' > newsletter.html

Questo è solo l'inizio dato che all'interno di ogni pagina possiamo inserire espressioni, helpers, funzioni, aggiungere template comuni, ecc... Per una documentazione più dettagliata riguardo questi aspetti è disponibile la pagina del progetto su [GitHub](https://github.com/slim-template/slim).
Della stessa famiglia di pre-processori troviamo anche Pug, che utilizza una sintassi molto similare, ed è template engine spesso utilizzato in simbiosi con applicazioni scritte in Express.js.