Introduzione alla creazione di WebApp in Vue.js

Ci sono così tanti framework JavaScript in questi giorni, può essere difficile tenerne traccia di tutti, e certamente è improbabile che qualcuno li possa padroneggiare per intero. Ciò che significa per la maggior parte di noi è che dovremo essere selettivi su quali quadri di sviluppo investiremo tempo nell'apprendimento.

In questo articolo daremo un'occhiata a Vue.js, in modo che tu possa decidere da solo se è adatto al tipo di progetti su cui lavori e se ti sembra adatto a te.

Cos'è Vue.js?

Anche se convenzionalmente non è maiuscolo, "Vue" è in realtà un acronimo di Visual Understanding Environment. Il suo scopo principale è rendere più facile lo sviluppo di applicazioni Web riducendo la complessità del codice. Ha molto in comune con React.js, ma la versione corrente di Vue rende più veloce di React e sembra essere più efficiente.

Vue è difficile da imparare?

Se sei già un programmatore esperto, non dovresti avere molte difficoltà a iniziare Vue, ma non sarebbe corretto descriverlo come una lingua per principianti. È necessario avere una certa esperienza con HTML, CSS e JavaScript per creare qualcosa di pratico con esso.

La curva di apprendimento con Vue è un po 'meno ripida rispetto a React, ed è molto meno ripida rispetto ad Angular. Quindi, quello che può essere affermato con precisione è che Vue è relativamente facile da imparare rispetto ad altri framework di sviluppo popolari.

In che modo Vue aiuta a raggiungere gli obiettivi?

Varia un po 'a seconda di quale sia il tuo obiettivo in realtà, ma in generale, si legano i blocchi di codice ai div HTML. Questa metodologia semplifica l'introduzione di contenuti interattivi e dinamici rispetto ai normali HTML, CSS e JavaScript.

D'altra parte, non puoi davvero fare di più in Vue di quanto potresti usando i modi più convenzionali. Usare Vue è semplicemente una questione di rendere le cose più facili per te nella fase di sviluppo, ma non ha molto effetto sul risultato finale, a parte l'impatto minore sulle prestazioni dovuto al caricamento del codice framework.

Un altro vantaggio di Vue è che fornisce modularità, il che significa che è possibile riutilizzare i componenti sviluppati in più progetti.

Vue ha qualche asso nella manica?

Certamente, e il meglio di questi sono effetti di transizione incorporati, che ti permettono di prendere il controllo di quelle che altrimenti sarebbero strutture CSS e JavaScript che richiedono molto codice utilizzando solo una o due righe di codice. Ciò ti consente di risparmiare tempo e fatica durante la creazione delle tue applicazioni.

Un'altra caratteristica utile è il rendering nativo per tipi di dispositivi specifici come Android e iOS, in modo da poter mettere a punto le tue applicazioni per i dispositivi su cui sono in esecuzione senza molto lavoro extra.

Per iniziare

Come affermato in precedenza, Vue è facile da imparare, ma non è una lingua per principianti. Hai ancora bisogno di sapere come muoverti all'interno di un blocco di codice.

Il problema è che, come la maggior parte dei framework, la documentazione è molto pigra e principalmente dedicata a convincerti a usarla. Molta meno attenzione viene data nella documentazione per spiegare come tutto funziona o perché si fanno le cose in un certo modo. Praticamente ogni esempio di framework ufficiale mai creato lascia fuori informazioni vitali che devi cercare per ore per scoprire. Questo è un difetto condiviso dalla documentazione e dagli esempi di Vue.

Per semplificare la comprensione di ciò che devi veramente fare per ricreare questo progetto, questi sono i passaggi richiesti:

1. Aggiungi uno script che faccia riferimento a vue.js

Per ottimizzare la velocità, è meglio includere questo dopo tutto il contenuto della pagina, ma subito prima del tag body di chiusura nel codice sorgente HTML. Potresti anche caricare altre risorse di pagina in questa sezione e l'ordine di priorità di caricamento determina l'ordine in cui inserire ciascuna risorsa.

Ecco un esempio di inclusione di vue.js da un CDN:

Ed ecco un esempio di includere vue.js da una directory sul tuo server:

Senza questo riferimento a vue.js, non può accadere nulla relativo a Vue.

2. Aggiungi i componenti Vue nel tuo corpo HTML

Questo è ciò che sta succedendo con questo codice:

Per ora non ha molto senso, ma la parte Vue è l'elemento "demo-grid" vuoto, più l'aggiunta di una "direttiva v" all'input della query (in questo caso è "v-model" ", Che viene utilizzato per vincolare il codice Vue per formare input).

3. Se il progetto richiede un modello di componente, aggiungilo al corpo HTML

Questa sezione di codice è insolita perché sembra un normale HTML all'interno di un tag script, che confonderà la maggior parte dei software di editing HTML (si noti che i colori degli indicatori sono errati in alcuni punti).

4. Aggiungi l'istanza Vue

Questa dovrebbe essere una delle ultime cose da visualizzare sulla pagina, perché sta eseguendo un'attività di rendering dinamico. Ciò fornisce alcuni vantaggi di ottimizzazione rispetto all'aggiunta in precedenza nella pagina.

  • La riga 46 specifica che il browser deve cercare un componente nella pagina chiamata "demo-grid" e la riga 47 specifica che "# grid-template" deve essere usato come modello per il componente (questo è il codice del template aggiunto al passaggio 3 dalla riga 9 alla linea 30).
  • Un blocco dalla riga 48 alla linea 52 definisce le proprietà del componente.
  • Le righe da 53 a 62 definiscono una funzione per l'ordinamento dei dati nella tabella.
  • Le righe da 63 a 85 definiscono una funzione per il filtraggio dei dati (dai risultati nella query di ricerca).
  • Le righe da 86 a 90 definiscono una funzione per capitalizzare le parole in un set di dati.
  • Le righe da 91 a 97 definiscono il metodo per l'ordinamento dei dati.

5. Aggiungi il codice di lancio prima del tag di script di chiusura

Se hai completato i passaggi da 1 a 4 e hai aperto il file nel browser, tutto ciò che vedresti è la casella di ricerca e niente più. Questo perché tutto ciò che è necessario per costruire la tabella è stato definito ma non creato. Quindi nel passo 5, aggiungiamo il codice che crea la tabella che è stata definita da tutti i passaggi precedenti.

  • La linea 100 crea un nuovo oggetto Vue.
  • La riga 101 specifica a quale elemento associare l'azione.
  • Le righe da 102 a 111 forniscono i dati dell'oggetto che saranno associati all'elemento.

Testing

Dopo aver definito e creato l'oggetto richiesto, sei pronto per testare il risultato. Preparati a essere deluso, perché questo è ciò che dovresti vedere nel browser:

Cosa sta succedendo? Perché è così noioso? È perché non è applicato alcuno stile. Se usiamo lo stile predefinito dall'esempio JSFiddle, la tabella sarà simile a questa:

Digitando qualcosa nella casella di ricerca (senza distinzione tra maiuscole e minuscole) verranno filtrati i risultati di conseguenza:

Cliccando sull'intestazione di una colonna ti permetterà di cambiare l'ordine di visualizzazione. Ad esempio, facendo clic sull'intestazione della colonna "Power" cambierà i risultati da visualizzare in ordine di livello di potenza.

Migliorare e adattare

Un altro problema con gli esempi di framework è che di solito non includono molte informazioni per aiutare qualcuno che non ha familiarità con il codebase a capire come applicare nel campo ciò che vedono nell'esempio. Vue fa un lavoro magnifico rispetto a Bootstrap (che è notoriamente poco informativo), ma lascia ancora molte domande senza risposta.

Ecco alcune modifiche che potremmo apportare a questa applicazione per modificare il suo aspetto e il suo funzionamento:

  • Modella la tabella come tabella con striping Bootstrap
  • Cambia il numero di colonne
  • Cambia i dati in qualcosa di completamente diverso

1. Aggiunta di Bootstrap

2. Racchiudere l'elemento in una tabella Bootstrap

3. Regolazione dell'elemento root per utilizzare il modello di layout Bootstrap

4. Restyling delle frecce

5. Modifica dei dati

6. analisi

  • Non filtrato e non ordinato

  • Ordinato per direttiva (crescente)

  • Ordinato da Usato per (crescente)

  • Filtrato per "condizionale"

  • Filtrato per "condizionale" e ordinato per direttiva (crescente)

Pensieri finali

Speriamo che ciò che è emerso da questi esempi sia che abbiamo creato due applicazioni con un aspetto e un contenuto molto diversi da una comune porzione di codice. Con Vue è molto facile riutilizzare il codice su più progetti e potenzialmente godere di notevoli risparmi di tempo.

immagine di cortesia per gentile concessione di Aleksandar Savic

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.