Vue.js: un framework potente per le tue User Interface!

Se hai delle basi di html5, css3 e javascript6 non avrai problemi a masticare per la prima volta VUE.JS un framework nato per costruire GUI e TUI, ossia interfacce grafiche utente e touch interfacce utente per il mondo mobile. Il framework molto richiesto per i profili professionali frontend developer è reattivo, scalabile e performante e soprattutto non presenta le difficoltà di apprendimento di linguaggi complessi come Java per esempio. Si basa sul paradigma utente che interagisce con l’applicazione attraverso il famoso schema o pattern MODEL-VIEW-CONTROLLER dove l’utente interroga il controller che a sua volta scomoda il model per farsi restituire notifiche e richieste per chiudere il cerchio. La definizione di framework è abbastanza diffusa: può essere tradotto come struttura o quadro strutturale, in informatica e specificamente nello sviluppo software, è un’architettura logica di supporto (spesso un’implementazione logica di un particolare design pattern) sul quale un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore. VUE consente di creare applicazioni soddisfacenti che non hanno necessità di interrogare il server per ricaricare la pagina, consentendo una condivisione di stati e una interazione multitasking. Il rendering non avviene sulle pagine singole è il Framework che si occupa di offrire e completare numerose microinterazioni con l’utente, consentendo anche la gestione di stati tra i processi. Non vi è quindi la necessità di resettare alcunchè cone le Single Page Application (SPA) e questo gratifica l’esperienza utente in termini di velocità, di efficienza e soddisfazione.All’ indirizzo https://vuejs.org/ si possono reperire info vitali sul progressive framework. Si scoprirà che la tecnologia è facilmente integrabile nei propri progetti per controllare ad esempio parti di codice riutilizzabili e porzioni di funzionalità, proprio questa sua capacità si consentire un controllo su singole parti di una applicazioni che alla fine risulteranno assemblate è uno dei punti di forza della tecnologia. Per usare VUE sarà sufficiente un semplice collegamento CDN alla nostra pagina a seconda dei casi che si tratti di fase di sviluppo o di produzione. Vue come PF (progressive framework) è una libreria costantemente in evoluzione che offre numerose future e quindi si presenta come uno strumento ricco di risorse. La definizione accademica della caratteristica di VUE come Progressive Framework è che la libreria è integrabile in un progetto già esistente e ampliabile in virtù delle necessità. A questo punto cerchiamo di approfondire le differenze sostanziali tra un approccio imperativo nella programmazione e un rendering dichiarativo. Immaginiamod i avere un array con cinque elementi che vogliamo far scorrere e stampare a video. Nell’ approccio rigido imperativo avrò una situazione dove io programmatore applicherò un ciclo FOR istanziando una variabile contatore inizializzata a zero che obbedirà a una condizione (< di array.lenght) e che subirà un incremento per poter leggere tutti i dati, successivamente con un console.log stamperò i dati. Nell’ approccio dichiarativo invece non dovrò concentrarmi sul COSA ma sul COME in quanto per esempio una delle funzioni messe a disposizione da VUE per la gestione degli array è un FOREACH da scrivere su una semplice riga di struzione che si occuperà di default del COME FARE PER centrare il nostro obiettivo della stampa a video. Quindi se ne deduce una semplificazione nella scrittura del codice e una linearità di esecuzione, risparmiando righe di codice scritto. Non solo ma la programmazione reattiva gestita da VUE consente l’aggiornamento dinamico dei dati. Pensiamo solo di avere tre variabili come a,b,c. Le prime due sono un contenitore che ospitano un valore, la terza raccoglie per esempio la somma di a+b. Nella programmazione procedurale se dopo aver riempito il contenitore C con la somma che succederebbe se il valore di A mutasse? Che C avrebbe un altro valore. E’ per questo motivo che i contenuti con Vue Framework sono gestiti dinamicamente, per cui se scrivessi ad esempio {{messaggio}} nella mia pagina HTML per la visualizzazione vedrei una scrittura mutevole a seconda dei cambiamenti dinamici del programma. I dati sono sempre soggetti a cambiamenti e con la programmazione reattiva questo dinamismo viene gestito e controllato delegando il nostro MODELLO al come fare per risolvere il problema grazie al criterio della programmazione reattiva, senza inutili spargimenti di sangue per sfornare righe e righe di codice su dipendenze ed entità che inevitabilmente nel ciclo di vita di un algoritmo complesso cambiano in maniera repentina. Vue utilizza il VIRTUAL DOM per velocizzare il rendering. Come sappiamo da JS6 il DOM Document Object Model gestisce gli elementi di una pagina web e al cambiamento di stato di questi singoli nodi ad albero ne consegue una risonanza in termini di modifica da affettuare sulla pagina. Ma VUE fa tutto questo utilizzando un suo personalissimo DOM definito appunto ome VIRTUAL DOM che si prende in carico di tutte le trasmutazioni della pagina per poi decidere al momento opportuno come e quando restituire le modifiche avvenute, senza sovraccaricare il carico delle pagine da ricaricare che come abbiamo già sottolineato non vengono rimaterializzate a video singolarmente interrogando singolarmente il server pagina per pagina. Grazie a questa astrazione del Virtual DOM Vue è in grado di gestire i cambiamenti dei nodi senza drammi shakespeariani e tutte le risonanze a livello di modifica avverranno al momento più opportuno deciso dall’ automazione del framework, ottenendo alla fine una maggiore velocità di esecuzione a vantaggio dell’ utente che interroga i dati e che spesso nella sua interazione li modifica. A questo punto possiamo alla pratica. Creo un file html e allo stesso livello un file con estensione js che chiamerò ad esempio messaggio.js. Dentro il file con estensione js inserito nel file html come esterno nella directory corrente scriverò:

const vm = new Vue({
el: ‘#app’,
data: {
message: ‘ciao io sono il primo script vue!’
}
});

analizziamo questo rudimentale script: dichiaro una costante vm che avrà un valore che è uguale a un oggetto Vue istanziato che conterrà al suo interno l’elenco delle proprietà come l’elemento di riferimento dove andare a intervenire (el) e i dati che si vogliono valorizzare a video (data) con il messaggio finale. Per capire l’importanza della programmazione dinamica reattiva da console in background potremmo fare l’esperimento di andare a modificare il valore del messaggio iniziale che qui è ciao io sono il primo script vue! in un semplice ciao per vedere l’effetto che fa, quindi semplicemente:

vm.$data.message=”ciao”

improvvisamente ci accorgeremo che a video la vecchia frase è scomparsa per lasciare spazio all’ ultimo valore inserito. Da sottolineare inoltre che in questo caso la costante vm l’abbiamo inserita nello script proprio per far capire questa reattività ma di fatto lo script funzionerebbe anche partendo da una semplice istanza da richiamare con new Vue ({ etc etc senza mettere il const vm = iniziale.

Riassumendo il nostro HTML se volessimo integrare un JS interno anzichè esterno si presenterebbe come codice così:

<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src=”https://unpkg.com/vue></script>
</head>
<body>
<div id=”app>
{{ message }}
</div>
<script>
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
</script>
</body>

</html>

Dopo questa veloce introduzione nella prossima scorribanda affronteremo la GESTIONE DELLO STATO IN VUE.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...