VueJS Panoramica

Framework progressivo per costruire interfacce

È così che Evan You, ex dipendente Google, definisce Vue, la sua creazione.

Ma cos’è vue?

Definizione

La parola framework usata da Evan You per descrivere Vue possiamo definirla esagerata, la definizione che più gli si addice è libreria, in quanto non offre una soluzione completa come potrebbero fare altri framework (es. Angular), ma permette soltanto di gestire la costruzione delle viste. Il routing e altre funzionalità sono affidate a componenti esterni, sia supportati ufficialmente sia dalla community.
Ora che abbiamo dato una definizione più corretta, capiamo perchè è considerato progressivo. Una web app costruita con Vue, si presenta come un normale sito web e progressivamente si comporta sempre più come app mobile.
Adesso scendiamo più nel dettaglio e scopriamo insieme perchè dovremmo scegliere di utilizzare questa libreria per la nostra web app.

Breve storia

Vue è stato creato da Evan You nel febbraio del 2014 e nel campo dei framework ha iniziato ad avere un enorme successo nel 2016, quando venne rilasciata la versione due. Possiamo affermare che ha fatto dei grandi numeri, tenendo conto che non vanta il sostegno di nessuna grande azienda e che il team è composto da poche dozzine di sviluppatori. È possibile leggere un articolo scritto da Evan nel suo blog, in cui mostra la crescita che ha avuto la sua libreria e mostra il suo tentativo di costruire, rilasciare, commercializzare e mantenere un progetto open source.

Team di evan

Vue è stato sviluppato partendo da zero da un piccolo gruppo di sviluppatori, sostenuti da patreon e sponsorizzazioni, che gli permettono di continuare gli sviluppi.
Se da un lato possiamo considerare ciò un vantaggio nella realizzazione di codice pulito e performante (lontano dalle dinamiche frenetiche di una grossa multinazionale), d’altro canto l’assenza di un sostegno, da parte di uno o più Big, comporta una sostanziale incertezza relativa allo sviluppo/supporto futuro della libreria: un calo dei proventi ottenuti dai contributi potrebbe portare ad un supporto discontinuo o (peggio) alla chiusura del progetto.
Nonostante queste difficoltà, questo piccolo team, è riuscito a farsi strada in mezzo ai colossi (Facebook e Google).

Cosa ci ha colpito

La prima cosa che ci ha impressionati è la documentazione, debolezza che hanno quasi tutti i competitors. È molto semplice e ricca di esempi, ti guida passo passo in tutto ciò che ti serve senza trascurare nulla. Questo abbassa di molto i tempi di apprendimento, potendo partire quasi da subito per costruire la tua web app.
Altra cosa molto interessante, per iniziare basta importare nella head della tua pagina web questo script <script src="https://cdn.jsdelivr.net/npm/vue"></script> e senza configurare nulla puoi già costruire la tua applicazione.
Ultima ma non per importanza, codice html e javascript vengono scritti nello stesso file come in React, ma sono separati l’uno dall’altro come in Angular.

Rubiamo di qua e di la

Nonostante sia stato sviluppato da zero, sembra aver copiato un po’ da Angular e un po’ da React. Tramite questo semplice elenco è possibile vedere cosa ha preso da uno e dall’altro.

• Routing (Angular)
• Virtual Dom (React)
• Single File Component (React)
• Separazione HTML/JS (Angular)
• Vuex/Redux (React)
• Server-Side Rendering (Angular e React)
• Cli (Angular)

Entriamo più nel dettaglio

Routing

Uno dei pochi pacchetti supportati dal team di Vue, molto semplice da usare e simile al routing di Angular. Una volta importata la libreria vue-router, vengono definite le routes con sintassi identica a quella dei cugini di Google, con tanto di possibilita di definire delle sub-routes tramite l’attributo children, proprio come il suo rivale.
Vi mostro un esempio molto semplice di come vengono definite le routes:

const routes = [
  { path: '/route1', component: Component1 },
  { path: '/route2', component: Component2 }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#<id_app>')

Mentre per permettere di navigare verso un path specifico, utilizza la direttiva router-link in questo modo:

<div id="app">
  <h1>Test Route!</h1>
  <p>
    <router-link to="/route1">Go to Componet1</router-link>
    <router-link to="/route2">Go to Componet2</router-link>
  </p>
  <router-view></router-view>
</div>

Ricorda molto il router-link e il router-outlet di Angular.

Virtual dom

La libreria di Evan utilizza proprio come React il virtual DOM. Entrambi quindi creano un DOM virtuale che viene sincronizzato con il DOM reale e al momento di modifiche sul quello virtuale, vengono automaticamente trasferite su quello reale.
Entrami i framework grazie al virtual Dom hanno migliorato le prestazione di rendering, ma risulta essere più veloce Vue e anche la sua libreria molto più leggera, 25.6 KB contro i 37,4 KB di DOM più 11,4 KB di libreria.

Componenti

I componenti sono blocchi di codice riutilizzabile all’interno della web app.
In Vue viene scritto tutto il codice in un solo file come succede in React. Contiene però, un template HTML separato dalla logica JavaScript come accade in Angular, dando l’opportunità a chi è rimasto affezionato al classico HTML di poterlo usare senza problemi.
Tutti i componenti hanno una loro istanza isolata. Ciò significa che possiamo referenziare i dati di un componente padre internamente a un figlio. Questi vanno passati come parametri tramite un opzione offerta dal componete chiamata props, nel seguente modo:

Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

<child message="hello!"></child>

Anche questa modalità di passaggio di parametri tra un componente e l’altro, ricorda molto il noto framework di Google.

Vuex

È una libreria di gestione dello stato offerta dal team di Evan. Permette la gestione dello stato, funziona da contenitore centralizzato per tutti i componenti, con regole che garantiscono che lo stato possa essere mutato solo in modo prevedibile. È una soluzione a simile Redux offerta dal team di React che oltretutto è anche compatibile con Vue.

Server side rendering

È un modo di fornire la pagina web che sicuramente vedi giornalmente, ma del quale forse non ne sei a conoscenza. Se fai caso ai click che fai per spostarti nelle varie sezione sul nostro blog, noterai che ogni volta viene ricaricata la pagina. Questo accade perché ogni volta viene fatta una richiesta al server che darà in risposta la pagina da visualizzare.
La libreria che stiamo trattando, proprio come React e Angular, utilizza il client side rendering. Viene effettuata una sola richiesta iniziale al server, il quale restituisce l’intero sito web e le chiamate successive servono soltanto a ricevere dati con cui aggiornare il sito. Grazie a questo modo di operare, il sito web non ha più bisogno di ricaricare la pagina, dando un esperienza utente simile a un normale programma per pc.
Ognuna delle due metodologie a pro e contro che non tratteremo oggi, ma approfondiremo più dettagliatamente in un altro articolo.
Vue, come gli altri due framework, offre la possibilità di usare il server side rendering tramite la libreria Nuxt.js, che è stata sviluppata dalla community.

Cli

Vue offre un un tool CLI (Command Line Intreface), che ti aiuta a creare velocemente un progetto e a capirne la struttura. Il pacchetto si chiama vue-cli ed è scaricabile tranquillamente da npm tramite il comando npm i -g vue-cli. Dopo averlo installato, vi basta lanciare il comando vue init webpack <NOME_APP>e verrà creata un’applicazione già funzionante, proprio come in Angular.

Perchè scegliere vue

Abbiamo visto che Vue, nonostante sia saltato fuori da un piccolo gruppo di programmatori, ha le potenzialità per diventare grande.
Adesso vediamo cosa ci spinge a utilizzarlo:

• Ha una documentazione da favola
• Ha una separazione tra HTML e JS
• La curva di apprendimento è molto bassa
• È leggero e veloce

Voi cosa dite? Lo vogliamo premiare Evan You e il suo team? Fatemi sapere cosa ne pensate.
Se siete interessati a costruire una web app in VueJS, potete dare un’occhiata a come costruire un quickstart con vue-cli e vue-router.