Cos’è Vue.js? Panoramica di un principiante

Vue è un moderno framework front-end che può aiutare chiunque a creare un sito Web o un'app Web. È leggero, flessibile e facile da utilizzare. Ma è anche un framework completo e ricco che può crescere per soddisfare le esigenze del più avanzato costruttore di app web.

Diamo un'occhiata a Vue.js e cosa devi sapere per iniziare a usarlo.

Vue è il framework più versatile attualmente disponibile per JavaScript. È anche il più facile da capire per programmatori e non programmatori.

Vue è facile da imparare per le persone che non conoscono lo sviluppo di siti web. Quasi tutti coloro che hanno lavorato con l'HTML hanno incontrato un muro in cui vogliono fare qualcosa che l'HTML non può.

Ad esempio, cosa succede se si desidera aggiungere un interruttore per cambiare il tema del sito Web dalla modalità chiara a quella scura? Che ne dici di aggiungere un semplice menu nascosto dietro un pulsante di hamburger? È allora che potresti aver bisogno di imparare un po 'di Javascript .

Queste sono attività abbastanza facili da eseguire in JavaScript. Puoi aggiungere uno snippet di JavaScript a un tag script e tutto è pronto. Ecco come appare l'inserimento di testo con JavaScript vanilla:

Il modo in cui JavaScript fa riferimento agli elementi della pagina può creare confusione per i principianti. Aggiungere JavaScript con Vue è facile come aggiungere JavaScript vanilla. Ma con Vue, ottieni più funzionalità e accesso alle moderne tecniche JavaScript. Ecco come inserisci il testo con Vue:

Analizziamo un po 'questi esempi. In JavaScript, il codice doveva cercare l'elemento, sceglierne un aspetto e modificarlo. In Vue, abbiamo detto all'HTML dove aspettarsi il testo variabile. Quindi abbiamo creato un oggetto JavaScript, lo abbiamo assegnato all'elemento e impostato il testo della variabile.

Questo semplice esempio illustra un punto importante. È meglio mantenere il codice separato dal tuo HTML. Nell'esempio di Vue, Vue non manipola direttamente l'HTML. Gestisce solo la propria attività. E ha dato all'HTML più funzionalità senza aggiungere codice.

Se hai familiarità con altri framework, potresti essere consapevole del fatto che di solito hanno bisogno di te per creare un'app da zero utilizzando la loro tecnologia. Ciò di solito comporta la creazione di un'app dalla riga di comando e l'avvio di un server. Ma nell'esempio precedente, abbiamo aggiunto Vue a un sito Web statico senza tutta quella complessità.

Vue è un framework, però. Nella sua pagina di introduzione, dice: "A differenza di altri framework monolitici, Vue è progettato da zero per essere adottabile in modo incrementale". Ciò significa che puoi utilizzare la potenza di Vue che desideri nelle tue app.

Puoi utilizzare Vue per gestire una presentazione di immagini oppure puoi creare un'app completa a pagina singola con tutti i campanelli e fischietti. Ciò include test, routing, gestione dello stato, sicurezza e molto altro.

Grazie alla sua potenza e versatilità, Vue attira un vasto pubblico.

JavaScript è un ecosistema in rapida evoluzione con un sacco di abbandoni. È possibile dedicarsi a una raccolta di strumenti e vederli diventare obsoleti due anni dopo. JavaScript aggiunge anche complessità ai siti web da solo. Installare un framework e un'enorme pila traballante di pacchetti Node non fa che peggiorare le cose.

Alcune persone preferiscono attenersi alle basi per questo motivo. HTML funziona bene, CSS ha le sue stranezze e JavaScript è un po 'funky. Ma sono tutti solidi come una roccia! Continuano a cambiare ed evolversi, ma lentamente e costantemente. Molti framework finiscono per aggiungere modifiche che interromperanno il codice.

Tuttavia, ci sono alcuni script, come jQuery e Handlebars, che ti semplificano la vita come programmatore front-end. jQuery inizia alla grande, ma si trasforma in spaghetti quando la tua base di codice diventa troppo complessa. Anche il manubrio è bello, ma non fa molto per rendere JS più facile da usare.

Vue può sostituire entrambi questi strumenti e risolvere i loro problemi. E lo fa senza assumere completamente il controllo del tuo sito web. Introduce pratiche JavaScript moderne senza i moderni mal di testa JavaScript.

Vue è un framework leggero con le funzionalità di framework molto più pesanti. Se hai esperienza con lo sviluppo web front-end, puoi imparare a usare Vue in pochi giorni. Se non lo fai, puoi iniziare solo con quanto ti serve.

Uno dei motivi principali per utilizzare un framework è che gli strumenti che ti danno per rendere lo sviluppo più veloce e più facile. Ad esempio, un'app Web progressiva si basa su navigazione programmatica, layout personalizzato e struttura che cambia al volo. I framework front-end rendono questa sfida quasi banale. E Vue non fa eccezione.

Ora puoi completare progetti che prima richiedevano mesi in settimane, grazie a framework moderni. E poiché Vue è così leggero e facile da lavorare, puoi completare i prototipi in ore o giorni.

Gli sviluppatori si aspettano alcuni vantaggi dai moderni framework front-end. La sostituzione delle stringhe per HTML, l'architettura basata sui componenti e gli strumenti sono buoni esempi. Vue ha tutti questi vantaggi, così come quelli menzionati nella sezione framework sopra.

Gli sviluppatori di app Web spesso desiderano rendere i loro prodotti disponibili come app per dispositivi mobili. Tradizionalmente, lo facevano assumendo sviluppatori extra per creare per iOS e Android. Quindi avrebbero dovuto trovare un modo per coordinarsi tra le tre piattaforme. Ma oggi ci sono altre opzioni.

Un'opzione è utilizzare NativeScript per creare app mobili, che consente agli sviluppatori di creare per Android e iOS con lo stesso codice JavaScript. Gli sviluppatori Nativescript possono persino portare il loro codice web su dispositivi mobili senza dover assumere nuovi sviluppatori. E ha un grande supporto per Vue.

Vue, Angular e React sono i tre framework più popolari secondo il sondaggio State of JS del 2019 . Ecco alcuni punti da considerare su di loro:

  • Angular è stato il primo framework web front-end di grande nome. È pubblicato da Google ed è in circolazione dal 2010. Ha introdotto il mondo HTML dinamico tramite direttive e associazione dati a tre vie che rende il codice magicamente aggiornato sulla pagina senza un aggiornamento.
  • React è stato rilasciato per la prima volta nel 2013 da Facebook ed è un'alternativa più accessibile ad Angular. React è meglio conosciuto per l'utilizzo di JSX e dei componenti.
  • Vue è stato rilasciato nel 2014 da Evan You, un ex dipendente di Google. Vue non ha introdotto nulla di troppo innovativo. Ma ha introdotto un modo di lavorare molto migliore e più pulito.

Benefici dei tre grandi

  • Angular è una bestia di livello aziendale di un framework. È in circolazione da più tempo ed è costruito e gestito da Google.
  • React è stato il più ampiamente adottato dei tre grandi framework, secondo lo stato 2019 di JavaScript . È noto come facile da lavorare e flessibile.
  • Vue è soggettivamente il framework più semplice da apprendere e implementare. E rimane facile come è senza sacrificare un set di funzionalità ricco e potente.

Critiche a The Big Three

Angolare

Angular è stato notoriamente difficile da imparare in passato. La versione 1 (AngularJS) utilizzava un sacco di gergo informatico di livello universitario nella sua documentazione. La versione 2 (angolare) è stata però molto semplificata e ottimizzata.

  • Quando Google ha rilasciato Angular, ha mantenuto i concetti di livello superiore da AngularJS. Ma l'azienda ha cambiato i dettagli così tanto che molti sviluppatori lo trovavano ancora confuso.
  • Ci sono stati molti cambiamenti nei primi giorni di Angular, con modifiche rivoluzionarie in quasi tutte le versioni. Angular è migliore ora, ma è ancora molto formale, rigido e difficile da imparare per alcuni sviluppatori.

Reagire

Uno degli aspetti migliori e tuttavia più impegnativi di React è JSX. Condensa HTML, CSS e JS in un'unica lingua. Questo rende tutto più semplice per gli sviluppatori, ma più difficile per i designer.

  • JSX rende anche più difficile lavorare con le librerie esistenti. Inoltre, è considerato un anti-pattern mettere design, layout e codice nello stesso posto. In questo modo si può creare codice disordinato e illeggibile.
  • React gestisce questo con garbo utilizzando componenti per separare il codice. Ma spetta ai singoli sviluppatori utilizzare correttamente i componenti.
  • React è tecnicamente un framework. Ma manca di alcune funzionalità importanti come la navigazione e la gestione dello stato a livello di app.

Vue

Vue risolve tutti i problemi menzionati sugli altri due grandi. A differenza di Angular, è facile da imparare. E a differenza di JSX, i componenti Vue separano HTML, CSS e JS.

  • È molto più facile per i designer lavorare in un componente Vue. E mantenere tutto pulito non dipende interamente dallo sviluppatore.
  • Le maggiori sfide che Vue deve affrontare sono l'adozione relativamente bassa e la mancanza di "app killer". Molte aziende usano Vue, ma probabilmente nessuna di loro ha il riconoscimento del marchio.

Vue è un'altra moda?

Anche se Vue esiste da diversi anni, è ancora il nuovo ragazzo sul blocco. Inoltre non ha il sostegno aziendale degli altri due. E come già accennato, non ci sono app killer che mostrano cosa può fare.

Ciò che manca a Vue nel supporto a livello aziendale, lo compensa con passione e supporto di base. Evan You gestisce una campagna Patreon per sostenere se stesso e un altro sviluppatore. In un certo senso, Vue è gestito democraticamente. Finché c'è abbastanza interesse per Vue che le aziende sono disposte a sostenerlo, Vue rimarrà nei paraggi.

Le parti migliori di Vue

Vue offre le parti migliori degli altri framework front-end, oltre a molte altre funzionalità esclusive di Vue. Ecco solo un elenco parziale:

  • Vue utilizza un'architettura basata sui componenti per la struttura e la riutilizzabilità.
  • Mantiene HTML, CSS e JS separati nei suoi componenti.
  • Vue avrà un aspetto familiare e familiare sia agli sviluppatori che ai designer.
  • Offre una GUI completa per servire, costruire e creare progetti.
  • Vue utilizza il ricaricamento a caldo quando viene eseguito come app. Il ricaricamento a caldo aggiorna solo ciò che è cambiato in una pagina senza un aggiornamento.

Vue è un progetto di proprietà privata senza spese generali e politiche aziendali. Ciò potrebbe renderlo meno desiderabile per le iniziative aziendali. Ma è facile da imparare e divertente con cui giocare, rendendolo perfetto per le startup spigolose.

Forse la caratteristica migliore è che è progettato dal pragmatismo, non da un comitato, che è tutto ciò che riguarda il software open source .