Vue.js è un framework JavaScript, dedicato alla realizzazione di interfacce web reattive che sfruttano il dual-binding tra modello dati e vista. Ciò significa che rende possibile implementare un'applicazione ragionando in termini di dati, variabili e oggetti, astraendosi rispetto all'implementazione e aggiornamento del DOM della pagina.
È stato definito framework progressivo perchè è specializzato nella realizzazione delle viste HTML, non offre una pletora di funzionalità come altre librerie (Angular in primis) ma permette di integrarsi facilemente con componenti di altre librerie e progetti. Gli stessi sviluppatori di Vue.js hanno realizzato diversi componenti autonomi che possono o meno essere integrati all'interno di un'applicazione (vue-router, vue-resource, vue-form...).
Il successo di Vue.js, da collegare anche alla scelta di Laravel di suggerirlo come framework frontend, ha condotto il framework al rilascio della versione 2.0 (30 set 2016) e successivamente diverse versioni fino ad arrivare alla 2.2.0 del 25 febbraio 2017, versione che farà da riferimento per questa guida.
Vue.js vs Angular e React
Evan you, l'autore del framework, ha prestato molta attenzione al confronto con gli altri framework competitor, cercando di posizioare Vue.js come soluzione migliore per risolvere i problemi che emergono durante la programmazione web.
Vue.js si differenzia sia per:
- performance, in quanto implementa una modalità particolare di rendering basato sui document fragment;
- leggibilità, soprattutto confrontato con i template JSX che non utilizza html standard;
- flessibilità, per via della natura progressiva di Vue.js soprattutto confrontato con framework monolitici come Angular.
Nella guida ufficiale troviamo una pagina con un confronto con i competitor più dettagliato e completo.
Il pattern MVVM
Vue.js implementa il pattern MVVM, come molti framework simili, una declinazione del più famoso Model-View-Controller (MVC). Nonostante l'acronimo un po' infelice (MVVM significa Model-View-ViewModel), il pattern ha avuto parecchio successo nel mondo frontend e delle reactive application. I componenti di un'applicazione MVVM sono 3:
- il Modello (Model) che rappresenta l'implementazione del dominio dati gestito dall'applicazione, come per la 'M' in MVC;
- la Vista (View) che rappresenta il componente grafico renderizzato all'utente, composta da da HTML e CSS
- Il Modello per la Vista (ViewModel) che rappresenta il collante tra i precedenti componenti e fornisce alla view i dati in un formato consono alla presentazione. e il comportamento di alcuni componenti dinamici
Descritto in questo modo, bisogna ammetterlo, il MVVM non si discosta molto dall'MVC. La grossa differenza sta nella differenza tra Controller e ViewModel. Il primo è di fatto una porzione di codice che esegue particolari logiche di business (grazie ai Model) e che ritorna una View da mostrare all'utente. Il ViewModel invece rappresenta di fatto un modello parallelo al Model, e che viene direttamente bindato alla View e che descrive il comportamento di quest'ultima con funzioni associate per esempio al click su un elemento. Il Controller esegue logiche di business prima del rendering della View, il ViewModel definisce il comportamento dell'applicazione a runtime.
MVVM e Vue.js
Per lavorare con Vue.js è necessario istanziare un oggetto Vue (una istanza di Vue globale), grazie al costruttore esposto dal framework, cui passiamo una serie di parametri che permettono di configurare il comportamento della nostra app.
var app = new Vue({
el: '#app',
data: {
scritta : 'Ciao a tutti :)'
}
methods: {
cambiaScritta: function () {
this.scritta = 'Ma proprio a tutti tutti :D');
}
}
})L'istanza cosi realizzata rappresenta di fatto il ModelView dell'applicazione che contiene sia i Model business che rappresentano il dominio applicativo (data), sia eventuali comportamenti scatenati da fattori esterni o dall'utente (methods).
Tutti i dati incapsulati all'interno del View Model sono reattivi e permettono di scatenare aggiornamenti automatici della View che può essere resa disponibile in diversi modi, tramite un frammento di HTML della pagina (che in questo caso viene modificato a runtime), tramite un riferimento ad un template HTML oppure tramite una stringa.