Dopo Angular di cui potete leggere il relativo articolo sempre sul nostro blog, è giunto il momento di parlare di Vue.js.

Anche in questo caso ci piacerebbe parlarvi un pò della sua origine e di come un gruppo di sviluppatori sparso per tutto il mondo sia riuscito a portarlo sul podio dei più famosi framework Javascript, competendo con aziende del calibro di Google e Facebook, i rispettivi creatori di Angular e React.

Cenni Storici

La storia di Vue.js è iniziata quando Evan You, il suo ideatore, durante il periodo universitario cominciò a lavorare su vari Esperimenti Chrome, creando un sacco di progetti innovativi con animazioni 3d. Uno dei più famosi fu un clone della Clear App, una TODO app molto popolare all’epoca per le sue gesture innovative che fu replicata esclusivamente con l’utilizzo di tecnologie Web.

Questo progetto attirò molta visibilità, grazie ai numerosissimi feedback positivi pubblicati su Hacker News che aumentarono la popolarità di Evan fino al punto di ricevere una chiamata dai recruiter di Google che gli proposero di entrare a far parte del team innovativo focalizzato proprio sugli esperimenti su Chrome. Come prevedibile, Evan accettò con grande entusiasmo ed entrò a far parte di un team di 5 sviluppatori creativi.

Il compito di Evan era lavorare su progetti inizialmente sviluppati in Vanilla JavaScript; ad un certo punto decise di iniziare ad usare alcuni dei framework esistenti per portare a termine i suoi compiti ed è proprio qui che ebbe origine l’idea di Vue.js.

Evan notò che questi framework non gli risolvevano i problemi di sviluppo, c’era sempre un pezzo mancante. Il primo framework che utilizzò era Backbone.js, a cui, però, mancava tutta la parte interattiva con le view, la quale era necessaria proprio per il tipo di progetti su cui lavorava. Dopodichè utilizzò Angular, che forniva un ottimo meccanismo di Data Binding, routing e mantenimento dello stato in sync con le view, ma obbligava a scrivere il codice in un certo modo, il che era un problema in quanto i progetti su cui lavorava avevano bisogno di molta più interattività rispetto alle tipiche Web Application. 

Da questo momento cominciò a pensare di creare un proprio framework. Inizialmente Evan voleva creare un'utility molto semplice per collegare alcune componenti del DOM a degli oggetti Javascript. Chiamò questo progetto Seed.js ma fu costretto a cambiargli il nome dopo aver provato a pubblicarlo su NPM e aver constatato che era già stato preso. 

Quindi cominciò a pensare a un nuovo nome concentrandosi sulle caratteristiche del suo progetto che puntava molto sulla visualizzazione e sulle View. Inizialmente voleva chiamarlo proprio View ma gli sembrava troppo scontato, allora cercò su google translate delle traduzioni che gli piacessero e finì per optare per quella francese Vue.

Il progetto cominciò a diventare molto popolare, quindi Evan decise di espandere il suo scopo applicativo aggiungendo altri pezzi all’ecosistema, rendendolo sempre di più un framework completo.

A quel punto decise di dedicarsi full time allo sviluppo di Vue.js, data anche la sorprendente crescita di community. Un altro fattore che contribuì enormemente alla sua popolarità, fu un tweet di Taylor Otwell, il creatore di Laravel, che potete leggere qui di seguito:  

L’anno successivo Vue.js fu integrato nativamente nei progetti Laravel contribuendo ancor più alla crescita della sua community e attirando le attenzioni di molti sviluppatori che entrarono a far parte del core team con Evan. 

Arriviamo al 2016

Ormai la popolarità di Vue.js è indiscussa, durante quell’anno raggiunse i 3 milioni di download e fu utilizzato in tantissimi progetti.

La cosa affascinante di Vue.js è che il raggiungimento di questi risultati lo si deve esclusivamente all’impegno di innumerevoli sviluppatori che hanno contribuito e continuano a farlo alla sua crescita, dando aiuto in tantissimi modi tra tutorial, pacchetti, plug-in e molto altro. Ricordiamoci, infatti, che dietro Vue.js non ci sono aziende enormi e ricchissime come Google e Facebook!

Nella seguente foto potete vedere come Vue.js sia diventato un diretto competitor di React dopo aver surclassato Angular nelle statistiche di utilizzo mondiali negli ultimi anni:

Entriamo nel dettaglio

Vue.js è un framework che si focalizza sulla creazione di interfacce Web dinamiche ed efficienti, inoltre, funzionando solo a livello di visualizzazione è facilmente integrabile in qualsiasi progetto esistente.

Tra le sue feature principali troviamo:

• Virtual DOM:
  • Vue.js utilizza un Virtual DOM per renderizzare i componenti, esattamente come React. Essenzialmente è un clone del DOM reale che assorbe tutte le modifiche effettuate per poi portarle attraverso dei meccanismi sul DOM reale, il tutto per velocizzare gli aggiornamenti;
• Data Binding:
  • Questa feature si occupa di manipolare e assegnare diversi valori agli elementi HTML, per far ciò si avvale della direttiva v-bind;
• Transizioni e Animazioni CSS:
  • Vue.js fornisce dei metodi efficienti per applicare transizioni agli elementi HTML in ogni loro ciclo di vita, quando ad esempio sono aggiunti, modificati o eliminati. Inoltre è predisposto per l’integrazione di librerie di terze parti in modo da facilitare la creazione di un'esperienza utente ottimale;
• Proprietà Computed: 
  • Una delle caratteristiche più importanti di questo framework, le computed properties, quando utilizzate nel template, restano sempre in ascolto ai cambiamenti UI, effettuando le opportune logiche. Sono utili quando si lavora con proprietà composte dipendenti tra loro e che richiedono un continuo aggiornamento. Le computed properties sono cachate quindi vengono eseguite nuovamente solo quando una loro dipendenza cambia;
• Watchers:
  • Molto spesso confusi con le computed, sono da utilizzare nei casi in cui alcune proprietà cambiano frequentemente. Per esempio sugli input di un form. Facilitando la vita allo sviluppatore che non deve preoccuparsi di null’altro sulla gestione del dato. I watchers sono inoltre utili per effettuare operazioni asincrone o dispendiose in risposta al cambiamento di alcuni valori;
• Metodi:
  • I metodi sono la parte di un componente vue in cui definire le funzioni che effettuano una modifica dello stato e quindi del template. Possono accettare dei parametri ma non salvano eventuali dipendenze. I metodi sono rieseguiti ogni volta che il componente viene caricato.

Come usare Vue.js

Per utilizzarlo, innanzitutto, abbiamo bisogno di installare la Vue-cli, disponibile come pacchetto NPM. Dopo aver verificato di avere Node.js preinstallato puoi usare il seguente comando per installare la linea di comando di Vue.js globalmente:

npm install -g @vue/cli

vue create prova

A questo punto apparirà questa scelta:

In cui ti verrà chiesto che versione di Vue vuoi utilizzare. Per questo esempio abbiamo scelto la versione 3 ormai divenuta stabile e successivamente abbiamo optato per Yarn come gestore delle dipendenze.

Una volta concluso il processo di creazione, entra nel progetto e lancia il comando yarn serve e vai all’indirizzo:

http://localhost:8080/

Se tutto è filato liscio dovresti riuscire a vedere questa schermata:

Complimenti hai creato la tua prima applicazione Vue.js!

Struttura del progetto

Nella root del progetto ci sono alcuni file e cartelle estremamente importanti, uno dei quali è sicuramente il package.json, che contiene le dipendenze essenziali per il corretto funzionamento di Vue. 

Il file Index.html contiene invece il seguente contenuto:

Questo file ha il compito di caricare la nostra applicazione. Infatti il tutto sarà renderizzato all’interno del div con id app, in cui verrà iniettato l’output generato da Vue. Ma dove ha inizio questo processo?

Ottima domanda! Per capirlo bisogna esaminare il contenuto del file main.js:

Ed è qui che avviene la magia: la funzione createApp accetta come parametro un componente, in questo caso App e lo monta su un elemento HTML id app, ossia il div che abbiamo visto prima nella index.html.

Il componente App contiene il seguente codice:

Ogni componente Vue è strutturato in tre sezioni:

• <template></template>
• <script></script>
• <style></style>

Concentriamoci un attimo sulle prime due sezioni. La sezione Template, come è facilmente intuibile, contiene gli elementi HTML e i subcomponenti che sono renderizzati a schermo.

La sezione script effettua un default export di un oggetto chiamato App e la proprietà components viene usata per registrare i componenti esterni per poi utilizzarli nel template.

In questo esempio il componente esterno si chiama "HelloWorld" ed è contenuto nella cartella components dentro src, per poterlo usare è inoltre necessario importarlo al top della sezione script.

L’implementazione del componente HelloWorld è questa:

Come puoi vedere la sua implementazione è praticamente identica a quella del main.js, con la differenza che questa volta l’oggetto di configurazione possiede la proprietà props.

Essa definisce i valori che accetta in ingresso nel momento in cui viene istanziato il componente. Questi valori possono, poi, essere usati nel template attraverso l’utilizzo della interpolazione.

<h1>{{ msg }}</h1>

Adattiamo il componente HelloWorld

Ora mostriamo alcune delle direttive standard di Vue.js in modo da farne comprendere la facilità di utilizzo.

Direttiva v-for

La direttiva v-for rende possibile renderizzare molteplici elementi partendo da una fonte dati, iterando attraverso ogni singolo elemento. Solitamente questa fonte dati è ottenuta in maniera asincrona attraverso delle chiamate HTTP.

Per testarla aggiungiamo un array di oggetti nella proprietà data() in questo modo:

data () {
return {
  users: [
    {firstname: 'Giuseppe', lastname: 'Rossi'},
    {firstname: 'Paolo', lastname: 'Rossi'},
    {firstname: 'Giovanni', lastname: 'Rossi'}
  ],
}
}

<ul>
<li :key="user.firstname" v-for="user in users">
  {{user.firstname}} {{user.lastname}}
</li>
</ul>

Direttiva v-model

La direttiva v-model crea un two-way binding su un elemento di input o un componente. Per utilizzarla bisogna prima definire una variabile dentro la proprietà data del componente. Questa variabile sarà usata come target.

data () {
return {
  users: [
    {firstname: 'Giuseppe', lastname: 'Rossi'},
    {firstname: 'Paolo', lastname: 'Rossi'},
    {firstname: 'Giovanni', lastname: 'Rossi'}
  ],
  twoWayBinding: '', → Variabile Target
}
}

<input type="text" v-model="twoWayBinding">

• Ogni volta che l’utente inserisce un valore nell’input, il valore della variabile target sarà automaticamente aggiornato.
• Se cambiamo il valore della variabile target direttamente all’interno della proprietà data(), magari attraverso una funzione, anche il template sarà automaticamente aggiornato.

Un'ulteriore verifica è stampare live la variabile target, sfruttando l’interpolazione all’interno del template:

<div>
Valore Inserito: <span>{{twoWayBinding}}</span>
</div>

<template>
<div class="hello">
  <h1>{{ msg }}</h1>
  <div>
    <ul>
      <li :key="user.firstname" v-for="user in users">
        {{user.firstname}} {{user.lastname}}
      </li>
    </ul>
  </div>
  <hr />
  <div>
    <input type="text" v-model="twoWayBinding">
  </div>
  <div>
    Valore Inserito: <span>{{twoWayBinding}}</span>
  </div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {
  msg: String
},
data () {
  return {
    users: [
      {firstname: 'Giuseppe', lastname: 'Rossi'},
      {firstname: 'Paolo', lastname: 'Rossi'},
      {firstname: 'Giovanni', lastname: 'Rossi'}
    ],
    twoWayBinding: '',
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-position: inside;
}
a {
color: #42b983;
}
</style>

Conclusioni

Ormai siamo giunti al termine di questa mini serie riguardante i framework javaScript più popolari. Abbiamo parlato della loro storia e della filosofia che hanno voluto portare avanti.

Generalmente quello che tutti pensano è che Angular è il framework più ostico da imparare mentre React e Vue.js sono più semplici e per questo sono spesso consigliati a chi inizia la carriera nel mondo Front end. Inoltre, qualcuno di voi avrà notato che Vue.js ha molte cose in comune con React e Angular. Si può dire che Evan, il suo creatore, abbia preso le caratteristiche migliori dei suoi competitor e le abbia fuse.

Sebbene ciascuno di loro costituisca una validissima soluzione per lo sviluppo delle nostre web application, a volte piccole differenze possono causare enormi problemi in fase di sviluppo.

Per questo motivo nel prossimo articolo esamineremo nel dettaglio le differenze fra React, Angular e Vue.js da un punto di vista tecnico. Stay tuned!