Låt oss ställa in scenen.

Du har byggt webbplatser för några år nu. Du började tillbaka innan React blev en stor sak, och jQuery var fortfarande populär.

Och i själva verket är det precis vad din verktygssats var. Som designer var du en gång på framsidan av tech eftersom du visste HTML, CSS och tillräckligt med jQuery att tillämpa lite logik på dina sidor.

Snabba fram några år fram till nu, och du känner dig lite kvar.

"Webdesigner" blir långsamt en laddad fras, som "programmerare". Den möjliga verktygssatsen för en webbdesigner idag är mycket bredare än en person kan behärska.

Vad har ändrats?

De största förändringsområdena har verkligen inte varit i HTML. Vad du visste för fem år sedan är fortfarande till stor del tillämplig idag.

CSS har förändrats, men inte på ett omanagbart snabbt sätt. Något nytt antagande av specifikationer har inträffat, och några nya verktyg som CSS Grid har uppstått, men inget förändras så mycket och så fort att du inte kan få fart på snabbare snabbt.

JavaScript, å andra sidan, är helt annorlunda nu än det var för tio år sedan, och betydligt annorlunda än för fem år sedan.

Observera att för tio år sedan hade NodeJS inte ens släppts. "Back-end" och "JavaScript" användes inte för att beskriva samma jobb. Om du tittar på Google Trends-grafen för NodeJS började NodeJs popularitet växa runt 2010, men senast för två år sedan hade den bara nått halva nivån på toppränta som den fått 2017. Översättning: backend JavaScript är nyligen populärt.

Google Trends graf för NodeJS

År 2013 började nya JavaScript-baserade ramar visas på scenen. Reakt introducerades först i mars det året, med målet att tillhandahålla en "lära en gång, skriva överallt" -strategi på alla plattformar. VueJS introducerades mindre än ett år senare som ett alternativt visningsorienterat JavaScript-ramverk. Begreppet JavaScript som ett enkelt skriptspråk blev rippat ut och ersatt med ett mycket mer moget JavaScript-ekosystem. Ungefär samma gång var det inte bara nytt intresse och utveckling i JavaScript-ramar, utan också för att modda själva språket. Med ES5 och nu det årliga ES2015-ES2017, läggs nya funktioner till JavaScript på årsbasis.

Det är inte konstigt att om du är en webbutvecklare med hjälp av en verktygssats som du antog för en stor del för fem år sedan, känner du dig lite blindsided av den här senaste utvecklingen.

I denna serie av artiklar ska jag presentera dig för Vue JS, en modern komponentorienterad JavaScript-ram. I slutet av de tre delserierna kommer du att veta hur man använder Vue JS, men ännu viktigare kommer du att vara på vägen mot flyt med modern webbdesign och avancerad utvecklingsteknik som driver världens bästa och mest använda webbplattformar och applikationer.

Låt oss börja!

Det handlar om Vue (Visa)

Vue JS fungerar huvudsakligen som en synvinkad ram. Detta borde få dig att känna sig hemma som designer! "Utsikten" är mittpunkten för allt som händer i Vue (därav namnet).

Med Vue är gränssnittet den ultimata representationen av användarens interaktion. Alla data, metoder, logik och händelser är bara viktiga om de på ett korrekt sätt påverkar själva visningen.

Vue låter dig enkelt definiera en enkel rendering. Låt oss titta på en Vue-instans som gör en sträng till webbläsaren. Vi laddar Vue (som den här CDN-värdversionen, till exempel: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), lägger vi till vår JavaScript:

låt vm = ny Vue (el: "# my-app", data: firstName: "Jonathan", efternamn: "Cutrell",)

Och lite markup:

 
Hej, firstName lastName!
 

Så här ser det ut:

Detta enkla exempel visar några viktiga begrepp.

1. En Vue-instans kan användas för att helt enkelt göra innehållet i ett visst element. De Vue konstruktören tar några alternativ. En av dessa alternativ är el alternativ, kort för "element". Det här är en väljare som pekar på ett element i din HTML - i det här fallet div med klassen my-app.
2. Data skickas direkt till utsikten; Vue låter dig enkelt skicka data från data alternativ till vyn med hjälp av Datakey syntax. I det här fallet är den gjorda strängen inuti h1 taggen är "Hej, Jonathan Cutrell".
3. Inget manuellt återkommande samtal behövs. Om din Vue-förekomst är konstruerad och en el är passerat, kommer Vue automatiskt att göra till det elementet utan någon ytterligare kod. Senare ser vi hur denna hantering av livscykelhantering gör din ansökan mycket mindre sannolikt att vara buggy.

För jämförelse

Låt oss se hur vi kan utföra samma sak med ren jQuery.

låt alternativ = firstName: "Jonathan", efternamn: "Cutrell" låt $ app = $ ("# my-app"); $ App.find ( "js-förnamn.") Html (options.firstName). $ App.find ( "js-sist-namn".) Html (options.lastName).

 
Hej, 
 

Vid första anblicken ser detta inte mycket annorlunda ut än det första exemplet. Och för enkla fall som detta kan det säkert vara sant.

Vue packar dock en stans som är dold bakom kulisserna. Till exempel, om du vill ändra namnet på sidan?

låt vm = ny Vue (el: "# my-app", data: firstName: "Jonathan", efternamn: "Cutrell", monterat: funktion () setInterval (() => this.firstName = this .firstName.split (""). omvänd (). gå med ("");, 1000);)

I vårt strängscenario är det givetvis inte en realistisk förändring, men varje 1s intervall kommer att uppdatera förnamnet för att vara en omvänd version av sig själv. Ingen annan DOM-manipulation eller återgivning behövs.

Nu, för att uppnå samma sak med bara jQuery?

låt alternativ = firstName: "Jonathan", efternamn: "Cutrell" låt $ app = $ ("# my-app"); $ App.find ( "js-förnamn.") Html (options.firstName). $ App.find ( "js-sist-namn".) Html (options.lastName). setInterval (funktion (let firstName = $ app.find (". js-förnamn"). html (); låt newFirstName = firstName.split (""). omvänd (""). $ app.find (". js-förnamn"). html (newFirstName);, 1000)

Återigen är påverkan på det totala antalet kodrader relativt lågt för detta exempel. Den konceptuella skillnaden är emellertid signifikant. Vi pratar om det i nästa avsnitt.

Var är dina data?

Ett av de problem som den genomsnittliga webbdesignern har fallit byte till när du använder jQuery eller ett liknande bibliotek för att utveckla applikationer är brist på separation av problem. Jag är säker på att du har hört den här frasen förut, men låt oss göra det mer konkret med vårt namn som visar exempel.

Vid någon given punkt under din ansökans livscykel, var är den korrekta "versionen" av förnamn lagrat?

Med Vue-versionen lagras informationen alltid i data objekt. Om du uppdaterar det där kommer det att uppdateras överallt annars korrekt. Uppgifterna finns och hanteras på en enda plats.

I jQuery-versionen lagras dataen faktiskt i dom. Det finns ingen representation av data i JavaScript som uppdateras och sedan återspeglas. Du märker till exempel att vi har skapat en alternativ objekt. Detta objekt ställs in statiskt en gång. Men när vi uppdaterar namnet i setInterval Ring, det alternativet är nu inte längre giltigt! Detta kan vara ett problem. Dessutom kan alternativobjektet uppdateras när som helst eller helt raderas, och ingen påverkan kommer att göras på visningen (så länge som den ursprungliga rendering redan har uppstått).

Varför är detta ett problem?

Återigen, med tillämpningar av denna nivå av enkelhet kan det vara svårt att se varför det här är viktigt. Men eftersom din ansökan växer i komplexitet, även lite, kan lagring av data i DOM bli extremt spröd och tråkig.

Bridging the Gap: Homespun "State Management"

"Så varför skiljer jag inte bara mina bekymmer utan att använda Vue?"

Det här är en naturlig fråga att fråga. Hur kan vi separera våra bekymmer utan Vue då?

låt alternativ = firstName: "Jonathan", efternamn: "Cutrell" funktion setOption (k, v) options [k] = v; göra();  funktionen render () let $ app = $ ("# my-app"); $ App.find ( "js-förnamn.") Html (options.firstName). $ App.find ( "js-sist-namn".) Html (options.lastName).  setInterval (funktion (let firstName = options.firstName; låt newFirstName = firstName.split (""). omvänd (""). gå med (""); setOption ("firstName", newFirstName);, 1000) ();

A ha! Så nu har vi skapat vår egen reningsmaskin som möjliggör separation av problem. Vi har våra alternativ objekt, och så länge vi använder vår setoption () funktion, kommer vi att rerender när alternativet är uppdaterat. Så datakällan är nu separerad från vyn. Seger!

Detta är faktiskt ett enkelt steg mot några av de mönster som Vue använder under huven. Vue har dock mycket mer funktionalitet och kraft än vi har presenterat i det här enkla användningsfallet.

Till exempel, vad händer om vi ställer in förnamn till samma sak som den redan är inställd på? Vi behöver inte göra det hela, gör vi? Men vår programkod vet inte hur man skiljer det scenariot. Det här är något som Vue gör för dig, under huven.

Kommer upp

Det har varit mycket att ta in för en första look, så luta dig tillbaka och njut av det! I del två av denna tutorial-serien får vi Vue igång medan du svarar på några av dina första frågor.

Lär dig Vue.js

Lär dig Vue.js med vår kompletta Vue.js handledning, oavsett om du är en erfaren kodgivare eller webbdesigner som vill hämta nya utvecklingsmetoder.