In questa guida introduttiva a Vue.js illustreremo attraverso degli esempi alcuni dei concetti basilari per poter iniziare ad utilizzare il framework in un’applicazione di qualsiasi dimensione e complessità. Baseremo le prossime lezioni sulla versione 2.x, ma ci soffermeremo anche su alcune delle funzionalità introdotte a partire dalla versione 3 del framework. Al di là di poche nuove funzioni e di alcune semplici modifiche, dal punto di vista di uno sviluppatore, la versione 3 è sostanzialmente uguale a quella precedente (la maggior parte dei cambiamenti riguardano l’implementazione interna per migliorare le prestazioni del framework). Considerato che sono numerose le applicazioni che usano Vue 2.6, è facile imbattersi in codice e funzioni non presenti nell’ultima versione. Per questo motivo inizieremo ad illustrare i concetti fondamentali del framework tramite la versione 2.x per poi evidenziare le novità e i cambiamenti introdotti nell’ultima versione.
Cos’è Vue.js
Vue.js o semplicemente Vue è un framework Javascript che, astraendo il processo di rendering dei dati ed aggiornamento del DOM, consente di realizzare delle interfacce utente attraverso un approccio dichiarativo. Ciò vuol dire che usando una specifica sintassi dovremo solo preoccuparci di indicare cosa deve essere mostrato all’interno di una pagina web. Dietro le quinte Vue si occuperà di visualizzare ed aggiornare opportunamente i dati di un’applicazione.
Perché scegliere Vue.js
Rilasciato inizialmente nel 2014, la popolarità di Vue.js è cresciuta esponenzialmente negli ultimi anni. Secondo i dati correnti del package manager NPM, Vue supera 1 milione e 200 mila download settimanali. Si tratta di valori paragonabili a quelli di Angular, ma ancora piuttosto lontani dai numeri di React. A contribuire alla crescita di Vue.js è stata anche la decisione di Laravel, popolare framework PHP, di consigliarlo come framework front-end.
Per semplificare ulteriormente la realizzazione delle applicazioni in Vue.js sono stati anche realizzati vari strumenti come Vue CLI che utilizzeremo nelle prossime lezioni. Questa consente di configurare l’ambiente di lavoro in maniera rapida senza doversi preoccupare della gestione di altri tool.
Esistono oggi svariati framework e librerie basati su Vue.js di cui non parleremo però in questa guida introduttiva. È però opportuno presentare sommariamente alcuni dei progetti più interessanti.
Uno di questi è Gridsome, un generatore di siti statici che fornisce tutti gli strumenti necessari in fase di sviluppo e si prende cura di implementare opportune tecniche di ottimizzazione in modo da generare siti sicuri, veloci e leggeri. Utilizzando diverse sorgenti di dati come dei file Markdown o dei CMS di terze parti come Contentful o Sanity.io e sfruttando le funzionalità di servizi di hosting come Netlify o Zeit Now, è possibile realizzare dei siti statici che sono automaticamente rigenerati lato server ogni volta che vengono effettuate delle modifiche dei contenuti.
Un altro progetto interessante è Nuxt.js che può essere usato come Static Site Generator o per realizzare applicazioni che sfruttano la tecnica del Server-Side Rendering (SSR). In quest’ultimo caso una SPA (Single Page Application) viene inizializzata direttamente lato server e viene inviato al client un file HTML già pronto contenente i diversi componenti realizzati in Vue.js. Le successive operazioni di aggiornamento della pagina verranno poi eseguite lato client senza dover effettuare ulteriori richieste al server. Così facendo, si ottengono evidenti benefici in termini di SEO e in fase di caricamento iniziale dell’applicazione. L’obiettivo di Nuxt.js è quello di fornire tutti gli strumenti per semplificare l’implementazione del SSR.
Come accennato sopra, esistono varie librerie e strumenti nati intorno a Vue e sarebbe impossibile elencarli tutti, ma vale la pena citare Vuetify, una libreria molto diffusa che contiene un ampio set di componenti realizzati seguendo i criteri del Material Design sviluppato da Google e utilizzato in particolar modo nelle applicazioni per dispositivi Android.
Ed a proposito di applicazioni mobile, Vue può essere utilizzato non solo per la realizzazione di applicazioi web, ma anche per creare applicazioni per iOS e Android grazie a Vue Native e Native Script. Bisogna tuttavia evidenziare che per questo tipo di applicazioni esistono altre soluzioni migliori e più mature come React Native e Flutter che utilizzano rispettivamente Javascript/React e Dart.
Vue vs. gli altri framework più diffusi
I due principali "concorrenti" di Vue.js sono sicuramente Angular e React, sviluppati da due grossi colossi del web come Google e Facebook. La storia di Vue differisce dagli altri due in quanto nasce come progetto personale realizzato da Evan You, mentre lavorava per Google, con l’intenzione di risolvere quelli che riteneva fossero i difetti di AngularJS (la prima versione di Angular). Ciò ha permesso di strutturare il framework in modo tale da tenere in considerazione le necessità di diversi tipi di sviluppatori e di team di varia dimensione.
Se consideriamo Angular e React, da un lato abbiamo un framework monolitico che include tutti gli strumenti necessari per lo sviluppo di un’applicazione lasciando in un certo senso poca libertà ai programmatori. Può quindi risultare un po’ più complicato iniziare a lavorare con Angular soprattutto per chi non ha molta dimestichezza con Typescript o con una libreria come RxJS ampliamente usata nel framework di Google. Completamente opposto è l’approccio di React. Nel caso della libreria di Facebook è spesso necessario utilizzare strumenti e componenti aggiuntivi per lo sviluppo di applicazioni anche meno complesse. Per uno stesso problema esistono in molti casi decine di strumenti e librerie nate con l’intento di risolvere gli stessi problemi. Capita allora che un programmatore si trovi in più occasioni di fronte alla difficile sfida di dover selezionare fra un’ampia rosa di candidati o alla necessità di dover migrare da una soluzione all’altra.
Vue.js è un Framework progressivo che cerca di rappresentare una via di mezzo tra i due approcci esposti sopra. L’intenzione di Evan You era quella di realizzare un framework facile da adottare ed impiegare in progetti già esistenti senza trascurare la possibilità di usarlo in applicazioni SPA (Single-Page Applications) più complesse. Come vedremo a breve, è possibile integrare Vue direttamente in una semplice pagina HTML. Nello stesso tempo, impiegando degli strumenti come Vue CLI, possiamo organizzare l’ambiente di sviluppo in pochi passaggi, aggiungendo tutti gli strumenti necessari allo sviluppo di applicazioni di grandi dimensioni e senza doverci preoccupare di laboriose configurazioni.
La peculiarità di Vue.js è rappresentata dalla possibilità di iniziare a lavorare con il framework conoscendo solo i concetti base per poi aggiungere ulteriori strumenti in maniera incrementale man mano che si presenta la necessità di implementare determinate funzionalità.
Vue prende ispirazione da Angular e React. Come React usa il Virtual DOM per determinare in che modo aggiornare l’applicazione. Modificare frequentemente il DOM è un’operazione piuttosto costosa. Per questo motivo, viene utilizzato il Virtual DOM che è una rappresentazione in memoria del DOM corrente (un oggetto javascript rappresentante la struttura corrente del DOM). In questo modo Vue andrà ad aggiornare la copia in memoria senza toccare il DOM. Quando una serie di cambiamenti sono stati completati sul DOM virtuale, verranno apportate solo le singole modifiche necessarie sul DOM originale seguendo un algoritmo efficiente ed ottimizzato.
Come tutte le soluzioni il Virtual DOM presenta dei vantaggi e degli svantaggi. Alcuni framework più recenti come SVELTE hanno messo in discussione questo tipo di approccio evidenziando che, specialmente in applicazioni di grosse dimensioni, può portare ad un consumo eccessivo di memoria. Inoltre le procedure svolte dal Virtual DOM non sono gratis, ma richiedono del tempo e risorse per calcolare quali nodi devono essere aggiornati.
Ciò detto, il Virtual DOM rappresenta comunque una valida soluzione in termini di prestazioni ed efficienza per sviluppare applicazioni secondo un approccio dichiarativo senza dover badare più di tanto a specifici dettagli nell’implementazione di certe funzioni che si prestano facilmente all’introduzione di errori e malfunzionamenti imprevisti.
Vue.js fa uso di template HTML arricchiti da costrutti sintattici e direttive come v-if e v-for che ricordano molto la sintassi usata in Angular. Motivo per cui gli sviluppatori che hanno avuto esperienza col framework di Google, si troveranno a loro agio.
Al contrario di Angular, in cui è caldamente consigliato usare TypeScript, quest’ultimo è supportato anche in Vue, ma possiamo sviluppare le applicazioni utilizzando semplicemente il linguaggio Javascript.
Il futuro di Vue.js: Vue 3.0
La prossima versione di Vue.js è ormai imminente, ma bisogna evidenziare che non porterà nessun cambiamento radicale. Non si correrà quindi il rischio di rivivere ciò che è accaduto con l’introduzione di Angular 2. Molti dei cambiamenti, che verranno introdotti, non saranno direttamente visibili agli sviluppatori, ma si tratta di modifiche che hanno come ultimo fine quello di migliorare ulteriormente le prestazioni del framework sia in termini di velocità di esecuzione che di dimensioni (Vue 3 dovrebbe pesare intorno ai 10kB, la metà della versione attuale). Le novità che verranno introdotte mirano inoltre a facilitare il lavoro in fase di sviluppo producendo del codice più facile da mantenere.
Vi saranno anche cambiamenti interni per garantire un maggior supporto a TypeScript che resterà comunque opzionale.
Saranno infine introdotte nuove funzionalità aggiuntive come la Composition API che rappresenta un diverso e più efficiente modo per definire i componenti, utile soprattutto nel caso di componenti più complessi e articolati. In una delle prossime lezioni vedremo di cosa si tratta visto che esiste già un plugin che consente di usare la Composition API con la versione 2.6 di Vue.
Per concludere questa lezione vi consiglio di guardare l’interessante documentario su Vue.js realizzato da Honeypot.
Conclusioni
Vue.js è un framework "progressivo" che, prendendo anche spunto da concorrenti come Angular e React ed impiegando in alcuni casi soluzioni simili, si adatta alla perfezione in progetti di differenti dimensioni e complessità. Per questo motivo la sua comunità di programmatori è cresciuta esponenzialmente negli ultimi anni e sicuramente continuerà ad espandersi quando sarà rilasciata la nuova versione 3.0 che porterà sostanziali miglioramenti in termini di prestazioni, tenendo sempre bene in mente le esigenze sia degli sviluppatori alle prime armi sia di quelli più esperti.
