Laten we de scène bepalen.

U bouwt al een paar jaar websites. Je begon terug voordat React een big deal werd, en jQuery was nog steeds populair.

En dat is precies wat uw toolset was. Als ontwerper was je ooit een voorloper op het gebied van tech omdat je HTML, CSS en genoeg jQuery kende om wat logica toe te passen op je pagina's.

Voorlopig een paar jaar vooruit, en je voelt je een beetje achter.

'Webontwerper' wordt langzaam een ​​geladen uitdrukking, zoals 'programmeur'. De mogelijke toolset voor een webontwerper van vandaag is veel breder dan een persoon kan beheersen.

Wat is er veranderd?

De grootste veranderingen zijn zeker niet in HTML geweest. Wat je vijf jaar geleden wist, is nog steeds grotendeels van toepassing.

CSS is veranderd, maar niet op een onhanteerbaar snelle manier. Er is een nieuwe acceptatie van nieuwe specificaties opgetreden en er zijn een aantal nieuwe tools zoals CSS Grid opgedoken, maar niets is zo snel en zo veel aan het veranderen dat je niet snel genoeg op de hoogte bent.

Javascript is daarentegen helemaal anders dan tien jaar geleden en aanzienlijk anders dan vijf jaar geleden.

Merk op dat tien jaar geleden NodeJS niet eens was vrijgegeven. 'Back-end' en 'JavaScript' werden niet gebruikt om dezelfde taak te beschrijven. Als we naar de Google Trends-grafiek voor NodeJS kijken, is de populariteit van Node rond 2010 gegroeid, maar nog maar twee jaar geleden was het nog maar de helft van het piekniveau dat het in 2017 heeft bereikt. Vertaling: backend JavaScript is onlangs populair.

Google Trends-grafiek voor NodeJS

In 2013 verschenen er nieuwe op JavaScript gebaseerde frameworks ter plaatse. React werd voor het eerst geïntroduceerd in maart van dat jaar, met als doel om op elk platform een ​​"learn once, write everywhere" benadering van software te bieden. VueJS werd minder dan een jaar later geïntroduceerd als alternatief kijkgericht JavaScript-framework. Het concept van JavaScript als een eenvoudige scripttaal werd weggehaald en vervangen door een veel meer volwassen JavaScript-ecosysteem. Rond dezelfde tijd was er niet alleen nieuwe interesse en ontwikkeling in JavaScript-kaders, maar ook in het rijpen van de taal zelf. Met ES5 en nu het jaargerichte ES2015-ES2017, worden er jaarlijks nieuwe functies aan JavaScript toegevoegd.

Het is geen wonder dat als je een webontwikkelaar bent met een toolset die je vijf jaar geleden grotendeels hebt geadopteerd, je je een beetje blind voelt door deze recente ontwikkeling.

In deze reeks artikelen ga ik je voorstellen aan Vue JS, een modern componentgericht JavaScript-framework. Aan het einde van de driedelige serie weet u hoe u Vue JS moet gebruiken, maar wat nog belangrijker is, u zult op weg zijn naar vloeiendheid met modern webdesign en front-end ontwikkelingstechnieken die 's werelds beste en meest gebruikte webplatforms ondersteunen en toepassingen.

Laten we beginnen!

It's All About the Vue (Bekijken)

Vue JS werkt voornamelijk als een kijkgericht kader. Dit zou ervoor moeten zorgen dat je je als ontwerper thuis voelt! Het "zicht" is het middelpunt van alles wat er in Vue gebeurt (vandaar de naam).

Met Vue is de interface de ultieme representatie van de interactie van uw gebruiker. Alle gegevens, methoden, logica en gebeurtenissen zijn alleen belangrijk als ze de weergave zelf correct beïnvloeden.

Met Vue kunt u vrij eenvoudig een enkele weergave definiëren. Laten we naar een Vue-instantie kijken die een tekenreeks naar de browser retourneert. We laden Vue (zoals deze CDN gehoste versies, bijvoorbeeld: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), dan voegen we onze JavaScript toe:

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

En een paar markeringen:

 
Hallo, firstName lastName!
 

Zo ziet het eruit:

Dit eenvoudige voorbeeld toont enkele belangrijke concepten.

1. Een Vue-instantie kan worden gebruikt om eenvoudig de inhoud van een bepaald element weer te geven. De vue constructor neemt enkele opties. Een van die opties is de el optie, een afkorting voor "element". Dit is een selector die naar een element in uw HTML wijst - in dit geval de div met de klas my-app.
2. Gegevens worden direct doorgegeven aan de weergave; Met Vue kunt u eenvoudig gegevens van de gegevens optie voor weergave met behulp van de  DataKey syntaxis. In dit geval is de gerenderde tekenreeks binnen de h1 tag is "Hallo, Jonathan Cutrell".
3. Geen handmatige weergave-oproep is noodzakelijk. Als uw Vue-instantie is geconstrueerd en een el wordt doorgegeven, zal Vue automatisch naar dat element renderen zonder verdere code. Later zullen we zien hoe dit rendering lifecycle-management ervoor zorgt dat uw toepassing minder vaak bugs bevat.

Ter wille van de vergelijking

Laten we eens kijken naar hoe we hetzelfde zouden kunnen bereiken met pure jQuery.

let options = firstName: "Jonathan", lastName: "Cutrell" laat $ app = $ ("# mijn-app"); $ App.find ( "js-first-name.") Html (options.firstName).; $ App.find ( "js-last-name.") Html (options.lastName).;

 
Hallo, 
 

Op het eerste gezicht lijkt dit niet veel anders dan in het eerste voorbeeld. En voor eenvoudige gevallen als deze, zou dat zeker waar kunnen zijn.

Vue pakt echter een stoot in die achter de schermen is verborgen. Bijvoorbeeld, wat als u de naam op de pagina wilt wijzigen?

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

In ons string-scenario is dit natuurlijk geen realistische verandering, maar elk interval van één seconde zal de eerste naam updaten als een omgekeerde versie van zichzelf. Er is geen andere DOM-bewerking of -weergave nodig.

Nu, om hetzelfde te bereiken met alleen jQuery?

let options = firstName: "Jonathan", lastName: "Cutrell" laat $ app = $ ("# mijn-app"); $ App.find ( "js-first-name.") Html (options.firstName).; $ App.find ( "js-last-name.") Html (options.lastName).; setInterval (functie (let firstName = $ app.find (". js-first-name"). html (); laat newFirstName = firstName.split (""). reverse (""). join (""); $ app.find (". js-first-name"). html (newFirstName);, 1000)

Nogmaals, de invloed op het totale aantal regels code is in dit voorbeeld relatief laag. Het conceptuele verschil is echter aanzienlijk. We zullen daar in de volgende sectie over praten.

Waar zijn uw gegevens??

Een van de problemen waar de gemiddelde webontwerper ten onder is gegaan bij het gebruik van jQuery of een soortgelijke bibliotheek om applicaties te ontwikkelen, is het ontbreken van een scheiding van punten van zorg. Ik weet zeker dat je deze zin al eerder hebt gehoord, maar laten we het concreter maken met ons voorbeeld van naamgeving.

Op elk willekeurig moment tijdens de levenscyclus van uw toepassing, waar is de juiste "versie" van Voornaam opgeslagen?

Met de Vue-versie wordt de informatie altijd opgeslagen in de gegevens voorwerp. Als u het daar bijwerkt, wordt het overal op de juiste manier bijgewerkt. De gegevens zijn ingesloten en beheerd op één locatie.

In de jQuery-versie worden de gegevens feitelijk opgeslagen in de dom. Er is geen weergave van de gegevens in het JavaScript die zijn bijgewerkt en vervolgens vervolgens zijn weergegeven. U zult bijvoorbeeld merken dat we een opties voorwerp. Dit object wordt statisch eenmaal ingesteld. Wanneer we de naam echter bijwerken in de setInterval call, het object van die optie is nu niet langer geldig! Dit kan een probleem zijn. Bovendien kan het optieobject op elk moment worden bijgewerkt of volledig worden verwijderd en wordt de weergave niet beïnvloed (zolang de initiële weergave al heeft plaatsgevonden).

Waarom is dit een probleem?

Nogmaals, met toepassingen van dit niveau van eenvoud, kan het moeilijk zijn om te zien waarom dit van belang is. Maar naarmate uw toepassing complexer wordt, zelfs slechts in geringe mate, kan het opslaan van gegevens in de DOM extreem broos en vervelend worden.

Bridging the Gap: Homespun "State Management"

"Dus waarom scheid ik niet gewoon mijn zorgen zonder Vue te gebruiken?"

Dit is een natuurlijke vraag om te stellen. Hoe kunnen we onze zorgen dan scheiden zonder Vue?

let options = firstName: "Jonathan", lastName: "Cutrell" function setOption (k, v) options [k] = v; render ();  function render () let $ app = $ ("# mijn-app"); $ App.find ( "js-first-name.") Html (options.firstName).; $ App.find ( "js-last-name.") Html (options.lastName).;  setInterval (functie (let firstName = options.firstName; let newFirstName = firstName.split (""). reverse (""). join (""); setOption ("firstName", newFirstName);, 1000) render ();

Aha! Dus nu hebben we onze eigen rendering-machine gemaakt die zorgen voor een scheiding van zorgen mogelijk maakt. We hebben ons opties-object en zolang we onze gebruiken SetOption () functie, zullen we doorgaan wanneer de optie wordt bijgewerkt. Dus de gegevensbron is nu gescheiden van de weergave. zege!

Dit is in feite een eenvoudige stap in de richting van enkele patronen die Vue onder de motorkap gebruikt. Vue heeft echter veel meer functionaliteit en kracht dan we in deze zeer eenvoudige use case hebben gepresenteerd.

Wat als we bijvoorbeeld de Voornaam naar hetzelfde waar het al op is ingesteld? We hoeven dat hele ding niet door te laten, toch? Maar onze applicatiecode weet niet hoe dat scenario te differentiëren. Dit is iets dat Vue voor je doet, onder de motorkap.

Binnenkort

Er was veel om in te nemen voor een eerste blik, dus leun achterover en geniet ervan! In deel twee van deze tutorialserie zullen we Vue up and running krijgen terwijl hij enkele van je eerste vragen beantwoordt.

Leer Vue.js

Leer Vue.js met onze volledige handleiding voor Vue.js, of je nu een ervaren coder bent of een webontwerper die op zoek is naar nieuwe front-end ontwikkelingstechnieken.