Con il continuo aumento dei framework JavaScript frontend, tra cui il nuovo Vue.js 3, è diventato fondamentale stare al passo e individuare tutte le nuove funzionalità.
In questo articolo analizzeremo Vue.js 3 e le sue ultime novità. Queste novità rendono Vue.js ancora più solido, facendone un ottimo framework da tenere in considerazione per i nuovi progetti. Scoprirete in dettaglio 10 cose da sapere su Vue.js e come può aiutarvi a realizzare applicazioni frontend scalabili e performanti.
Pronti? Cominciamo!
Cos’È Vue.js?
Secondo Evan You, il creatore di Vue.js:
“Vue.js è una soluzione più flessibile e meno discutibile. È solo un layer d’interfaccia, così può essere utilizzato come una feature leggera nelle pagine invece di una SPA completa.”
.
Evan voleva creare un framework frontend potente come Angular, ma anche più “leggero” e flessibile, senza tutti i plugin inutili e i concetti di Angular.
Il risultato è stato Vue.js, che è uno dei framework frontend più popolari in uso oggi.
Perché gli Sviluppatori Scelgono Vue.js
Diverse ragioni spingono uno sviluppatore verso una particolare tecnologia. Vediamo perché pensiamo sia utile imparare Vue.js.
Per iniziare, Vue.js è uno dei framework più semplici per la maggior parte degli sviluppatori perché utilizza JavaScript. Pertanto, chiunque abbia una conoscenza di base di JavaScript sarà in grado di sviluppare con Vue.js.
Lo strumento Vue CLI, combinato con altri strumenti di sviluppo frontend, semplifica moltissimo la configurazione di Vue.js. È impostato di default con diverse funzionalità, ma si può anche creare codice con una logica e una struttura DRY (Don’t Repeat Yourself).
Anche la reattività è di default in Vue.js. Ciò significa che la funzionalità in tempo reale popolare sul framework Angular è una passeggiata con Vue.js. Ad esempio, nella vostra applicazione Vue.js potete facilmente applicare una semplice direttiva come v-if.
Ora analizziamo i principali pro e contro di Vue.js.
Pro e Contro di Vue.js
Oggi Vue.js è il secondo framework più popolare . Vediamo cosa lo attira gli sviluppatori web e cosa li allontana.
Pro di Vue.js
Inizieremo dagli aspetti positivi di Vue.js.
Dimensioni Ridotte
Vue.js ha una dimensione di download molto ridotta, circa 18 KB, che è eccellente rispetto ad altri framework di grandi dimensioni. Grazie alle ridotte dimensioni, Vue.js avrà un effetto positivo sulla SEO e sulla UX della vostra applicazione frontend.
Componente di un Singolo File e Leggibilità
Vue.js utilizza un’architettura basata su componenti, separando così grandi blocchi di codice in componenti più piccoli. Inoltre, in Vue.js tutto è un componente e ogni componente è scritto con HTML, CSS e JavaScript. Questo favorisce la leggibilità e la semplicità.
Solido Set di Strumenti
Vue.js supporta nativamente un gran numero di strumenti di sviluppo frontend che richiedono una ridotta o nulla configurazione da parte vostra. Ad esempio, Vue.js supporta strumenti come Babel e Webpack. Inoltre, fornisce test unitari, librerie di test end-to-end, sistemi di routing semplici e flessibili, gestori di stato, rendering lato server (SSR) e altro ancora.
Semplicità
Se avete già utilizzato Vue.js, sarete d’accordo che è molto facile da usare. Ha un approccio moderno allo sviluppo web, permettendo anche ai principianti di cominciare a utilizzarlo senza grandi difficoltà.
Contro di Vue.js
Ora che abbiamo analizzato i pro, scopriamo i contro di Vue.js.
Complessità delle Reattività
L’implementazione del binding bidirezionale permette di gestire comodamente i componenti di Vue.js. Il binding bidirezionale si riferisce alla condivisione dei dati tra una classe di componente e il suo template, è sviluppato in modo che, se i dati cambiano in una posizione, vengono aggiornate automaticamente anche le altre.
Ma c’è un problema che riguarda il modo in cui funziona la reattività mentre il sistema restituisce solo i dati attivati. A volte ci sono errori durante la lettura dei dati, quindi è necessario appiattire i dati stessi. Nel sito di Vue.js si analizza più approfonditamente questo problema e il modo in cui viene gestito.
Barriere di Lingua
Inizialmente, Vue.js è stato adottato principalmente dai cinesi. Grandi aziende come Xiaomi e Alibaba hanno contribuito a rendere popolare il framework e a creare una domanda nel mercato del lavoro. Tuttavia, con l’adozione significativa da parte di molte aziende cinesi, molti forum, canali di discussione e simili erano principalmente in cinese, rendendo difficile l’adozione di Vue.js per sviluppatori non madrelingua.
Oggi non è più così in quanto Vue.js si è evoluto e ora supporta molte lingue, anche se ci sono alcune lingue meno supportate di altre.
Rischi di Eccessiva Flessibilità
Come detto sopra, Vue.js è molto flessibile e semplice. Pertanto, è facile trovare un sacco di spaghetti code ovunque, dato che tutti in un team aziendale possono avere opinioni diverse su come fare le cose.
Dai pro e contro di Vue.js descritti, potreste già aver individuato alcune caratteristiche che amate e altre che invece non vi piacciono.
10 Cose da Sapere su Vue.js
Qui sotto ci sono le dieci cose da sapere su Vue.js e perché è essenziale conoscerle.
Proprietà Calcolate
Una proprietà calcolata è una delle caratteristiche più utilizzate di Vue.js. Una proprietà calcolata permette di creare proprietà che possono essere modificate, manipolate per visualizzare dati in modo efficiente e leggibile.
Questo torna utile quando volete ripetere molti piccoli metodi per cose come la formattazione, la modifica dei valori, o un grosso processo che dovete attivare in certe situazioni.
Le proprietà calcolate aiutano ad evitare l’eccesso di logica nel vostro template. Una logica eccessiva può far gonfiare rapidamente il vostro codice e renderlo difficile da mantenere.
Supponiamo che vogliate formattare una stringa in lettere maiuscole:
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
Cosa succede se avete bisogno di cambiare la variabile value in 50 posti diversi? Il codice si gonfia, vero? Bene, le proprietà calcolate sono qui per questo:
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Potete facilmente cambiare toUpperCase() in toLowerCase(), e la modifica si rifletterà da un unico punto.
Gestione degli Eventi
Vue.js semplifica la comunicazione tra figlio e genitore grazie a $emit e v-on. La gestione della comunicazione tra gerarchie di componenti diventa facile e diretta.
La funzione $emit accetta due parametri: una stringa per il nome e un valore opzionale da emettere.
La funzione v-on:event-name è utilizzata dal componente figlio per ricevere l’evento emesso dal suo componente genitore:
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>Una volta attivato il pulsante Add, il metodo onClick attiva l’evento $emit, che emette l’evento add verso un componente figlio in ascolto dell’evento add.
Vediamo come rimanere in attesa di un evento:
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>Il codice qui sopra ascolta l’evento add e risponde cambiando il valore di showSaveMsg a true, mostrando nuovamente il messaggio.
Lazy Loading / Componenti Asincroni
Lazy loading è uno dei migliori hack di performance per Vue.js, in cui i componenti sono aggiunti e resi asincroni o on-demand, il che riduce significativamente la dimensione dei file, il tempo di richiesta-risposta HTTP, e così via.
Il lazy loading si ottiene con le importazioni dinamiche di Webpack, che supporta anche la divisione del codice.
Vue.js permette il lazy loading dei componenti e può essere ottenuto globalmente con i seguenti script:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Potete ottenerlo localmente con un componente, come mostrato qui sotto:
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Componenti Globali
Con i componenti globali di Vue.js possiamo raggiungere una significativa riusabilità, potendo registrare un componente una volta e poi utilizzarlo ovunque all’interno della propria istanza di Vue.js.
I componenti globali sono una funzionalità importante e possono farvi risparmiare un sacco di tempo, evitando di dover registrare i componenti individualmente ogni volta, ma se ne può facilmente abusare se si registrano tutti i componenti globalmente. Registrare tutti i componenti a livello globale può far aumentare rapidamente le dimensioni di compilazione, con conseguente scarsa SEO e tempo di caricamento della pagina maggiore.
Registrate sempre globalmente i componenti utilizzati molte volte nel vostro progetto, come mostrato di seguito:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));Componente a Singolo File
Una delle funzionalità più potenti di Vue.js sono i componenti; questi aiutano ad estendere elementi HTML, CSS e JavaScript essenziali in modo da incapsulare codice riutilizzabile.
I componenti permettono di suddividere grandi progetti in parti più piccole e riutilizzabili che possiamo estendere all’intero progetto, nel rispetto del principio DRY (Don’t Repeat Yourself) dell’ingegneria software.
Permettono di avere organizzazione e incapsulamenti per grandi progetti, codice riutilizzabile, e può essere separato in file .vue.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>Gli script qui sopra creano un componente pulsante personalizzato che possiamo riutilizzare nel nostro progetto. Ogni componente ha il suo codice HTML, CSS e JavaScript.
Testing
Vue.js fornisce una delle librerie di testing più robuste, permettendo di eseguire i test unitari con Jest e Mocha o il testing end-to-end in modo semplice e con poca o nessuna configurazione.
Potrebbe essere utile dare una rapida occhiata al testing con questi strumenti. Analizziamo, quindi, l’installazione, la configurazione e il testing di un progetto demo.
Se utilizzate lo strumento consigliato Vue CLI per impostare il vostro progetto, eseguite questi comandi:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Poi, dopo la configurazione, includete il codice qui sotto, che dimostra come testare un semplice componente:
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})La Vue Testing Library ha due ottime opzioni per testare i componenti: Mount e Shallow.
Se volete testare un componente con un isolamento completo, usate il metodo shallow. Altrimenti, se avete bisogno di lavorare su un componente con sottocomponenti con cui volete garantire la comunicazione, scegliete l’opzione mount.
Il Potente Vue CLI
Vue CLI è un eccellente strumento CLI e dà un grande potere a qualsiasi sviluppatore Vue. Con Vue CLI, è possibile testare rapidamente qualsiasi componente in isolamento. La cosa grandiosa di Vue CLI è che permette di sviluppare completamente un componente in isolamento, testarlo, e avere ancora accesso al reloading a caldo mentre si itera su quel particolare componente.
Per dimostrarlo, installiamo Vue CLI a livello globale:
npm install -g @vue/cliFatto questo, potete testare qualsiasi componente eseguendo il comando qui sotto:
vue serve ./components/views/Home.vueSe volete estrarre un particolare componente, ad esempio per condividerlo con i vostri colleghi, potete farlo usando il comando qui sotto:
vue build --target lib --name goldenRule ./components/views/HomeVue CLI è molto potente e può far risparmiare un sacco di tempo produttivo se si impara ad utilizzarlo con arte. Se volete saperne di più, date un’occhiata alla documentazione ufficiale.
Gestione delle Proprietà
La gestione delle proprietà è fondamentale per il componente Vue in quanto può essere creato in diversi modi. È anche possibile convalidare le proprietà, creare più proprietà e modificarle a seconda delle necessità.
È possibile creare una nuova proprietà in un componente Vue in diversi modi. Supponendo che abbiate il vostro componente, dovrete creare la prop isAdmin.
Vediamo i diversi metodi:
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>È molto importante convalidare le proprietà. Per fortuna, è anche molto semplice:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...Infine, modificare le proprietà è semplice, basta riallineare i valori:
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
Per assegnare un valore alla prop in un componente genitore:
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Rendering Lato Server (SSR)
Con tutte le fantastiche funzionalità e i vantaggi offerti per creare applicazioni frontend, Vue.js è sempre una libreria lato client che rende e manipola solo gli elementi del DOM.
Il rendering lato server permette ai framework lato client come Vue.js di ottenere risultati migliori. I crawler dei motori di ricerca vedranno le pagine del vostro sito web completamente renderizzate durante la scansione.
Per ottenere l’indicizzazione del sito web da Google e Bing più velocemente, il vostro sito ha bisogno di avere un punteggio time-to-content più alto. Questo è ciò che vi permette di ottenere il rendering lato server in Vue.js.
Il rendering lato server (SSR) è una tecnica molto utilizzata per il rendering di una normale applicazione a pagina singola (SPA) lato client sul server e poi inviare una pagina completamente renderizzata al lettore.
Quando la pagina viene renderizzata lato server, la invia al client come risposta. Così ogni informazione è già stata resa mentre il browser visualizza la pagina del motore di ricerca.
Per un principiante è difficile realizzare SSR in Vue.js. Sarà più facile utilizzare Nuxt.js, che ha un SSR integrato e una curva di apprendimento molto bassa.
Distribuzione
Vue.js presenterà molti avvisi, errori e dimensioni di file notevoli durante lo sviluppo, ma questi problemi svaniscono immediatamente quando si passa al deployment per la produzione. Vue.js configurerà automaticamente gli strumenti di build di Webpack, minificazioni, estrazione ed eliminazione dei CSS, caching, tracciamento degli errori di runtime e altro ancora.
I clienti di Kinsta possono usare la funzione di minificazione del codice integrata a cui si accede direttamente nel cruscotto di MyKinsta. Questo permette loro di abilitare facilmente la minificazione automatica di CSS e JavaScript con un semplice clic.
La distribuzione con Vue.js è molto semplice, dato che l’ambiente di produzione viene installato e configurato automaticamente, senza alcun passaggio in più da parte dello sviluppatore.
Per distribuire la vostra applicazione Vue.js, potete leggere le guide generali.
Riepilogo
In questo articolo abbiamo scoperto cos’è Vue.js, perché potreste utilizzarlo, quali sono i pro e i contro e le 10 cose da sapere.
Speriamo che abbiate ora una maggiore conoscenza di Vue.js per realizzare applicazioni frontend scalabili e performanti.
Continuate a programmare!
Se avete domande o suggerimenti, vogliamo sentirli. Scriveteli nella sezione dei commenti qui sotto!
Lascia un commento