La oss sette scenen.

Du har bygd nettsteder i noen år nå. Du startet igjen før React ble en stor avtale, og jQuery var fortsatt populær.

Og faktisk er det akkurat hva verktøysettet ditt var. Som designer var du en gang på forkant av tech fordi du visste HTML, CSS og nok jQuery å bruke noen logikk på sidene dine.

Spol fremover noen år til nå, og du føler deg litt igjen.

"Webdesigner" blir langsomt en lastet setning, som "programmerer". Det mulige verktøysettet for en webdesigner i dag er langt bredere enn en person kan mestre.

Hva er endret?

De største områdene av endring har sikkert ikke vært i HTML. Det du visste for fem år siden er fortsatt stort sett aktuelt i dag.

CSS har endret seg, men ikke på en uhåndterlig rask måte. Noen nye spesifikasjon vedtak har skjedd, og noen nye verktøy som CSS Grid har oppstått, men ingenting endrer seg så mye og så fort at du ikke kan komme opp til fart ganske raskt.

JavaScript, derimot, er helt annerledes nå enn det var for ti år siden, og vesentlig annerledes enn det var for fem år siden.

Merk at for ti år siden, hadde NodeJS ikke engang blitt utgitt. "Back-end" og "JavaScript" ble ikke brukt til å beskrive den samme jobben. Når vi ser på Google Trends-grafen for NodeJS, begynte populariteten til Node å vokse rundt 2010, men så nylig som for to år siden, hadde den bare nådd halvparten av topprenten den hadde mottatt i 2017. Oversettelse: backend JavaScript er nylig populært.

Google Trends graph for NodeJS

I 2013 startet nye JavaScript-baserte rammer på scenen. React ble først introdusert i mars samme år, med målet om å gi en "lære en gang, skrive overalt" tilnærming til programvare på alle plattformer. VueJS ble introdusert mindre enn et år senere som et alternativt visningsrettet JavaScript-rammeverk. Begrepet JavaScript som et enkelt skriptspråk ble revet ut, og erstattet med et mye mer modent JavaScript-økosystem. Rundt samme tid var det ikke bare ny interesse og utvikling i JavaScript-rammer, men også i modning av språket selv. Med ES5 og nå det årlige ES2015-ES2017, legges nye funksjoner til JavaScript på årsbasis.

Det er ikke rart at hvis du er en webutvikler ved hjelp av et verktøy som du stort sett har vedtatt for fem år siden, føler du deg litt blindsided av denne siste utviklingen.

I denne serien av artikler skal jeg introdusere deg til Vue JS, en moderne komponent-orientert JavaScript-rammeverk. Ved slutten av de tre del-seriene, vil du vite hvordan du bruker Vue JS, men enda viktigere, vil du være på vei til flyt med moderne webdesign og front-end-utviklingsteknikker som driver verdens beste og mest brukte webplattformer og applikasjoner.

La oss komme i gang!

Det handler om Vue (Vis)

Vue JS opererer primært som et visningsorientert rammeverk. Dette burde få deg til å føle deg hjemme som designer! "Utsikten" er midtpunktet til alt som skjer i Vue (dermed navnet).

Med Vue er grensesnittet den ultimate representasjonen av brukerens samspill. Alle dataene, metodene, logikken og hendelsene er bare viktige hvis de har riktig innvirkning på selve visningen.

Vue lar deg definere en enkelt gjengivelse ganske enkelt. La oss se på en Vue-forekomst som gjør en streng til nettleseren. Vi laster inn Vue (som denne CDN-vertversjonen, for eksempel: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), så legger vi til JavaScript:

la vm = ny Vue (el: "# min-app", data: firstName: "Jonathan", lastName: "Cutrell",)

Og noen oppslag:

 
Hei, firstName lastName!
 

Slik ser det ut:

Dette enkle eksempelet viser noen viktige konsepter.

1. En Vue-forekomst kan brukes til å enkelt gjengi innholdet i et gitt element. De Vue Konstruktøren tar noen alternativer. En av disse alternativene er el alternativ, kort for "element". Dette er en väljare som peker på et element i HTML - i dette tilfellet, div med klassen my-app.
2. Data sendes direkte til visningen Vue lar deg enkelt overføre data fra data alternativ til visningen ved hjelp av DataKey syntaks. I dette tilfellet er den gjengitte strengen inne i h1 merket er "Hei, Jonathan Cutrell".
3. Ingen manuell gjengivelse er nødvendig. Hvis din Vue-forekomst er konstruert og en el er passert, vil Vue automatisk gjengi det elementet uten ytterligere kode. Senere ser vi hvordan denne renderingens livssyklushåndtering gjør at søknaden din er mye mindre sannsynlig å være buggy.

For forholdet til sammenligning

La oss se på hvordan vi kan oppnå det samme med rent jQuery.

la alternativer = firstName: "Jonathan", etternavn: "Cutrell" la $ app = $ ("# min-app"); $ App.find ( "js-første-navnet.") Html (options.firstName.); $ App.find ( "js-siste-navnet.") Html (options.lastName.);

 
Hallo, 
 

Ved første øyekast ser dette kanskje ikke så mye annerledes ut enn det første eksemplet. Og for enkle saker som dette, kan det sikkert være sant.

Vue pakker imidlertid et slag som er skjult bak kulissene. For eksempel, hva om du vil endre navnet på siden?

la vm = ny Vue (el: "# min-app", data: firstName: "Jonathan", lastName: "Cutrell", montert: funksjon () setInterval (() => this.firstName = dette .firstName.split (""). revers (). bli med ("");, 1000);)

I vårt strengscenario er det selvfølgelig ikke en realistisk forandring, men hvert 1s intervall skal oppdatere fornavnet til å være en reversert versjon av seg selv. Ingen annen DOM-manipulering eller gjengivelse er nødvendig.

Nå, for å oppnå det samme med bare jQuery?

la alternativer = firstName: "Jonathan", etternavn: "Cutrell" la $ app = $ ("# min-app"); $ App.find ( "js-første-navnet.") Html (options.firstName.); $ App.find ( "js-siste-navnet.") Html (options.lastName.); setInterval (funksjon (let firstName = $ app.find (". js-fornavn"). html (); la newFirstName = firstName.split (""). $ app.find (". js-fornavn"). html (newFirstName);, 1000)

Igjen er virkningen på det totale antall kodelinjer relativt lavt for dette eksempelet. Den konseptuelle forskjellen er imidlertid signifikant. Vi snakker om det i neste avsnitt.

Hvor er dine data?

Et av problemene som den gjennomsnittlige webdesigneren har blitt byttet til når du bruker jQuery eller et lignende bibliotek for å utvikle applikasjoner, er mangel på adskillelse av bekymringer. Jeg er sikker på at du har hørt denne setningen før, men la oss gjøre det mer konkret med navnet vårt gjengivelse eksempel.

På et hvilket som helst tidspunkt i løpet av livssyklusen til søknaden din, hvor er den riktige "versjonen" av fornavn lagret?

Med Vue-versjonen lagres informasjonen alltid i data gjenstand. Hvis du oppdaterer det der, vil det oppdatere overalt annet korrekt. Dataene er inneholdt og klarte på et enkelt sted.

I jQuery-versjonen lagres dataene faktisk i dom. Det er ingen representasjon av dataene i JavaScript som er oppdatert og deretter reflektert. For eksempel vil du legge merke til at vi har satt opp en opsjoner gjenstand. Dette objektet er satt statisk en gang. Men når vi oppdaterer navnet i setInterval ring, det alternativet til objektet er nå ikke lenger gyldig! Dette kan være et problem. Videre kan alternativobjektet oppdateres til enhver tid, eller slettes helt, og det vil ikke bli påvirket visningen (så lenge den opprinnelige gjengivelsen allerede har skjedd).

Hvorfor er dette et problem?

Igjen, med applikasjoner av dette nivået av enkelhet, kan det være vanskelig å se hvorfor dette betyr noe. Men ettersom søknaden din vokser i kompleksitet, selv om det bare er litt, kan lagring av data i DOM bli svært sprø og kjedelig.

Bridging the Gap: Homespun "State Management"

"Så hvorfor skiller jeg ikke bare mine bekymringer uten å bruke Vue?"

Dette er et naturlig spørsmål å spørre. Hvordan kan vi skille våre bekymringer uten Vue da?

la alternativer = firstName: "Jonathan", etternavn: "Cutrell" funksjon setOption (k, v) options [k] = v; render ();  funksjon gjengivelse () la $ app = $ ("# min-app"); $ App.find ( "js-første-navnet.") Html (options.firstName.); $ App.find ( "js-siste-navnet.") Html (options.lastName.);  setInterval (funksjon (let firstName = options.firstName; la newFirstName = firstName.split (""). revers (""). bli med (""); setOption ("firstName", newFirstName);, 1000) ();

Aha! Så nå har vi opprettet vår egen rendering maskin som gjør det mulig å skille mellom bekymringer. Vi har våre valgobjekter, og så lenge vi bruker vår setOption () funksjon, vil vi gjelde når opsjonen er oppdatert. Så datakilden er nå skilt fra visningen. Seier!

Dette er faktisk et enkelt skritt mot noen av de mønstrene som Vue bruker under hetten. Vue har imidlertid mye mer funksjonalitet og kraft enn vi har presentert i denne svært enkle brukssaken.

For eksempel, hva om vi setter fornavn Til det samme er det allerede satt til? Vi trenger ikke å rendedere det hele, gjør vi? Men vår programkode vet ikke hvordan man skal skille det scenariet. Dette er noe Vue gjør for deg, under hetten.

Kommer opp

Det har vært mye å ta inn for en første titt, så lene deg tilbake og suge den opp! I del 2 av denne opplæringsserien får vi Vue oppe og kjører mens du svarer på noen av dine første spørsmål.

Lær Vue.js

Lær Vue.js med vår komplette Vue.js opplæringsguide, enten du er en erfaren koder eller en webdesigner som ønsker å hente nye utviklingsmetoder.