Să stabilim scena.

Ați construit site-uri pentru câțiva ani acum. Ai început înainte de React a devenit o afacere mare, iar jQuery a fost încă populară.

Și, de fapt, exact așa a fost setul tău de unelte. În calitate de designer, ați fost o dată pe marginea tehnologiei, deoarece știați HTML, CSS și suficient jQuery pentru a aplica o anumită logică paginilor dvs..

Începeți cu câțiva ani înainte și vă simțiți un pic rămas în urmă.

"Web designer" devine încet o frază încărcată, ca "programator". Posibilele seturi de instrumente pentru un designer web de astăzi sunt mult mai largi decât o persoană poate stăpâni.

Ce sa schimbat?

Cele mai mari domenii de schimbare nu au fost cu siguranță în HTML. Ceea ce știați acum cinci ani este încă în mare măsură aplicabil astăzi.

CSS sa schimbat, dar nu într-un mod nepotrivit. Au apărut unele adopții noi de specificații, iar unele instrumente noi, cum ar fi Grid CSS, au apărut, dar nimic nu se schimbă atât de mult și atât de repede încât nu puteți ajunge la viteză destul de repede.

JavaScript, pe de altă parte, este cu totul diferit acum decât a fost cu zece ani în urmă, și semnificativ diferit de cel de acum cinci ani.

Rețineți că acum zece ani, NodeJS nu a fost eliberat nici măcar. "Back-end" și "JavaScript" nu au fost folosite pentru a descrie aceeași lucrare. Privind la graficul Google Trends pentru NodeJS, popularitatea nodului a început să crească în jurul anului 2010, dar încă de acum doi ani a atins doar jumătate din nivelul maxim de interes pe care la primit în 2017. Traducerea: backend JavaScript este nou popular.

Graficul Google Trends pentru NodeJS

În 2013, noi cadre bazate pe JavaScript au început să apară pe scenă. React a fost introdus pentru prima dată în luna martie a aceluiași an, cu scopul de a oferi o abordare "să înveți o dată, să scrieți peste tot" pentru software pe fiecare platformă. VueJS a fost introdus mai puțin de un an mai târziu ca un cadru JavaScript orientat spre vizualizare. Conceptul de JavaScript ca limbaj simplu de scripting a fost eliminat și înlocuit cu un ecosistem JavaScript mai matur. În același timp, nu numai că a existat un nou interes și dezvoltare în cadrele JavaScript, dar și la maturizarea limbii în sine. Cu ES5 și acum ES2015-ES2017 orientate spre an, noi caracteristici sunt adăugate la JavaScript pe o bază anuală.

Nu e de mirare că dacă sunteți un dezvoltator web care utilizează un set de instrumente pe care l-ați adoptat în mare măsură acum cinci ani, vă simțiți puțin orbi de această dezvoltare recentă.

În această serie de articole, am să vă prezint Vue JS, un cadru modern bazat pe componente JavaScript. Până la sfârșitul seriei de trei părți, veți ști cum să utilizați Vue JS, dar, mai important, veți fi pe calea spre fluență, cu un design modern de web și tehnici de dezvoltare frontală care alimentează cele mai bune și mai utilizate platforme web din lume și aplicații.

Să începem!

Este vorba despre Vue (View)

Vue JS funcționează în primul rând ca un cadru orientat spre vedere. Acest lucru ar trebui să vă facă să vă simțiți acasă ca designer! "Vederea" este elementul central al tot ceea ce se întâmplă în Vue (de aici și numele).

Cu Vue, interfața reprezintă reprezentarea finală a interacțiunii utilizatorului dvs. Toate datele, metodele, logica și evenimentele sunt importante numai dacă afectează corect vizualizarea în sine.

Vue vă permite să definiți o vizualizare unică de redare destul de ușor. Să examinăm o instanță Vue care redă un șir browserului. Încărcăm Vue (asemenea versiunilor găzduite de CDN, de exemplu: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), apoi adăugăm JavaScript-ul nostru:

permiteți vm = new Vue (el: "# my-app", date: firstName: "Jonathan", lastName: "Cutrell",)

Și un marcaj:

 
Bună ziua, name lastName!
 

Iată cum arată:

Acest exemplu simplu prezintă câteva concepte importante.

1. O instanță Vue poate fi folosită pentru a face pur și simplu conținutul unui element dat. vue constructorul are câteva opțiuni. Una dintre aceste opțiuni este el opțiune, scurt pentru "element". Acesta este un selector care indică un element în HTML - în acest caz, div cu clasa mi-app.
2. Datele sunt transmise direct spre vizualizare; Vue vă permite cu ușurință să transmiteți date din date opțiunea pentru vizualizarea folosind DataKey sintaxă. În acest caz, șirul randat în interiorul lui h1 eticheta este "Bună ziua, Jonathan Cutrell".
3. Nu este necesar un apel manual de redare. Dacă instanța dvs. Vue este construită și o el este trecut, Vue va face automat acest element fără nici un alt cod. Mai târziu, vom vedea cum această gestionare a ciclului de viață de randare face aplicația dvs. mult mai puțin probabil să fie buggy.

Din motive de comparație

Să ne uităm la modul în care am putea realiza același lucru cu jQuery pură.

lăsați opțiunile = firstName: "Jonathan", lastName: "Cutrell" lăsați $ app = $ ("# my-app"); $ App.find ( "js-prima-nume.") Html (options.firstName).; $ App.find ( "js-ultimul nume.") Html (options.lastName).;

 
Salut, 
 

La prima vedere, acest lucru ar putea să nu pară mult diferit de primul exemplu. Și, pentru cazuri atât de simple, acest lucru ar putea fi cu siguranță adevărat.

Cu toate acestea, Vue împachetează un pumn care este ascuns în spatele scenei. De exemplu, dacă doriți să modificați numele pe pagină?

vm = new Vue (el: "#aplicația mea", date: numeName: "Jonathan", lastName: "Cutrell", montat: function () setInterval (() => this.firstName = .firstName.split (""), invers (), join ("");, 1000);)

În scenariul nostru de șir, desigur, aceasta nu este o schimbare realistă, dar fiecare interval de 1s va actualiza primul nume ca fiind o versiune inversată a lui. Nu este necesară nicio altă manipulare sau redare DOM.

Acum, pentru a realiza același lucru doar cu jQuery?

lăsați opțiunile = firstName: "Jonathan", lastName: "Cutrell" lăsați $ app = $ ("# my-app"); $ App.find ( "js-prima-nume.") Html (options.firstName).; $ App.find ( "js-ultimul nume.") Html (options.lastName).; setInterval (funcția firstnameName = $ app.find (". js-first-name"). html (); $ app.find (". js-first-name"); html (newFirstName);, 1000)

Încă o dată, impactul asupra numărului total de linii de cod este relativ scăzut pentru acest exemplu. Cu toate acestea, diferența conceptuală este semnificativă. Vom vorbi despre asta în următoarea secțiune.

Unde sunt datele dvs.?

Una dintre problemele pe care designerul web mediu le-a căzut atunci când utilizează jQuery sau o bibliotecă similară pentru a dezvolta aplicații este lipsa de separare a preocupărilor. Sunt sigur că ați auzit această expresie înainte, dar să o facem mai concretă cu exemplul nostru de randare a numelui.

În orice moment în timpul ciclului de viață al aplicației dvs., unde este "versiunea" corectă a Nume stocate?

Cu versiunea Vue, informațiile sunt întotdeauna stocate în date obiect. Dacă îl actualizați acolo, acesta se va actualiza oriunde altundeva în mod corect. Datele sunt conținute și gestionate într-o singură locație.

În versiunea jQuery, datele sunt de fapt stocate în dom. Nu există nicio reprezentare a datelor în JavaScript care este actualizat și apoi reflectat ulterior. De exemplu, veți observa că am creat un Opțiuni obiect. Acest obiect este setat static o dată. Cu toate acestea, când actualizăm numele în setInterval apel, obiectul opțiunii nu mai este valabil acum! Aceasta poate fi o problemă. În plus, obiectul de opțiuni poate fi actualizat în orice moment sau șters în întregime și nu va fi afectat vizualizării (atâta timp cât redarea inițială a avut deja loc).

De ce este o problemă?

Încă o dată, cu aplicațiile acestui nivel de simplitate, poate fi dificil să vedem de ce contează acest lucru. Dar, pe măsură ce aplicația dvs. crește într-o complexitate, chiar și puțin, stocarea datelor în DOM poate deveni extrem de fragilă și obositoare.

Reducerea diferenței: Homespun "Managementul de stat"

- Deci, de ce nu îmi distrez preocupările fără a folosi Vue?

Aceasta este o întrebare firească. Cum să ne separăm preocupările fără Vue atunci?

permiteți opțiunile = firstName: "Jonathan", lastName: "Cutrell" setOption funcție (k, v) opțiuni [k] = v; face();  funcția rendere () permite $ app = $ ("# my-app"); $ App.find ( "js-prima-nume.") Html (options.firstName).; $ App.find ( "js-ultimul nume.") Html (options.lastName).;  setInterval (funcția firstnameName = options.firstName; permite newFirstName = firstName.split ("") inversă ("") ();

Aha! Deci, acum am creat propria mașină de redare care permite separarea preocupărilor. Avem obiectul opțiunilor noastre și atâta timp cât ne folosim setOption () funcție, vom renunța oricând la opțiunea actualizată. Deci, sursa de date este acum separată de vizualizare. Victorie!

Acesta este de fapt un pas simplu spre unele modele pe care Vue le folosește sub capotă. Cu toate acestea, Vue are mult mai multă funcționalitate și putere decât am prezentat în acest caz de utilizare foarte simplu.

De exemplu, dacă am seta Nume la același lucru este deja stabilit? Nu trebuie să renunțăm la acel lucru, nu-i așa? Dar codul nostru de aplicare nu știe cum să diferențieze scenariul respectiv. Asta e ceea ce Vue face pentru tine, sub capota.

Coming Up

Au fost multe lucruri de luat în seamă pentru o primă privire, deci stați-vă înapoi și înmuiați-o! În partea a doua a acestei serii de tutorial vom primi Vue în timp ce răspundem la unele dintre întrebările dvs. inițiale.

Aflați Vue.js

Aflați Vue.js cu ghidul nostru complet Vue.js, indiferent dacă sunteți un coder experimentat sau un web designer care caută să ridice noi tehnici de dezvoltare front-end.