Smashing Podcast Episodul 26 Cu Natalia Tepluhina: Ce este nou în Vue 3.0?

În acest episod de podcast, vorbim despre VueJS. Ce este nou în versiunea 3.0 și cât de greu va fi migrarea? Drew McLellan vorbește cu membrul principal al echipei Natalia Tepluhina pentru a afla.

Afișați note

• VueJS
• Ghidul de migrare Vue 3
• Natalia pe Twitter
• Site-ul personal al Nataliei

Actualizare săptămânală

• Diferite moduri de a proiecta pagini de produse digitale
  scris de Suzanne Scacca
• Testarea unitară în aplicațiile React Native
  scris de Fortune Ikechi
• 5 moduri în care Google Analytics ajută dezvoltatorii web în designul UI/UX
  scris de Clara Buencosejo
• Înțelegerea generice TypeScript
  scris de Jamie Corkhill
• Cum să utilizați mișcarea feței pentru a interacționa cu tipografia
  scris de Edoardo Cavazza

Transcriere

Drew McLellan: Ea este un dezvoltator web pasionat, un expert în dezvoltatori Google și un vorbitor și autor de conferințe. În prezent, este Staff Front Engineer la GitLab, dar este posibil să o cunoașteți cel mai bine ca membru al echipei Vue JS Core. Atât de clar, ea își cunoaște modul în Vue mai bine decât aproape oricine. Dar știai că ea a învățat odată un cangur să cânte? Prietenii mei Smashing, vă rugăm să urăm bun venit Nataliei Tepluhina.

Drew: Bună Natalia, ce mai faci?

Natalia Tepluhina: Bună Drew, aceasta a fost o încercare foarte frumoasă de a-mi folosi numele de familie. Trebuie să-ți dau credite. A fost unul dintre cele mai bune lucruri pe care le-am auzit vreodată de la vorbitorii de engleză când încearcă să-mi pronunțe numele de familie. Bănuiesc că nu este posibil dacă nu ești vorbitor de rusă. Pronunția corectă este Tepluhina, dar este ca, de aceea, de obicei, le cer oamenilor să-mi spună Natalia și să ne oprim la asta.

Drew: Bine, am făcut un efort. Dar întrebarea importantă este, ești Smashing?

Natalia: Sigur că sunt.

Drew: Asta e bine. Așa că am vrut să vă vorbesc astăzi despre câteva știri cu adevărat interesante pe care le avem în septembrie odată cu lansarea Vue 3.0. A fost o lansare majoră în ceea ce privește numărul versiunii, dar este într-adevăr o lansare mare pentru Vue și a fost în lucru de ceva timp, nu-i așa?

Natalia: Este. Cred că am anunțat prima versiune a treia în 2018. Cred că a fost anunțată în primăvară, iar munca adevărată a început în, adică ideile a fost în primăvară, munca adevărată a început în toamna anului 2018. Și cred că a fost anunțat oficial la Conferința de la Londra, care a avut loc în octombrie 2018. Munca activă a durat doi ani. Și este mult dacă te gândești, versiunea anterioară a fost lansată în 2016. Așa că jumătate din acești patru ani au fost dedicați și lucrării Vue 3.

Drew: Care a fost tipul de factor de motivație pentru a decide că se cere o nouă versiune majoră? A fost un fel de decizie conștientă că, bine, vom lucra la o versiune majoră, vom lucra la Vue 3 sau a fost doar un fel de acumulare de modificări care au necesitat pur și simplu o modificare a versiunii?

Natalia: Nu, cred că a fost o idee să creez o versiune nouă din cauza unor lucruri foarte importante. Deci, în primul rând, a existat o motivație de a schimba reactivitatea. Cel precedent a fost construit pe Object.defineProperty. Și a avut câteva avertismente, toate sunt documentate, dar totuși. Știi, chiar dacă documentezi ceva ce oamenii nu ar trebui să facă, o vor face oricum. Și ar trebui să le îndreptați către documentație. Apropo, nimeni nu citește documentația. Din anumite motive, pur și simplu se întâmplă. Până nu subliniezi oamenii că nu există în documente, există. Dar bine. Te vom învăța oricum. Deci reactivitatea a fost unul dintre lucruri.

Natalia: Performanța a fost următoarea. Vue 2 a avut și nu are cea mai slabă performanță, dar am avut câteva idei despre cum să facem Vue mai rapid. Și, de asemenea, a existat un punct de durere pentru o anumită parte a oamenilor noștri, să spunem publicul, care folosesc Vue. Era TypeScript. Vue 2 a fost scris intern în Flow, care este încă unul puternic tastat, dar tastarea cu TypeScript a fost un adevărat coșmar, mai ales dacă lucrați cu managementul nostru de stat Vuex. Aceasta a fost din nou o parte uriașă. Și ultimul a fost că ne-a cam ratat funcționalitatea logicii abstracte, nu în ceea ce privește componentele, ci părțile logice composibile. Precum funcțiile de ajutor și așa mai departe, dar ar trebui să poată include și activitatea spectatorului. Un exemplu frumos aici ar putea fi React Hooks, chiar că vă permit să abstractizați părțile funcționalității și acest lucru lipsea în mod clar în Vue. Și știu că acum sună de genul „Ai furat funcția de la React”. Nu de fapt. Cred că polenizarea încrucișată a ideilor este o parte importantă și frumoasă în ecosistemul nostru și, de asemenea, ajută dezvoltatorii să comute între favorite, nu?

Natalia: Deci am lucrat la aceste caracteristici principale pentru a crea Vue 3 ca versiune majoră.

Drew: Acum cred că unul dintre lucrurile grozave despre existența într-un ecosistem open source este că există o mulțime de idei și experiență din tot felul de proiecte diferite și abilitatea de a împrumuta acele idei și de a împrumuta experiența de la alte proiecte. proiecte este cu adevărat benefică și face totul mai puternic, nu-i așa?

Natalia: Este. Cred că funcționează așa cum numim o valoare de iterație în GitLab. Când vii cu o idee, nu este niciodată perfectă. Este în mare parte ca ceva foarte brut, foarte codificat. Poate schimba ceva, dar cu siguranță nu e perfect. Și aveți nevoie de câteva iterații asupra acestei idei pentru a o face cu adevărat bună, nici măcar perfectă, doar bună. Și se întâmplă cu ideile din ecosistem. Cineva vine cu o idee bună și tu doar o iei și o faci din ce în ce mai bună. Și pun pariu că bine, va exista ceva care va lua unele idei de la Vue, poate că au luat deja unele idei de la Vue și o va îmbunătăți, și nu este nimic rău aici.

Natalia: Sunt puternic împotriva, de genul „Furi idei”. Acest lucru nu este furt, este doar polenizare încrucișată.

Drew: Exact, da. Ați menționat că migrarea la TypeScript, deci Vue 3 în sine este scris folosind TypeScript acum, este corect?

Natalia: Da, da. Și crede-mă, Drew, scriam documentația, micul document despre cum să folosești Vue cu TypeScript. Și am fost ca, bine, probabil cumva ca Vue 2. Și am complicat atât de greu documentul, încât aș fi scris totul în mod explicit. Arata bine, totul este scris. Pot vedea tipuri, așa că ts-link-ul meu este fericit, până acum e bine. Și apoi unul dintre dezvoltatorii noștri care lucra cu TypeScript, „Nu trebuie să faci asta”. Cum, cum? „Nu trebuie să faceți tipuri explicite de date. Îi dai doar o valoare inițială și ts-link își știe numărul. Este deja tastat.” Cum de? „Am eliminat 90% din tipurile explicite din document. Există doar două lucruri pe care trebuie să le tastați este proxy-ul componentei și proprietățile calculate vor avea. Încă necesită tipuri de returnare. Dar restul este ca, tastat automat, doar scrie o componentă cu o metodă pe care o numim define component. Si asta e. Este tastat.”

Natalia: A fost ca, pur și simplu funcționează. Și pentru mine, și am lucrat mult cu Angular în experiența mea din trecut, am Sindromul Stockholm pentru TypeScript. Totul ar trebui scris în mod explicit. Adică, dacă aveți tipuri complexe, desigur că va trebui să scrieți interfețe, dar așa funcționează TypeScript. Totuși, este mult mai ușor să lucrezi cu TypeScript chiar acum cu Vue 3.

Drew: Deci este grozav, deci este un beneficiu atât pentru proiectul Vue Core, cât și pentru dezvoltatorii care construiesc aplicații folosind Vue, deoarece pot folosi TypeScript în aplicațiile lor frumos cu Vue acum, unde nu ar putea cu 2.0, ei bine, orice versiune. de 2.0 atât de ușor. Cei care sunt familiarizați cu comunitatea Vue vor fi conștienți de faptul că creatorul Vue, Evan You, conduce în continuare proiectul foarte activ. Cum funcționează Core Team? Cum este structurat când vine vorba de procesul de dezvoltare? Nu e tot Evan, nu-i așa?

Natalia: Este o întrebare atât de grozavă, Drew, pentru că de ani de zile, la propriu, oamenii au vorbit despre Vue, citez asta și voi suna dur, dar îmi pare rău, este de genul „Un cadru de o persoană chineză, ca și un cadru chinezesc” . Și vreau să spun, chiar și cu Vue 1.X, exista deja o echipă și era o echipă mare în spatele Vue 2 și o echipă și mai mare în spatele Vue 3. Chestia este că toți avem responsabilități diferite când vorbim despre Vue.

Natalia: Există oameni care lucrează la Core, iar acesta nu este doar Evan însuși, el lucrează în cea mai mare parte pe Vue Core, cu siguranță, și conduce și proiectul. Dar există oameni care lucrează în Vue Core, iar contribuțiile lor sunt absolut neprețuite. Și există câțiva oameni noi, care se alătură echipei Vue, care lucrează în Core. Și există și echipe mai mici care lucrează la ecosistem, sunt oameni care lucrează pe Pure Router, cum ar fi Eduardo, sunt oameni care lucrează pe Vue CLI, pe Vuex, și pe documentație.

Natalia: Există o echipă întreagă care lucrează la documentare pentru că noi credem că documentarea este importantă. Și în prezent pe site-ul nostru există, cred că 21, 20 sau 21 de persoane, mereu dor de numărare, care aparțin echipei Core, dar aceasta nu este o listă statică. Pentru că noi, evident, nu angajăm, suntem o echipă open source, aceasta nu este un loc de muncă plătit. Dar credem că, dacă cineva contribuie mult la oricare dintre părțile ecosistemului Vue, atunci când oamenii fac deja treaba de membru al echipei Core, este doar, oferindu-i recunoaștere doar cu acces la depozitele și titlul oficial.

Drew: Este grozav pentru că este un caz în care contribuția la un proiect open source poate într-adevăr să răsplătească o persoană. Ei primesc o oarecare recunoaștere și asta poate avea un impact în cariera ta profesională și în ceea ce ai tu.

Drew: Pentru ascultătorii care poate nu sunt obișnuiți cu Vue, dar poate că sunt familiarizați cu alte cadre reactive, cum ar fi React, Angular și așa mai departe. Care sunt schimbările mari ale titlurilor cu Vue 3 și, în special, ce probleme încearcă să rezolve? Ai menționat compoziția mai devreme ca fiind unul dintre acele lucruri, aceasta este una dintre marile schimbări?

Natalia: Da, aceasta este una dintre cele mai mari schimbări și, de fapt, este unul dintre lucrurile care sunt, în primul rând, să fac o declarație clară aici. Compoziție API este pur aditiv. Nu este că trebuie să rescrieți componentele, le puteți adăuga TypeScript. Sau ați putea prefera să utilizați toată sintaxa, acum o numim Options API și nimic nu se va schimba pentru dvs. în acești termeni. Este ca și cum, atunci când vorbim despre noul API, aceasta nu este o schimbare radicală. Vreau doar să subliniez acest lucru, este foarte important să spun pentru că atunci când a anunțat pentru prima dată Composition API a fost un moment îngrozitor.

Natalia: Cred că nu am descris foarte bine modificările și am făcut să pară că versiunea standard va fi Composition API. Este răul nostru complet și opțiunile au fost de genul, poate îl vom deprecia în versiunile viitoare, nu în Vue 3, în mod clar. Și dacă există șanse ca oamenii să citească greșit ceea ce ai spus tu, ei vor citi greșit.

Natalia: Imediat după această declarație, a fost RFC unde tocmai am propus schimbarea, a explodat Reddit. Reddit a fost plin de cuvinte: „O, Doamne. Va trebui să scriu totul. Oh, Dumnezeule. Vue este nou Angular. Vor sparge toate lucrurile.” Și a fost un tip care a creat un articol pe dev.to numit, Vue's Darkest Day. A fost cea mai întunecată zi, sincer. Ne-am simțit așa, dar am încercat să lupt cu asta pe propriul meu Twitter, cum ar fi: „Oameni care nu suntem cu adevărat… Ei spuneau că am început să schimbăm RFC-ul, cred că Evan a început să schimbe RFC-ul fără să anunțe schimbări. Așa că a spus: „Voi rescrie rapid asta. Să ne împingem în stăpân”. Oamenii erau supărați din cauza asta. Pentru că se certau despre anumite puncte, atunci doar reîmprospătați o pagină și acele puncte nu mai există. Ai impresia că sunt un prost sau doar... Ce naiba? Adică, era chiar acolo. Imi amintesc asta. Și cred că strategia noastră de comunicare ar putea fi mai bună și nu suntem noi.

Natalia: În acest moment, de fiecare dată când vorbesc despre compoziție, asta este pur aditiv, oameni buni. Aceasta este doar o caracteristică plăcută. Îl poți folosi, nu îl poți folosi, nu ești obligat. Doar... Există.

Drew: Care este genul de problemă în care s-ar putea pune cineva în cazul în care API-ul Composition este un lucru nou care îl ajută să iasă din acea problemă? Ce problema se rezolva?

Natalia: Imaginează-ți componenta care are câteva caracteristici în interior. Să presupunem că este căutare și sortare. Să presupunem că căutăm o anumită listă și încercăm să o sortăm. Acestea sunt deja două caracteristici diferite și treaba cu componentele Vue este că acestea sunt împărțite, în funcție de opțiuni, nu pe baza logicii. Imaginați-vă că căutarea dvs. are probabil o interogare, deoarece trebuie să faceți o interogare pentru a căuta și a aranja rezultate. Și acestea sunt două proprietăți reactive. În ceea ce privește componenta dvs., le puneți la opțiunea numită date. Și, evident, aveți nevoie de o metodă pentru a efectua sortarea. Poate un clic pe buton, poate altceva, ceva care rulează căutarea. Tu creezi metoda. Și pentru sortare trebuie să construiți ceva pe opțiunile de sortare, o altă proprietate reactivă. Apoi efectuați un calcul pentru a sorta rezultatele.

Natalia: În Vue, pentru asta, ai și proprietăți calculate, care este o altă opțiune. La final, componenta ta a devenit cu adevărat fragmentată. Și imaginați-vă că sunt un dezvoltator și am o sarcină de a lucra doar la o parte de căutare. Nu pot împărți componenta acum, deoarece aceste două caracteristici sunt cam încrucișate în felul lor. Caut niste rezultate si le sortez. Și trebuie să trec de la date la metodă, de la metodă la calculată și, la sfârșit, este foarte greu să schimb contextul. Mai ales dacă componenta crește cu adevărat.

Natalia: Ce opțiuni aveam în Vue 2.0? Prima opțiune a fost numită mixin și mixin este doar un obiect care poate conține aceleași proprietăți pe care le poate avea componenta și le amestecăm cu o componentă. Sună bine, pot să-mi muți toate căutările acolo și care este problema? Sunt cateva. În primul rând, acest lucru nu este complet flexibil. Dacă vreau să caut un anumit punct final și îl mut în mixin, acesta va fi singurul punct final pe care îl pot căuta. Mixinele nu acceptă parametri. Am creat un mixin, este complet static. A doua problemă este că mixin-ul este amestecat, ceea ce înseamnă că pentru anumite proprietăți se întâmplă ca o fuziune. De exemplu, dacă ați creat cârlige, acestea vor fi îmbinate. Toată logica din cârligul ciclului de viață din componenta mixin este îmbinată împreună. Dar dacă aveți o proprietate de date, o interogare rece în mixin și, din întâmplare, aveți același lucru în componentă, componenta are prioritate. Va fi anulat. Nu vei avea avertismente. Absolut. Pur și simplu se va întâmpla și nu vei avea idee că s-a întâmplat asta.

Drew: Toată domeniul de aplicare este complet amestecat?

Natalia: Da, complet. Nu există nicio șansă să vedeți și, de asemenea, mixin-urile sunt o sursă foarte neclară. Doar importați mixin-ul cu nume și îl puneți pentru a vizualiza proprietățile componentei mixin, asta este. Este foarte implicit și vorbesc despre asta din punctul de vedere al propriei mele experiențe. Avem o logică în GitLab în care o componentă conține două mixine și fiecare dintre aceste două mixine conține un alt mixin. Și iată, aici este o proprietate pe care trebuie să o verificați și nu se află în componentă. Să mergem mai în adâncime, mixing de primul nivel. Acesta nu îl conține și nici acesta nu îl conține. Unde este? Te scufunzi adânc, doar mai adânc în gaura iepurelui, doar pentru a găsi această proprietate și testarea devine și un coșmar.

Natalia: Mixin-urile sunt moduri foarte stupide de a extrage logica. Este simplu, este clar, este foarte ușor de obținut. Îți aduce atât de multe probleme dacă vrei să lucrezi cu asta la nivel avansat. Următorul mod de a abstractiza logica în Vue 2.0 a fost componentele fără redare. În Vue, componenta poate conține un slot. Practic, o piesă în care poți pune orice din componenta părinte. O fereastră mică, un slot de fapt. Și există o idee de sloturi cu scop. Imaginați-vă componenta copil care își poate expune propriul domeniu înapoi la părinte și conținutul slotului va avea acces la aceasta. Imaginați-vă că am o componentă cu un slot și componenta realizează toată logica privind căutarea, să zicem căutarea care are un punct final cu parametrii din trecut. Componenta noastră copil, cum ar fi căutarea și apoi expune această parte a domeniului său înapoi părintelui. Acestea sunt rezultatele căutării. Bucurați-vă. Sună bine. Sună cu siguranță mai bine decât mixurile. Putem testa parametrii. Logica este explicită aici, returnăm ceva. Probleme? Sunt cateva.

Natalia: În primul rând, ți-ai creat instanța componentei. Aceasta nu este cea mai ieftină operațiune din lume. A doua parte, este timpul de rulare. Componenta funcționează numai în timpul de execuție și aceasta înseamnă că proprietatea expusă din această componentă va putea fi disponibilă numai în slotul pe care l-ați expus ca sferă de sloturi, astfel încât rezultatele căutării dvs. sunt disponibile doar în partea mică a șablonului. Dacă vrei să te joci cu partea discretă a componentei, nu ai acces acolo. Este timpul de rulare. Nu a existat nicio acțiune în această logică dacă aveai nevoie de o stare reactivă în altă parte. Desigur, poate crea un ajutor ca o funcție pură și poate returna rezultate, dar ce se întâmplă dacă trebuie să operez pentru proprietățile reactive? Așa a fost creat Composition API. Cu API-ul Composition puteți avea o stare reactivă autonomă. Starea reactivă nu mai este doar o parte a componentei. Puteți face orice obiect sau primitiv, reactiv. Și îl poți expune înapoi părinților, este foarte explicit.

Natalia: Fiecare proprietate pe care doriți să o returnați părintelui este expusă. Este explicit, puteți da clic pe acesta, puteți vedea unde este, ce este și așa mai departe. Și cea mai bună parte, dacă includeți partea API-ului Composition în componenta veche bună care are metode de date, proprietăți ale computerului, orice, pur și simplu funcționează. Pur și simplu funcționează perfect, adăugați doar câteva proprietăți și metode reactive la componenta dvs. și le puteți utiliza și cu API-ul de opțiuni vechi.

Drew: Se pare că va ajuta cu adevărat dezvoltatorii să-și curețe bazele de cod atunci când vine vorba de componente foarte complexe sau chiar de combinații ușor complexe de componente. Și ați menționat testabilitatea mixinilor și a lucrurilor, permite API-ul Composition o testabilitate mai bună?

Natalia: Da, cu siguranță pentru că Composition API, dacă excludem cârligele ciclului de viață din aceasta, pentru că puteți rula și un alt cârlig ciclului de viață în compusul. Este de fapt o funcție pură. Ai parametri S, faci ceva și în afara cârligelor ciclului de viață există încă efecte secundare. Și testarea funcțiilor pure, după cum știți, este probabil cel mai ușor lucru. Este doar o cutie neagră, ai parametri S, ai ceva de returnat.

Drew: Sună o soluție foarte cuprinzătoare la o problemă pe care sunt sigur că mulți oameni care construiesc aplicații mai complexe cu Vue o vor aprecia. Și cu siguranță sună ca o modalitate foarte grozavă de a elimina tipul de erori despre care știu că se pot strecura cu mixin-uri, unde este foarte ușor să introduci erori, așa cum ai menționat, cu scopul de a fi fuzionat și tot felul de lucruri.

Drew: Întotdeauna cred că o considerație importantă atunci când alegi să construiești pe deasupra unui cadru este stabilitatea API-ului acestuia în timp. Poate că stabilitatea nu este cuvântul potrivit, dar cred că mulți dintre noi au fost înțepați de construirea pe un cadru, apoi suferă o mare reelaborare și ne lasă cu aplicații care fie necesită o investiție masivă pentru a migra, fie pur și simplu ajung să fie legate. la o versiune veche a unui cadru care apoi nu mai este suportat. Este o situație îngrozitoare în care să fii. Cât de mult somn am să pierd mutând un proiect mare de la Vue 2 la Vue 3?

Natalia: În primul rând, suprafața API este în proporție de 90% aceeași ca a fost. Nu aveam atât de multe lucruri depreciate sau filtre depreciate care pot fi înlocuite cu hub-uri de evenimente depreciate. Dacă doriți să utilizați un EventEmitter, ar trebui să înlocuiți unul bazat pe vizualizare și cu o bibliotecă externă. Acestea sunt schimbări mari, dar vorbind despre migrație... Permiteți-mi să vă spun clar, sunt foarte rupt acum, pentru că, pe de o parte, sunt membru al echipei Vue JS Core. Pe de altă parte, sunt inginer de personal în marele proiect care folosește Vue. Dacă sunteți pe cale să începeți migrarea chiar acum, nu v-aș recomanda să faceți acest lucru. În primul rând, ecosistemul nu este lansat, adică dacă vorbim despre biblioteci de bază precum Pure Router, PUX, Vue CLI, acestea sunt într-o formă bună, dar sunt totuși candidate la lansare, nu lansări. Și dacă vorbim despre alte ecosisteme, cum ar fi biblioteci nu de bază, poate biblioteci de componente UI, poate unele biblioteci de validare a formularelor, acestea nu sunt pregătite, în mare parte, pentru Vue 3. Și dacă aveți un proiect mare, aveți atât de multe dependențe pe care trebuie să le faceți. îngrijire. Deci asta ar fi un lucru complicat.

Natalia: Care sunt opțiunile? Ai un proiect mare, vrei să folosești toată această bunătate Composition API. Cum să realizezi acest lucru? În primul rând, intenționăm să lansăm o versiune LTS a Vue 2.0, Vue 2.7. Aceasta va include o mulțime de avertismente de depreciere, astfel încât veți putea vedea ce va fi depreciat, cum să-l refactorați pentru a nu-l rupe cu Vue 3. Deci veți folosi în continuare Vue 2 din punct de vedere tehnic, dar veți pregăti Vue 3 oricum pentru ca ai toate avertismentele.

Natalia: În al doilea rând, vom folosi un instrument de migrare care îl va putea rula și va funcționa ca un codemod, înlocuind lucrurile care se referă la Vue 2 cu alternative Vue 3. Desigur, niciun codmod nu este perfect. Ne propunem, în primul rând, să facem înlocuiri ori de câte ori este posibil, dar și să prezentăm avertismente ori de câte ori deprecierea nu este ușor de gestionat. Codemod va fi capabil să recunoască un lucru și să arunce un avertisment, dar nu să îl înlocuiască singur. Acesta este ca un plan mare și, în momentul în care Vue 2.7 este lansat și cred că acum, ora estimată a sosirii lor este decembrie, dacă îmi amintesc bine, ar trebui să verific foaia de parcurs, dar cred că este decembrie.

Natalia: Ecosistemul va fi și el mai mult sau mai puțin pregătit. Dacă aveți un proiect mare cu Vue 2.0, așteptați încă puțin până când Core este stabilizat, deoarece chiar dacă produceți o bibliotecă perfectă, are nevoie de ceva timp pentru a se stabiliza, deoarece oamenii încep să folosească acest lucru, oamenii încep să raporteze erori. Dacă sunteți pe cale să îl utilizați pentru proiecte pentru animale de companie și să raportați erori, vă rugăm să faceți acest lucru. Și după aceasta va exista o modalitate bună de migrare la Vue 3.

Drew: Deci instrumentul de migrare pe care l-ați menționat sună destul de interesant. Acesta este practic un instrument de analiză statică care analizează codul dvs. și...

Natalia: Da, da, da, este un cod sau un instrument. Momentan este disponibil într-un mod foarte limitat. Este disponibil ca plug-in pentru Vue CLI. Dacă aveți un proiect bazat pe Vue CLI, puteți rula upgrade Vue și puteți vedea cum funcționează instrumentul. Nu este în forma în care ne dorim să fie până acum. Din păcate, nu lucrez la un proiect construit pe Vue CLI. Ar trebui să aștept și să verific ce se întâmplă, dar, de exemplu, GitHub, am făcut deja câțiva pași, chiar și fără instrument de migrare, pentru că știm ce este depreciat. De fapt, este menționat în documentația Vue 3.

Natalia: Există un ghid de migrație. Puteți vedea toate modificările de ultimă oră și lucrurile care s-au depreciat și puteți deja să lucrați la o parte dintre ele chiar și pe baza de cod Vue 2.0. De exemplu, în Vue 2.6 am schimbat sintaxa pentru sloturi. Sintaxa pentru sloturile de domeniu a fost depreciată, dar nu a fost refuzată, încă există. Oferă un avertisment, dar îl poți rula. Și, desigur, cu o bază de cod care avea șapte ani, nimănui nu-i pasă să înlocuiască toată sintaxa depreciată dacă funcționează. Nu există niciun avertisment în producție. Sloturile funcționează. În dezvoltare, de genul „Oh, văd un avertisment în consolă. Poate 20 dintre ei, bine. Este galben nu roșu. nu-mi pasă”.

Natalia: Știi că se întâmplă tuturor. Am creat o epopee uriașă pentru a lucra la asta. Găsiți toate seturile actuale de sintaxă veche. Facem eforturi pentru a înlocui EventEmitters, din nou, proiectul vechi de șapte ani, nu ne judeca. Avem EventEmitters. GitLab lucra la EventHubs. Am înlocuit distracția bazată pe Vue cu biblioteci externe. Aș recomanda să faceți același lucru. Parcurgeți ghidul de migrare, verificând ce poate fi înlocuit deja și ce modificări puteți face deja pentru a vă pregăti și a începe să lucrați la asta.

Drew: Cu starea actuală a instrumentului de migrare, fiți o modalitate bună de a testa apele cu baza de cod. Doar rulați-l și aruncați o privire pentru a vedea ce semnalează deja, pentru a vedea dacă arată în regulă sau dacă sunt lucruri mari sau este încă prea imatur pentru asta? Este mai bine să așteptați până în decembrie când s-ar putea de fapt să remedieze lucrurile.

Natalia: Dacă aș avea un proiect mare, nu aș recomanda să îl fac. Dacă aveți un mic proiect prost sau poate un proiect personal, dar nu este atât de mare, v-aș recomanda să îl rulați și să verificați probleme precum orice aveți, deoarece pentru două proiecte de dimensiuni medii l-am rulat. Cred că una sau două probleme. Nu pot spune că este imatur. Este deja într-o formă bună. Dar, din nou, pentru proiecte mari, este o moștenire, sunt lucruri exotice. Nu faceți asta în producție, oameni buni.

Natalia: De asemenea, dacă vrei să te joci cu schelele proiectului tău, acum Vue CLI acceptă două moduri. Puteți crea proiect Vue 2, puteți crea proiect Vue 3. Și, cu siguranță, încearcă măcar. Aceasta este o modalitate bună și pentru noi, deoarece pe măsură ce jucați, descoperiți erori, raportați erori, încercăm să le reparăm și așa mai departe.

Drew: În documente și pe foaia de parcurs de dezvoltare văd mențiune despre o construcție de migrare. Este ceva diferit de ceea ce am vorbit sau despre asta vorbim?

Natalia: Nu, nu, este la fel. Este același și ar trebui să fie gata, dar deocamdată, dacă plănuiți migrarea, calea principală este doar să citiți documente și să urmați orice se spune acolo pentru că cu siguranță facem efort ori de câte ori nu avem instrument de migrare, echipa de documentare a continuat. și a creat un ghid detaliat despre ce este schimbarea, de ce a fost făcută și ce este de fapt o înlocuire aici.

Drew: Da, în documente există un ghid de migrare destul de cuprinzător ca parte a documentelor Vue 3 și menționează o mulțime de modificări care trebuie migrate. Cred că unele dintre acestea nu vor afecta fiecare proiect. Multe dintre ele au fost, în esență, cazuri de margine pentru mulți oameni. Este corect?

Natalia: Da, o bună parte dintre ele, de exemplu, filtrele, cu siguranță sunt niște cazuri marginale, deoarece chiar și la GitLab cu, pentru a treia oară, o bază de cod vechi de șapte ani și una mare. Am avut una sau două apariții de filtre și nu au mai fost folosite. A fost un lucru bun că le-am căutat și le-am eliminat complet pentru că de genul „Oh, cod nefolosit” și din nou, cui îi pasă că există.

Natalia: Aș spune că schimbările de ruptură sunt schimbările de model. Aruncă o privire la asta, deoarece fiecare proiect pe care îl cunosc conține cel puțin un model Vue, cu siguranță. Acest lucru ar trebui verificat și poate se schimbă și atributele, deoarece în prezent includem clasa și stilul, tubulare și eteri. Și dacă ați lucrat vreodată cu Vue, anterior nu era inclus. Momentan, modul în care transmiteți clasă și stil unui copil componente este ușor diferit și merită cu siguranță atenție.

Drew: E bine de știut. Versiunile 3.0 care vin odată cu Vue, vreau să spun că ați menționat ecosistemul și tot ceea ce îl înconjoară, Vuex și toate aceste părți ale ecosistemului care trebuie să avanseze la acel nivel. De aceea, în prezent, site-ul web, marele buton „Începe”, tot merge la Vue 2? Se pare că Vue 3 a fost lansat, dar nu cu încredere deplină. Dar oare din cauza acelei probleme de ecosistem este încă așa?

Natalia: Nu, cred că tocmai ai găsit o eroare, lasă-mă să verific rapid. Nu, începeți arată spre Vue 3, e în regulă. Adică, dacă accesezi vuejs.org, indică versiunea a doua. Acest lucru este intenționat pentru că am plănuit să-l înlocuim cu sub-domeniu precum Vue 2, care este în lucru, dar până acum decidem să lăsăm vuejs.org acolo unde este și să creăm Vue 3 și de aceea există un banner pe vuejs. org. Dacă te duci la orice doctor

Drew: Există un banner foarte mic în partea de sus, da.

Natalia: Da, ca mici.

Drew: Da.

Natalia: Cred că ar trebui să o facem mai mare. Mai mare și cu un contrast de culoare mai bun. Sentimentele mele de accesibilitate rămân de genul „Oh, nu există nimic de contrast acolo”.

Drew: Sunt o veste bună. Dacă cineva începe, poate nu un proiect mare, dar dacă cineva începe un proiect personal sau dorește să învețe Vue, cu siguranță, Vue 3 este locul de început?

Natalia: Aș zice. Apropo, curba de învățare nu este atât de diferită. Pentru că a fost o intenție a echipei de documentare să aibă opțiunile de sintaxă veche, nu ar trebui să spun vechi, de fapt este sintaxa actuală. Sintaxa familiară ca una implicită. Pentru că dacă parcurgeți documentația Vue 3, veți vedea cu API-ul Composition doar în subiecte avansate, iar calea de învățare pe care o aveți cu Vue 3 este oarecum similară cu cea pe care ați avut-o în Vue 2. Nu este mare lucru să începeți cu un mai nou. versiune dacă tocmai înveți Vue și încerci să experimentezi cu ea și cred că ar fi o investiție mai bună dacă vorbim despre carieră. Începeți să învățați versiunea mai nouă, deoarece va depăși toate proiectele. Până la urmă, poate jumătate de an, un an, chiar și pentru proiecte de mari dimensiuni va fi migrație.

Drew: Se pare că am în cariera mea personală un adevărat talent de a veni pe platforme așa cum sunt în proces de migrare mare. Vreau să spun chiar și până în urmă, îți amintești, directorul Macromedia, mergând înapoi atât de departe și Shockwave, Flash și tot felul de chestii. Am ajuns la asta în timp ce treceau la sintaxa punctelor și a trebuit să le învăț pe amândouă. Și iată-mă, mă trezesc în ultima lună, lucrând pentru prima dată la un proiect în Vue, care este un proiect Vue 2 și învăț pe măsură ce merg și aștept cu nerăbdare toate lucrurile care urmează în Vue 3. Este cu siguranță un moment interesant pentru a învăța ceva pe măsură ce migrează, dar se pare că nu este prea dificil cu Vue și odată ce ecosistemul a ajuns din urmă cu Core, atunci ar trebui să fim într-un loc bun.

Natalia: Oh, Drew, vreau doar să subliniez orice ai spus despre imigrarea în proiecte mari. Vă puteți imagina că 2018 și mă alătur GitLab. Nu am fost membri Core Team, sunt doar un colaborator în acest moment.

Natalia: Imediat, în același timp, Evan spune: „O, vom face Vue 3”. Tuturor le place „Da, cool”. Primăvara lui 2019, ești echipa principală. Vreau să spun că întregul GitLab este de genul „Oh, asta e drăguț. Cu toții avem migrație și știi cine este responsabil pentru asta?” Și vă puteți imagina doar cum se întâmplă când scrieți documentație pentru Vue 3, toată lumea va citi și propria dvs. companie spune: „Oh, vreau să învăț ceva despre Vue 3, nu vă pot înțelege documentele.” Deci, ești de genul „Oh, la naiba, e atât de dureros”, pentru că ești un dezvoltator acolo și un scriitor de tehnologie, cam aici.

Natalia: Sunteți în mijlocul acestui lucru, dar trebuie să spun că este foarte benefic și pentru framework, deoarece orice produs mare creat cu un framework este un câmp de luptă grozav, absolut grozav pentru a găsi bug-uri și a le aduce înapoi în bibliotecă. ecosistemul. Pot spune că teste, iar GitLab este open source, Vue Test Utils, care este un instrument de testare pentru Vue. O echipă folosea codul nostru de testare bazat pe teste, ceea ce are foarte mult sens, corect. Pentru că puteți găsi niște carcase de margine și așa mai departe. Dar totuși, când mă gândesc la migrarea GitLab la Vue 3, mă simt ca o responsabilitate personală pentru asta. Nu sunt doar în mijlocul migrației, ci sunt personal responsabil pentru fiecare eroare pe care o vom găsi.

Drew: Privind înapoi la generația anterioară de framework-uri JavaScript, cred că unul dintre cele mai de succes dintre acestea a fost jQuery, pe vremuri, și cred că a câștigat popularitate deoarece avea un API extrem de bine proiectat. Just this concept of taking a CSS selector and using it to query the DOM in your JavaScript was something that jQuery popularized. And I think that really resonated with hardworking developers who didn't need to learn a new way to work with JavaScript. I see Vue almost being I that same sort of camp. I mentioned I was previously working with React and moved to Vue in the last few weeks, and I found that almost everything to be more intuitive in the most genuine sense, as in I can look at something unfamiliar and pretty much understand what it's doing. And if I need to do something I've not done before I can sort of guess at how it would be implemented and usually I'm right or close to it.

Drew: Is the API of Vue something that the Core Team think about very closely or has it just turned out well almost as a happy accident because of the personalities involved?

Natalia: I think, at the times of Vue 2 we had a concept. It's changed slightly but we had a concept that was called Documentation Driven Design. And it's a really great concept because if something is really hard to explain, really hard to get and really hard to write down, maybe the API is wrong there. Maybe something is not developed as it should be because non-intuitive solutions, something that is like very cryptic, and you need to put a lot of work to explain, usually is not right. The API was shaped the way that is the easiest to explain and that's why it's intuitive. If it's easy to explain, people probably will get it on themselves. That's why the older directives like v-if and v-for look very familiar for any JavaScript developer. You don't need to explain what v-if is doing because it's clear, right.

Drew: Chiar este.

Natalia: It's kind of insulting and same with v-else. V-if, v-else-if, v-else and that's it. And we intuitively built v-for with syntax that looks like for loop in JavaScript and same for the biggest part of the API. I think the main intention since Vue 1.x and I think Evan also stated this in his docs was to create something that you have pleasure to work with as a tool. It's all about developer experience as well and I think this is what attracted me in Vue back in time as well. I started with Vue when it was already in beta for version 2. I didn't work that much with Vue .1. I think were not that many people familiar with Vue from the first version but I was like, “It's so nice to use”. I'm just building the same stuff and it's just been a pleasure. I don't need to think about the tool, I'm thinking about what I'm going to build. And tool is not preventing me from doing this.

Natalia: And again, I need to state this next one will be totally personal opinion, not as a Vue Core Team member. I've been working with Angular from version two to version six on a commercial project and it's a great framework. There are many different terms, it has lots of abstractions, the dependency injection is amazing, TypeScript support is absolutely incredible but I constantly had the feel I am building a wall with huge heavy bricks. And I need to just make an effort to move every single brick. I mean, the wall is amazing. Bricks are still heavy and it's just hard being a developer. And after this, working with Vue is like, “Oh, it's just like a walk in the park”.

Drew: There can be a danger with software that when it's so well designed, it makes everything feel really easy, that it sort of gets branded as a toy, as not being as powerful as the things that are really complex. Do you think that's a risk with Vue, do you think it might be regarded as less serious as some of the other reactive frameworks simply because it's better designed?

Natalia: Oh, it was. It was for this reason and for a few more reasons as well. And honestly, for a good amount of time, I think I had this question, every single conference I'd been speaking at, “Would you recommend Vue for big sized project, for enterprise project, for like serious project.” And every single time I was like, “Yes, you can use it for small project, it's easy to scaffold something, you can use it for the big size project and honestly if we speak about enterprise size project, framework is the least of the issues you need to solve.

Natalia: You can take any framework on the market, be it old one, be it Amber, be it whatever else, be it Angular One and create a good and stable architecture. You can take any of the newest framework, like latest release Vue 3, Svelte, latest React and build absolutely, incredibly awful stuff. It depends on how build it and how your team is working on this, whatever you have there, how you planned all the architectural decisions because I think, none of the framework, maybe Angular a bit, is dictating an architecture. Angular kind of does this thing rest of them are like, “You're free. Build it.” And yes, also I think the issue with Vue, not an issue, but issue in minds of people and especially in minds of company management was it's not backed by a big company.

Natalia: You have an Angular and there is Google standing behind Angular. There is React and there is Facebook supporting React. There is Vue and who is the small Chinese guy, again this is like a stigma, there is a framework of one guy, what if Evan You is hit by a bus? There was an article, “What if Evan You is hit by a bus”, I swear on dev.to. I'm like, “What are they so scared” and big companies are probably like, “What if they drop support, what if they decide, maybe even he decides, if we speak about Evan, what if he decides he does not want to work on this.” And as we can see over years it's good and stable and it's developing and it's not an issue and honestly, I think when framework is completely open sourced and built with a team of people that are not engaged, that are not subjective, that are not under one big company it's actually better for the framework.

Natalia: Last year we introduced the RFC process. It's actually just a request for comments. We have an idea, we drop it, people come there and people argue there and if we create an RFC for anything, this means that it's not decided, it's not set in stone. We just have an idea and we want to hear what community thinks. I believe it's great because Vue is shaped by developers community. This is not just loud words. No, this is not a production slogan, by the community for the community, I remember we used this but it's true. It's actually shaped by community. It's not shaped for the needs of a certain company. Even for big companies, even for companies that are sponsoring Vue. They're not shaping the framework and I believe this is great.

Drew: It's quite telling when you mentioned the list of active Core Team members is 20ish people and they're all listed on the site and next to everyone it says what thy work on in the project and also where they work professionally. And just looking down the list of where people work professionally, I mean you're at GitLab and there are other people who are just independent consultants and it's not like 18 of the 20 people work at Big Corp. Everybody is just contributing from all over the place which, as you say, is a real point of strength.

Natalia: Yeah.

Drew: That there is no one big body controlling it that could, for their own business purposes, just say, “We're changing direction, we're not going to do this anymore” and pull away all that support and leave the project in a mess. It is just lots of individuals contributing and doing their best to make something good, which I think is a really strong foundation for something as important as a framework that people are building on top of.

Drew: You know I've spent the first half of this year learning React and then changing jobs and now learning Vue. Personally it feels to me like a breath of fresh air. And I really want to commend the work that you and your colleagues are doing on that. For those who are wanting to find out more about Vue, the 3.0 release or just generally about Vue, you can go to vuejs.org currently the version three specific version as we mentioned is linked to the little banner at the top. Maybe by the time you're listening to this, the site will have changed and will just be Vue, but that's also where you find the docs and in the docs is that really good migration guide that we mentioned. I've been learning all about Vue 3.0, what have you been learning about lately, Natalia?

Natalia: I've been learning about Apollo Client version three. It's funny, because if you look at versions and I've been watching both of them, they are going completely the same way. Apollo Client was 2.6 and Vue was 2.6. And Apollo promised a release for a year and they were delaying and delaying it. It was for a long time in beta then release candidate. Same was for Vue, we announced a release and then we were delaying it again and again and moved to beta a bit late and then moved to release candidate. And they released not the same time but not with a big time difference. Apollo I think was released in Summer, beginning of Summer.

Natalia: And we use Apollo as well. I use it professionally and now I kind of try to build something with Vue 3 and Apollo 3, which is not an easy task because Apollo did a good number of changes. Again, we're adjusting them at work but, for example, removing local resolvers, is like, “What do I do now? What do I do with my local queries?” If you're curious about Apollo Client version three definitely give it a try. It's interesting to see how it's evolving.

Drew: I'm definitely going to give that a try. I've used Apollo on a couple of projects and it's really great to see that pushing ahead as well. If you as a listener would like to hear more from Natalia, you can follow her on Twitter where she is N_Tepluhina and you can find collections of her articles and videos of her public speaking events, much of which is about Vue on her website, nataliatepluhina.com

Drew: Thanks for joining us today, Natalia. Do you have any parting words for us?

Natalia: Not really, but thank you for having me, it was a lot of fun to speak there.