Da libreria javascript a framework, il percorso di Vue è impressionante, soprattutto se si considera che mantiene la sua natura leggera. Vue3 offre diverse funzionalità, tra cui Pinia, che consente una gestione più semplice degli stati, e una build toolchain che funziona su Vite. Sia che vogliate aggiornare le vostre applicazioni a Vue3 sia che vogliate semplicemente sperimentare il framework, abbiamo raccolto qui tutto ciò che dovete sapere su Vue3!
Che cos'è Vue3?
Prima di entrare nel merito dei cambiamenti che vedrete in Vue3, diamo prima un'occhiata a cosa sono Vue.js e i suoi componenti principali:
Vue
Vue.js è un framework open-source di front-end JavaScript che può essere utilizzato per creare interfacce utente. Il framework offre un approccio di codifica dichiarativo e basato su componenti che favorisce lo sviluppo rapido di display utente. Può essere utilizzato per sviluppare interfacce semplici o complicate e si basa su HTML, CSS e JavaScript standard del settore. Le ragioni della popolarità di Vue.js e della sua ampia base di utenti sono la sintassi facile da usare per i programmatori, la facilità d'uso e la documentazione ben definita.
Come già detto, Vue.js si basa su due caratteristiche fondamentali:
Ilrendering dichiarativo consente all'utente di definire l'output HTML in modo dichiarativo in base allo stato di JavaScript. Vue.js si espande sul normale HTML con l'aiuto della sintassi dei template.
Reattività - Vue.js monitora attivamente lo stato JavaScript e, quando viene modificato, aggiorna rapidamente il DOM.
Vue3.0
Gli ingegneri che utilizzano Vue 2 per la codifica devono ora aggiornarsi a Vue3. Questo perché ha nuove funzionalità che rendono molto più semplice la progettazione di componenti leggibili e coerenti e metodi migliori per organizzare le nostre applicazioni. Vue3 è più facile da usare, più breve e più semplice da mantenere. Alcune delle caratteristiche più importanti di Vue3 sono Teleport, Fragments e v-model multipli.
L'ultima versione ha eliminato i filtri, ha variabili CSS guidate dallo stato e una funzione sperimentale di suspense. Inoltre, presenta modifiche alla denominazione del ciclo di vita e alterazioni dei componenti a file singolo.
È stato rilasciato Vue3?
L'ultima versione di Vue disponibile - Vue3 - è stata inizialmente annunciata a metà 2018 e rilasciata ufficialmente nel settembre 2020. Vue3.0 è stata dichiarata la versione predefinita ufficiale del framework JavaScript progressivo il 7 febbraio 2022.
Quali sono le novità di Vue3?
I cambiamenti più interessanti da aspettarsi in Vue3 sono:
Fornire/iniettare
Vue 2 permetteva agli utenti di passare dati come stringhe, array, oggetti e altro ancora attraverso i props nel codice. Tali dati potevano essere facilmente passati da un elemento genitore ai suoi elementi figli. Tuttavia, l'uso dei puntelli rendeva più difficile inviare dati dall'elemento genitore a un elemento figlio profondamente annidato. Di conseguenza, gli sviluppatori hanno dovuto utilizzare Vuex Store e Event Hub. Vue 2.2.0 includeva anche provide/inject, ma non era consigliabile utilizzarlo nel codice generale del programma.
Tuttavia, utilizzando la combinazione provide/inject migliorata in Vue3, possiamo passare i dati in modo più rapido e ordinato. Come suggerisce il nome, si utilizza provide per rendere accessibili i dati da un elemento genitore a uno qualsiasi dei suoi componenti figli, indipendentemente da quanto profondamente siano annidati tali elementi figli. Possiamo usare i provide come oggetti o come funzioni.
Teletrasporto
In base alla logica dell'applicazione che si vuole costruire, i componenti possono essere mostrati in luoghi diversi da quelli in cui si vuole che vengano visualizzati. Ad esempio, si potrebbe voler creare un popup che dovrebbe apparire e occupare l'intero schermo. Per ovviare a questo problema, si può usare l'attributo position di tali componenti nei CSS, ma con Vue3 gli sviluppatori possono anche usare Teleport.
Teleport consente ai programmatori di prendere un elemento dal suo contenitore iniziale in cui è avvolto e di spostarlo in qualsiasi componente già esistente nella pagina in cui viene utilizzato. Ad esempio, è possibile trasferire un elemento di intestazione dal div #app all'intestazione. Ricordate che potete usare Teleport solo per spostare elementi in componenti di codice che esistono al di fuori del DOM di Vue.
Frammenti
In Vue 2 è difficile avere diversi componenti radice nel template di un file. I programmatori hanno iniziato a racchiudere tutti i componenti in un componente genitore come soluzione. A volte, i programmatori possono aver bisogno di renderizzare un elemento senza un contenitore avvolto intorno ad esso. I progettisti possono ora avere numerosi elementi nel loro file template principale grazie a Fragments, che è una caratteristica aggiunta a Vue3.
API globale di Vue
Vi sarà capitato spesso di trovare Vue.component o Vue.use nel file main.js di un'applicazione Vue. Si tratta di API globali e in Vue 2 esistono molti metodi di questo tipo. In questo caso, se si hanno più istanze della propria applicazione, tutte sono posizionate su Vue. È difficile limitare funzionalità specifiche a una singola istanza dell'applicazione.
Vue3 risolve questo problema introducendo una nuova API globale chiamata createApp. Con questo metodo, è possibile ottenere una nuova istanza di un'applicazione Vue. Tutte le API legate a Vue 2.x saranno trasferite a istanze separate dell'applicazione. Questo permette a ogni istanza dell'applicazione di avere funzioni esclusive, senza disturbare le altre istanze già in uso.
API degli eventi
Oltre all'utilizzo del Vuex Store, l'uso dell'Event Bus è uno dei metodi più diffusi tra i programmatori per il passaggio di dati tra elementi che non condividono un contesto genitore-figlio. Tuttavia, codici come $on, $off e $once sono stati tutti eliminati in Vue3. Ma $emit è ancora accessibile, poiché gli elementi figli devono emettere eventi ai loro elementi genitori. Una soluzione a questo problema potrebbe essere l'uso di provide/inject.
Una catena di strumenti di compilazione alimentata da Vite
Progettata da Evan You, il creatore di Vue, Vite è una toolchain di supporto a Vue SFC di altissimo livello, leggera e veloce da creare. Vite è ora il motore della configurazione di compilazione standard di Vue3. Il bundler di moduli @vue-cli/service, che è costruito in cima a webpack, avvolgerà l'intera applicazione Vue al lancio, ai ricarichi a caldo e alla compilazione. Vite, invece, prenderà la sintassi ES Import dal codice del programma e permetterà al browser di analizzare ogni importazione prima di inviare una richiesta HTTP.
La modifica è stata apportata principalmente per motivi di velocità. Il server si avvia immediatamente poiché utilizza il supporto nativo del browser per i componenti JavaScript ed è molto più veloce.
Sintassi dell'API di composizione
L'API Options è stata utilizzata per creare gli stati e la logica degli elementi. L'API Composition è stata lanciata da Vue3 come sostituto della stessa. Si tratta semplicemente di una raccolta di API che consente di creare elementi Vue senza definire opzioni, utilizzando metodi importati.
L'API Composition contiene le seguenti API:
API di reattività - Ad esempio, ref() e reactive(). È possibile costruire direttamente lo stato reattivo, lo stato calcolato e gli osservatori utilizzando queste API.
Ganci al ciclo di vita - Ad esempio, onMounted() e onUnmounted(). Possiamo agganciarci al ciclo di vita degli elementi usando gli hook del ciclo di vita.
Iniezione di dipendenza - Ad esempio, provide() e inject(). L'utilizzo del sistema di iniezione delle dipendenze di Vue con le API di Reactivity è reso possibile dall'iniezione delle dipendenze.
Vantaggi dell'uso delle API di composizione
I principali vantaggi dell'uso delle API di composizione rispetto alle API di opzioni sono:
- Con Vue3 non è più necessario un elemento per generare uno stato reattivo.
- Quando si aggiungono numerosi attributi reattivi, l'impostazione degli elementi di Vue.js può diventare eccessiva. Per questo motivo, potrebbe essere utile astrarre queste variabili reattive in file javascript separati.
- Il vantaggio principale dell'API Composition è che permette di riutilizzare una logica chiara ed efficace sotto forma di metodi Composable. Risolve tutti i problemi dei mixin, il metodo principale di riutilizzo della logica nell'API Options.
- È possibile digitare codice nell'API Composition con un'inferenza di tipo completa.
- I programmi scritti in Composition API sono più efficienti e i nomi delle variabili possono essere ridotti. Questo riduce l'overhead.
- Con Composition API è possibile condividere meglio il codice del programma.
Pinia
Pinia è uno strumento leggero di gestione dello stato per Vue.js. Permette di condividere uno stato tra elementi e pagine. Crea un framework di gestione dello stato facile da usare e completamente tipizzato, utilizzando il nuovo concetto di reattività di Vue3. È ora la nuova libreria standard di Vue3 per il controllo dello stato.
Pinia è servito inizialmente come studio delle potenzialità di Vuex. Per molto tempo, Vuex è stato il sistema di gestione degli stati suggerito per Vue, ma con Vue3, Pinia è il sistema consigliato per la gestione degli stati nella documentazione ufficiale. Attualmente, Vuex è in modalità di manutenzione. Sebbene continui a funzionare, non verranno aggiunte nuove funzionalità. L'uso di Pinia è consigliato per le nuove applicazioni.
Perché Pinia?
Pinia è molto leggero, con un peso di appena 1 KB. Inoltre, si integra con gli strumenti di sviluppo di Vue.js per migliorare l'esperienza di codifica in Vue 2 e Vue3. Dal momento che Pinia infonde tutti i tipi di dati, è in grado di offrire un completamento automatico completo e preciso anche in javascript. Pinia è anche modulare, facile da usare ed espandibile. Nel complesso, Pinia appare leggero, semplice e diretto. Assomiglia molto alla gestione degli elementi e contiene tutti gli strumenti necessari per la programmazione dinamica in Vue3.
Vue 2 sarà deprecato?
L'ultimo aggiornamento minore di Vue 2 è stato Vue 2.7, rilasciato nel luglio 2022. Vue 2 è attualmente in modalità di manutenzione. Anche se non verranno rilasciate ulteriori funzionalità, per 18 mesi riceverà correzioni di bug cruciali e patch di sicurezza. Entro la fine del 2023, Vue 2 sarà deprecato.
Migrazione da Vue 2
In base al vostro software, il passaggio a Vue3 potrebbe non essere conveniente se state lavorando a un progetto di dimensioni estremamente grandi che utilizza Vue 2. Utilizzate Vue3 se i problemi di efficienza persistono nonostante i vostri sforzi di ottimizzazione.
La scelta di migrare o meno la vostra applicazione a Vue3 dipende dalle sue dimensioni e dalla sua complessità. La maggior parte della sintassi e delle tecniche di Vue 2 sono le stesse di Vue3. Tuttavia, se si desidera utilizzare alcune delle modifiche sopra menzionate, la migrazione sarebbe un'idea migliore.
Vue.js nel progetto AppMaster
La piattaforma AppMaster utilizza il framework VueJS, o meglio la terza versione del framework, per creare un'applicazione front-end per i nostri utenti. Vue 3 viene utilizzato per creare l'amministrazione, i pannelli e i portali dei clienti, e anche l'intera interfaccia di AppMaster studio è realizzata con il framework VueJS.
Utilizziamo un approccio speciale chiamato micro-frontend o microservizi front-end per poter sviluppare in modo rapido ed efficiente il nostro prodotto; ad esempio, ogni editor di modelli di dati e di processi aziendali è un'applicazione front-end completamente separata nella nostra piattaforma. Questo ci permette di sviluppare in modo molto rapido e indipendente dal punto di vista del team di sviluppo, aumentando la velocità complessiva del nostro prodotto. Tutti questi vantaggi i nostri clienti possono ottenerli utilizzando le nostre applicazioni.
In futuro, oltre alla modalità SPA single-page application, aggiungeremo la modalità SSR (server-side rendering), che consentirà ai nostri clienti di creare non solo pannelli di amministrazione e portali personalizzati, ma anche siti web completi con un'elevata ottimizzazione SEO.
Informazioni sul no-code
Uno degli elementi chiave che influenzano la democratizzazione del coding è l'approccio allo sviluppo no-code. Oggi un numero maggiore di persone può accedere alla programmazione in generale senza dover ricorrere alla codifica. Questo rende più semplice il web design, lo sviluppo di applicazioni mobili e lo sviluppo web responsive.
AppMaster è una delle applicazioni che possono essere utilizzate per creare automaticamente il codice sorgente. È possibile visualizzare e ispezionare il codice in qualsiasi momento. Con AppMaster è possibile personalizzare le informazioni del progetto utilizzando un linguaggio informatico. Inoltre, se lo si desidera, è possibile esportare il codice. Questo garantisce il controllo completo e la proprietà dell'applicazione a cui si sta lavorando con AppMaster.
Conclusioni
Se volete una spiegazione più dettagliata di come Vue3 sia diverso da Vue 2, insieme a frammenti di codice, potete consultare la documentazione ufficiale di Vue.js. Abbiamo menzionato la maggior parte dei principali cambiamenti di cui dovreste essere a conoscenza. È importante che siate sempre informati sugli aggiornamenti di Vue3 se siete interessati a creare applicazioni con questo framework.
