Personal tools
Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

In vacanza più leggeri... anche i nostri siti!

Jul 05, 2013

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

Introduzione a Conditioner.js, una libreria che ti permette di caricare i moduli js del tuo sito solo alla presenza di un determinato stato che potrai definire tu

Non è una novità: più aggiungiamo funzionalità sotto forma di librerie JavaScript, più i nostri siti si appesantiscono. Se però le funzionalità aggiunte sono necessarie, quello che possiamo fare è ottimizzare le risorse e limitarne le dimensioni, quindi il tempo necessario a scaricarle.

Non sarebbe bello avere a disposizione una sintassi che ci permetta di caricare codice JavaScript in base a condizioni verificate runtime, analizzando lo stato della pagina? Caricare lo snippet di codice solo se richiesto e se predeterminate condizioni sono realizzate?

Un caso estremamente familiare a tutti i front-end developer: quando progettiamo il nostro sito per dispositivi mobile tendiamo a rimuovere i componenti che non sarebbero utili all'utente (solitamente per le limitazioni dello spazio disponibile), allo scopo di rendere meglio fruibili i contenuti web più importanti. Se gli elementi che vogliamo rimuovere utilizzano funzionalità JavaScript, però, questi ultimi vengono comunque scaricati. Non vale forse la pena evitare che ciò succeda (risparmiando così anche un'inutile chiamata al server)?

Conditioner.js è esattamente quello che ci serve. E' una libreria JavaScript che si occupa di fornire un linguaggio che permetta la definizione di condizioni per caricare funzionalità solo se necessario.

Siamo noi a definire i requisiti affinché il modulo js venga caricato.

Inoltre Conditioner.js consente di gestire il caricamento di più risorse JavaScript. I vari moduli js vengono caricati separati l'uno dall'altro impedendo loro di andare in contrasto.

Esempio

Supponiamo di avere un modulo di Google Maps per caricare un mappa Google. Ha senso attivare il modulo mappe solo se c'è abbastanza spazio sullo schermo per eseguire il rendering di una mappa di dimensioni accettabili. Sarebbe inoltre desiderabile iniziare il caricamento della mappa solo quando il suo contenitore diventa visibile all'utente, per evitare trasferimento dati non neccessario.

Il seguente snippet di codice HTML mostra come disegnare la mappa di Google utilizzando Conditioner.js.


<a href="http://maps.google.com/?ll=51.741,3.822"
data-module="ui/Map"
data-conditions="media:{(min-width:40em)} and element:{seen}"> ... </a>

Due sono gli elementi fondamentali:

  • il modulo Map è specificato utilizzando l'attributo HTML5 data-module
  • le condizioni richieste sono impostate tramite l'attributo HTML5 data-conditions.

Il modulo mappe sarà caricato solo se la finestra è larga almeno 40em. Ridimensionando la finestra del browser, Conditioner determinerà in tempo reale se caricare o meno il modulo js.

conditioner_mappa

conditioner_no_mappa

L'attributo "data-module"

Il contenuto dell'attributo data-module punta alla posizione del modulo da caricare.


<a data-module="ui/Map"> ... </a>

L'attributo "data-conditions"

Questo è l'attributo più importante, perché permette di controllare le condizioni alle quali viene caricato un modulo.

I test all'interno delle condizioni sono formattati nel modo seguente:


<test_name>:{<expected_value>}

Per rendere più potente l'uso delle condizioni è possibile combinare più test insieme con gli operatori and, or e not, formando condizioni complesse. Si possono inoltre usare le parentesi per gruppi di test, cambiando così la precedenza degli operatori. Ecco un esempio di una condizione complessa:


not (foo:{bar} or foo:{bar}) and not foo:{bar}

Attualmente sono disponibili questi test:

  • Element:
    • min-width
    • max-width
    • seen
  • Media:
    • query
    • supported
  • Window:
    • min-width
    • max-width
  • Pointer:
    • available

Oltre a questi test base, Conditioner.js permette di creare test personalizzati da utilizzare nelle condizioni.

Vediamo come applicare qualche test base

Il codice HTML sotto carica un modulo che mostra un orologio. Non avendo nessuna condizione richiesta, questo modulo è sempre caricato e l'orologio è quindi sempre attivo.


<div data-module="ui/Clock"> ... </div>

conditioner clock attivo

Aggiungiamo una condizione relativa alle dimensioni dell'elemento:


<div data-module="ui/Clock"
data-conditions="element:{min-width:275}"> ... </div>

Adesso l'orologio sarà attivo finché l'elemento ha una larghezza minima di 275 pixel. Se la larghezza scende sotto i 275 pixel, ad esempio ridimensionando la finestra del browser, l'orologio non verrà più caricato.

clock non attivo

Sostituiamo la precedente condizione con una costruita con le media queries:


<div data-module="ui/Clock"
data-conditions="media:{(min-width:30em) and (max-width:70em)}
or not media:{supported}"> ... </div>

In questo caso l'orologio sarà attivo fino a quando le media query sono valide.

Ecco un esempio più complesso basato su condizioni multiple:


<div class="component">
<a href="http://maps.google.com/?ll=51.741380,3.822169&z=11"
data-module="ui/Map"
data-conditions="(connection:{any} and media:{(min-width:40em)})
or not media:{supported}"> ... </a>
</div>

La mappa sarà attiva fino a quando non vi è alcuna connessione di rete e le media query sono valide. Con l'ultima parte di condizione "or not media:{supported}" si stabilisce che se non vi è alcun supporto alle media query, la mappa viene sempre caricata.

Gli attributi "data-options" e "data-priority"

Non è finita qui, perché Conditioner mette a disposizione anche altri attributi come data-options, che permette di passare opzioni al modulo js e data-priority, che permette di controllare l'ordine nel quale un nodo è caricato rispetto agli altri moduli del DOM.

Visita il sito Conditioner.js per esplorare le sezioni download e documentazione, così potrai iniziare velocemente ad utilizzare la libreria e trovare altri esempi.

Filed under: , ,
comments powered by Disqus