Nei vari esempi che abbiamo analizzato, i componenti venivano quasi sempre inizializzati con la funzione Vue.component, alla quale venivano passati il nome del componente ed un elenco di proprietà in formato chiave-valore. Sebbene questa modalità sia funzionale e abbastanza chiara da un punto di vista didattico, essa risulta scomoda in progetti enterprise di una certa entità per alcune ragioni, giustamente evidenziate dalla stessa documentazione di Vue:
- l'utilizzo dei template all'interno di una stringa è particolarmente scomodo, mentre i template inline sono flessibili ma obbligano spesso la duplicazione del markup;
- nonostante HTML e JS siano isolabili all'interno di un componente, non è possibile fare la stessa cosa con gli stili CSS;
- se registrati globalmente necessitano di nomi univoci;
- non è possibile avere un processo di build più complesso, basato per esempio su Jade per la generazione del markup.
Questi svantaggi vengono completamente risolti dai cosiddetti single file components, ovvero una modalità alternativa per creare componenti in Vue. Ciascun componente richiede la presenza di un file con estensione .vue organizzato in questo particolare modo:
<template>
<div>
Il mio nome è <strong>{{ firstname }} {{ lastname }}</strong>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
firstname: 'Alberto',
lastname: 'Bottarini
};
}
}
</script>
<style scoped>
div { background: black; color: white; }
div strong { color: red; }
</style>Questa estensione è una particolarità di Vue, che racchiude le tre componenti principali (template, logica e stile) di un componente all'interno dello stesso file.
Processo di building
Seppur comodi, i file .vue non sono direttamente utilizzabili all'interno di un browser: è necessario un processo di build per trasformarli in codice Javascript standard. Gli sviluppatori di Vue hanno quindi implementato e reso disponibili dei plugin per i principali tool di build frontend:
- Vueify, da utilizzare come transformer per Browserify;
- vue-loader, da utilizzare come loader per Webpack.
Inoltre, la parte di scripting dei file .vue rappresenta un modulo Javascript e permette l'utilizzo delle varie modalità di inclusione delle dipendenze: ES2015 import, CommonJS require e AMD define/require.
La definizione degli stili invece permette, tramite particolari configurazioni del tool di building, di utilizzare sia CSS standard sia sorgenti da trasformare grazie a preprocessori (Less, SASS, Stylus...). Inoltre, è possibile definire stili scoped che non generano conflitti tra i diversi componenti di una applicazione.
Separazione delle responsabilità
La modalità offerta dai file .vue potrebbe creare qualche dubbio riguardo alla separazione delle responsabilità, in quanto in un unico file sono mescolati quelli che dovrebbero essere tre livelli logicamente separati di una applicazione: il markup, la logica di controllo e lo stile.
Gli sviluppatori sostengono però che, nell'attività di sviluppo web e UI, la divisione più sensata non è basata sui layer funzionali, bensì su componenti disaccoppiati e autonomi, in modo da avere elementi più mantenibili e coerenti.