Imposta la scena.

Hai costruito siti web per alcuni anni. Hai iniziato prima che React diventasse un grosso problema e jQuery era ancora popolare.

E, in effetti, questo è esattamente ciò che era il tuo set di strumenti. Come designer, una volta sei stato all'avanguardia della tecnologia perché conoscevi HTML, CSS e abbastanza jQuery per applicare un po 'di logica alle tue pagine.

Avanzate di alcuni anni, e vi sentite un po 'indietro.

"Web designer" sta lentamente diventando una frase carica, come "programmatore". Il set di strumenti possibile per un web designer oggi è molto più ampio di quanto una persona possa padroneggiare.

Cosa è cambiato?

Le maggiori aree di cambiamento non sono state certamente in HTML. Ciò che conoscevi cinque anni fa è ancora ampiamente applicabile oggi.

I CSS sono cambiati, ma non in modo incredibilmente veloce. Si è verificata qualche nuova adozione delle specifiche e sono emersi alcuni nuovi strumenti come la Griglia CSS, ma nulla sta cambiando così tanto e così velocemente che non è possibile arrivare alla velocità abbastanza rapidamente.

JavaScript, d'altra parte, è completamente diverso rispetto a dieci anni fa e significativamente diverso rispetto a cinque anni fa.

Nota che dieci anni fa, NodeJS non era nemmeno stato rilasciato. "Back-end" e "JavaScript" non sono stati usati per descrivere lo stesso lavoro. Guardando il grafico di Google Trends per NodeJS, la popolarità di Node ha iniziato a crescere intorno al 2010, ma fino a due anni fa aveva raggiunto solo la metà del livello di picco di interesse che ha ricevuto nel 2017. Traduzione: backend JavaScript è di nuovo popolare.

Grafico di Google Trends per NodeJS

Nel 2013, i nuovi framework basati su JavaScript hanno iniziato a comparire sulla scena. React è stato introdotto per la prima volta nel marzo dello stesso anno, con l'obiettivo di fornire un approccio "learn once, write everywhere" al software su ogni piattaforma. VueJS è stato introdotto meno di un anno dopo come framework JavaScript orientato alla vista alternativo. Il concetto di JavaScript come semplice linguaggio di scripting era stato rimosso e sostituito con un ecosistema JavaScript molto più maturo. Intorno allo stesso tempo, non solo c'era un nuovo interesse e sviluppo nei framework JavaScript, ma anche nel maturare il linguaggio stesso. Con ES5 e ora ES2015-ES2017 orientato all'anno, nuove funzionalità vengono aggiunte a JavaScript su base annuale.

Non c'è da meravigliarsi che se sei uno sviluppatore web che utilizza un set di strumenti che hai adottato in gran parte cinque anni fa, ti senti un po 'accecato da questo recente sviluppo.

In questa serie di articoli, ho intenzione di presentarvi Vue JS, un moderno framework JavaScript orientato ai componenti. Alla fine delle tre serie di parti, saprai come usare Vue JS, ma soprattutto, sarai sulla strada giusta per conoscere il web design moderno e le tecniche di sviluppo front-end che alimentano le migliori e più utilizzate piattaforme web al mondo e applicazioni.

Iniziamo!

It's All About the Vue (Visualizza)

Vue JS opera principalmente come framework orientato alla vista. Questo dovrebbe farti sentire a casa come designer! La "vista" è il fulcro di tutto ciò che accade in Vue (da cui il nome).

Con Vue, l'interfaccia è la rappresentazione definitiva dell'interazione dell'utente. Tutti i dati, i metodi, la logica e gli eventi sono importanti solo se influenzano correttamente la vista stessa.

Vue ti consente di definire una singola visualizzazione di rendering abbastanza facilmente. Diamo un'occhiata a un'istanza Vue che esegue il rendering di una stringa nel browser. Carichiamo Vue (come le versioni ospitate da CDN, ad esempio: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), quindi aggiungiamo il nostro JavaScript:

let vm = new Vue (el: "# my-app", data: firstName: "Jonathan", lastName: "Cutrell",)

E alcuni markup:

 
Ciao, firstName lastName!
 

Ecco come appare:

Questo semplice esempio mostra alcuni concetti importanti.

1. Un'istanza Vue può essere usata per rendere semplicemente il contenuto di un dato elemento. Il Vue costruttore prende alcune opzioni. Una di queste opzioni è la EL opzione, abbreviazione di "elemento". Questo è un selettore che punta a un elemento nel tuo HTML - in questo caso, il div con la classe my-app.
2. I dati vengono passati direttamente alla vista; Vue ti permette facilmente di passare i dati dal dati opzione per la vista usando il  DataKey sintassi. In questo caso, la stringa renderizzata all'interno di h1 il tag è "Ciao, Jonathan Cutrell".
3. Non è necessaria alcuna chiamata di rendering manuale. Se la tua istanza Vue è costruita e un EL viene passato, Vue eseguirà automaticamente il rendering su quell'elemento senza ulteriori codici. Più avanti, vedremo come questa gestione del ciclo di vita del rendering rende la tua applicazione molto meno probabile che sia bacata.

Per il gusto del confronto

Diamo un'occhiata a come potremmo ottenere la stessa cosa con jQuery puro.

let options = firstName: "Jonathan", lastName: "Cutrell" lascia $ app = $ ("# my-app"); $ App.find ( "JS-prima-name"). Html (options.firstName).; $ App.find ( "JS-Cognome"). Html (options.lastName).;

 
Ciao, 
 

A prima vista, questo potrebbe non sembrare molto diverso dal primo esempio. E, per casi semplici come questo, quello potrebbe certamente essere vero.

Tuttavia, Vue racchiude un pugno nascosto dietro le quinte. Ad esempio, cosa succede se si desidera modificare il nome sulla pagina?

let vm = new Vue (el: "# my-app", data: firstName: "Jonathan", lastName: "Cutrell", mounted: function () setInterval (() => this.firstName = this .firstName.split (""). reverse (). join ("");, 1000);)

Nel nostro scenario di stringa, ovviamente, questo non è un cambiamento realistico, ma ogni intervallo di 1 sta per aggiornare il nome in modo che sia una versione invertita di se stesso. Non sono necessarie altre manipolazioni o rendering DOM.

Ora, per realizzare la stessa cosa con solo jQuery?

let options = firstName: "Jonathan", lastName: "Cutrell" lascia $ app = $ ("# my-app"); $ App.find ( "JS-prima-name"). Html (options.firstName).; $ App.find ( "JS-Cognome"). Html (options.lastName).; setInterval (function (let firstName = $ app.find (". js-first-name"). html (); let newFirstName = firstName.split (""). reverse (""). join (""); $ app.find (". js-first-name"). html (newFirstName);, 1000)

Ancora una volta, l'impatto sul numero complessivo di righe di codice è relativamente basso per questo esempio. Tuttavia, la differenza concettuale è significativa. Ne parleremo nella prossima sezione.

Dove sono i tuoi dati?

Uno dei problemi a cui il web designer medio è caduto preda quando si usa jQuery o una libreria simile per sviluppare applicazioni è la mancanza di separazione delle preoccupazioni. Sono sicuro che hai già sentito questa frase, ma rendiamola più concreta con il nostro esempio di rendering del nome.

In qualsiasi momento durante il ciclo di vita della tua applicazione, dov'è la "versione" corretta di nome di battesimo immagazzinato?

Con la versione Vue, le informazioni sono sempre memorizzate nel dati oggetto. Se lo aggiorni lì, si aggiornerà ovunque correttamente. I dati sono contenuti e gestito in un'unica posizione.

Nella versione jQuery, i dati vengono effettivamente memorizzati nella dom. Non c'è alcuna rappresentazione dei dati nel JavaScript che viene aggiornata e successivamente riflessa. Ad esempio, noterai che abbiamo creato un opzioni oggetto. Questo oggetto è impostato staticamente una volta. Tuttavia, quando aggiorniamo il nome nel file setInterval chiama, l'oggetto di quell'opzione non è più valido! Questo può essere un problema. Inoltre, l'oggetto options può essere aggiornato in qualsiasi momento, o cancellato interamente, e nessun impatto verrà apportato alla vista (finché il rendering iniziale è già avvenuto).

Perché questo è un problema?

Ancora una volta, con le applicazioni di questo livello di semplicità, potrebbe essere difficile capire perché questo è importante. Ma poiché la tua applicazione cresce in complessità, anche solo leggermente, la memorizzazione dei dati nel DOM può diventare estremamente fragile e noiosa.

Bridging the Gap: Homespun "State Management"

"Allora perché non separo le mie preoccupazioni senza usare Vue?"

Questa è una domanda naturale da porre. Come potremmo separare le nostre preoccupazioni senza Vue allora?

let options = firstName: "Jonathan", lastName: "Cutrell" function setOption (k, v) options [k] = v; render ();  function render () let $ app = $ ("# my-app"); $ App.find ( "JS-prima-name"). Html (options.firstName).; $ App.find ( "JS-Cognome"). Html (options.lastName).;  setInterval (function (let firstName = options.firstName; let newFirstName = firstName.split (""). reverse (""). join (""); setOption ("firstName", newFirstName);, 1000) render ();

Aha! Così ora abbiamo creato la nostra macchina di rendering che consente la separazione delle preoccupazioni. Abbiamo le nostre opzioni oggetto, e finché usiamo il nostro setOption () funzione, verrà eseguito il rerender in qualsiasi momento l'opzione viene aggiornata. Quindi l'origine dati è ora separata dalla vista. Vittoria!

Questo è in realtà un semplice passo verso alcuni dei modelli che Vue utilizza sotto il cofano. Tuttavia, Vue ha molte più funzionalità e potenza di quelle che abbiamo presentato in questo caso d'uso molto semplice.

Ad esempio, cosa succede se impostiamo il nome di battesimo alla stessa cosa è già impostato? Non abbiamo bisogno di riorganizzare l'intera faccenda, vero? Ma il nostro codice applicativo non sa come differenziare questo scenario. Questo è qualcosa che Vue fa per te, sotto il cofano.

In arrivo

C'è stato molto da vedere per la prima volta, quindi siediti e immergiti! Nella seconda parte di questa serie di tutorial avremo Vue attivo e funzionante mentre rispondiamo ad alcune delle tue domande iniziali.

Scopri Vue.js

Scopri Vue.js con la nostra guida completa a Vue.js, che tu sia un programmatore esperto o un web designer che cerca nuove tecniche di sviluppo front-end.