Angular vs React vs Vue 2022

Există trei cadre pentru construirea de aplicații web despre care fiecare dezvoltator de front-end a auzit: React, Vue.js și Angular.

React este o bibliotecă UI, Angular este un cadru front-end complet, în timp ce Vue.js este un cadru progresiv.

Ele pot fi folosite aproape interschimbabil pentru a construi aplicații front-end, dar nu sunt 100% la fel, așa că este logic să le comparăm și să le înțelegem diferențele.

Fiecare cadru este bazat pe componente și permite crearea rapidă a funcțiilor UI.

Cu toate acestea, toate au o structură și o arhitectură diferite - așa că mai întâi, vom analiza diferențele lor arhitecturale pentru a înțelege filozofia din spatele lor.

Arhitectură

Reacţiona

React nu impune o structură specifică de proiect și, după cum puteți vedea din exemplul oficial „Hello World” de mai jos, puteți începe să utilizați React cu doar câteva linii de cod.

 ReactDOM.render(
  <h1>Bună ziua, lume!</h1>,
  document.getElementById('rădăcină')
);

React poate fi folosit ca o bibliotecă UI pentru a reda elemente, fără a impune o structură specifică de proiect și de aceea nu este strict un cadru.

React Elements sunt cele mai mici blocuri de construcție ale aplicațiilor React. Sunt mai puternice decât elementele DOM, deoarece React DOM se asigură că le actualizează eficient ori de câte ori se schimbă ceva.

Componentele sunt blocuri de construcție mai mari care definesc piesele independente și reutilizabile care vor fi utilizate în întreaga aplicație. Acceptă intrări numite recuzită și produc elemente care sunt apoi afișate utilizatorului.

React se bazează pe JavaScript, dar este în mare parte combinat cu JSX (JavaScript XML), o extensie de sintaxă care vă permite să creați elemente care conțin HTML și JavaScript în același timp.

Orice creați cu JSX poate fi creat și cu API-ul React JavaScript, dar majoritatea dezvoltatorilor preferă JSX pentru că este mai intuitiv.

Vue

Biblioteca de bază Vue.js se concentrează numai pe stratul View. Se numește cadru progresiv deoarece îi puteți extinde funcționalitatea cu pachete oficiale și terțe, cum ar fi Vue Router sau Vuex, pentru a-l transforma într-un cadru real.

Deși Vue nu este asociat strict cu modelul MVVM (Model-View-ViewModel), designul său a fost parțial inspirat de acesta. Cu Vue, veți lucra mai ales la stratul ViewModel, pentru a vă asigura că datele aplicației sunt procesate într-un mod care să permită cadrului să redeze o vizualizare actualizată.

Sintaxa șablonului Vue vă permite să creați componente View și combină HTML familiar cu directive și caracteristici speciale. Această sintaxă de șablon este preferată, chiar dacă sunt acceptate și JavaScript brut și JSX.

Componentele din Vue sunt mici, autonome și pot fi reutilizate în întreaga aplicație. Componentele de fișier unic (SFC) cu extensia .vue conțin HTML, CSS și JavaScript, astfel încât tot codul relevant să se găsească într-un singur fișier.

SFC-urile sunt modalitatea recomandată de organizare a codului în proiectele Vue.js, în special în cele mai mari. Instrumente precum Webpack sau Browserify sunt necesare pentru a transpila SFC-urile în cod JavaScript funcțional.

unghiular

În acest articol, discut despre Angular 2 și nu despre prima versiune a cadrului care este acum cunoscut sub numele de AngularJS.

AngularJS, cadrul original, este un cadru MVC (Model-View-Controller)). Dar în Angular 2, nu există o asociere strictă cu modelele MV*, deoarece se bazează și pe componente.

Proiectele din Angular sunt structurate în module, componente și servicii. Fiecare aplicație Angular are cel puțin o componentă rădăcină și un modul rădăcină.

Fiecare componentă din Angular conține un șablon, o clasă care definește logica aplicației și metadate (decoratori). Metadatele pentru o componentă îi spune lui Angular unde să găsească blocurile de care are nevoie pentru a crea și a-și prezenta vizualizarea.

Șabloanele unghiulare sunt scrise în HTML, dar pot include și sintaxa șablonului unghiular cu directive speciale pentru a scoate date reactive și a reda mai multe elemente, printre altele.

Serviciile din Angular sunt folosite de Componente pentru a delega sarcini de logica de afaceri, cum ar fi preluarea datelor sau validarea intrărilor. Ele sunt o parte distinctă a aplicațiilor Angular. Deși Angular nu impune utilizarea acestora, este foarte recomandat să structurați aplicațiile ca un set de servicii distincte care pot fi reutilizate.

Angular este construit în TypeScript, astfel încât utilizarea sa este recomandată pentru a obține cea mai simplă experiență, dar este acceptat și JavaScript simplu.

Popularitate

Reacţiona

React este unul dintre cele mai populare proiecte JavaScript cu 160.000 de stele pe GitHub. Este dezvoltat și întreținut de Facebook și este folosit intern în multe dintre proiectele lor. În plus, alimentează peste 2 milioane de site-uri web, conform statisticilor de utilizare BuiltWith.

Vue

Dintre cele trei cadre, Vue are cele mai multe stele pe GitHub, cu 176.000 de stele. Proiectul este dezvoltat și condus de fostul Googler Evan You. Este un proiect foarte puternic, independent în comunitatea open-source și este folosit de peste 1 milion de site-uri web, potrivit BuiltWith.

unghiular

Angular este dezvoltat de Google, dar, în mod surprinzător, nu este folosit în unele dintre produsele lor emblematice, cum ar fi Căutare sau Youtube. Este adesea folosit în proiecte de întreprindere și alimentează peste 97.000 de site-uri web bazate pe datele BuiltWith.

Este cel mai puțin marcat dintre cele trei cadre, cu 68.000 de stele pe GitHub. Cu toate acestea, la trecerea de la Angular 1 la Angular 2, au creat un depozit complet nou în loc să continue proiectul AngularJS, care are și 59.000 de stele.

Ecosistem

Pachetele open-source vă economisesc timp prețios atunci când dezvoltați aplicații. Nu doar atât, dar sunt adesea mai bune decât componentele și pachetele personalizate, deoarece sunt testate în luptă.

Este important să vă uitați la disponibilitatea componentelor gata de utilizare, a temelor și a altor instrumente care vă pot ajuta să creați mai ușor funcții noi.

Reacţiona

Multe aplicații front-end se bazează pe managementul global al stării pentru a stoca informații, cum ar fi cine este conectat și alte setări ale utilizatorului.

Cel mai popular proiect pentru managementul stării JavaScript este Redux. Majoritatea dezvoltatorilor folosesc legăturile oficiale React pentru Redux, care sunt întreținute de echipa Redux.

Datorită popularității React, găsirea componentelor de intrare și a elementelor gata de utilizare este extrem de ușoară. Toate sunt doar la o căutare pe Google sau GitHub.

Ecosistemul React include și React Native, care vă permite să construiți aplicații native iOS și Android dintr-o singură bază de cod scrisă în React. Deci, React poate fi o alegere excelentă pentru construirea de aplicații mobile, de asemenea, folosind tehnologii web.

React face parte din stiva MERN, care conține MongoDB, ExpressJS, React și NodeJS. Lucrul minunat la această combinație este că o singură limbă - JavaScript - alimentează întreaga aplicație.

Vue

Chiar dacă Redux poate fi folosit în Vue, nu există legături oficiale. Dar asta nu ar trebui să vă îngrijoreze, deoarece Vuex este biblioteca oficială de management de stat creată special pentru aplicațiile Vue. Pe lângă faptul că se integrează foarte bine cu Vue, este ușor să depanați folosind instrumentele pentru dezvoltatori Vue.

În primele zile ale Vue, era mai greu să găsești componente gata de utilizare. Deoarece comunitatea a crescut, există o gamă largă de componente de intrare și elemente avansate pe care le puteți folosi pentru a vă accelera dezvoltarea.

Pentru dezvoltarea aplicațiilor mobile, există un proiect în curs de dezvoltare numit Weex. Weex este dezvoltat și folosit de Alibaba, dar nu este la fel de matur și puternic ca React Native. În plus, deoarece proiectul este dezvoltat și utilizat mai mult în China, este mai greu să găsești documentație și soluții la probleme în limba engleză.

Vue se integrează bine cu Laravel și de aceea sunt adesea folosite împreună. Laravel oferă schele JavaScript și CSS complete pentru a permite utilizarea Vue în proiecte noi.

unghiular

Pentru managementul de stat în Angular, puteți utiliza proiectul NgRx. A fost inspirat de Redux, dar este creat special pentru Angular.

Ca și în cazul Vue și React, există multe componente gata de utilizare pe care le puteți importa în proiectele dvs. Ceea ce este ușor diferit la Angular este că există multe componente oficiale în proiectul Angular Material. Acesta este un proiect oficial al Google care oferă componente Material Design pentru aplicații Angular.

Puteți crea aplicații mobile multiplatforme în Angular folosind NativeScript. Acceptă și Vue, dar suportul Angular este mai matur.

Angular face parte din binecunoscutul stack MEAN care combină Angular cu MongoDB, ExpressJS și NodeJS. Similar cu stiva MERN, se bazează în întregime pe JavaScript atât pentru front-end, cât și pentru back-end.

Tehnologii comune

Angular, React și Vue pot fi folosite pentru a dezvolta aplicații web progresive, cunoscute și sub numele de PWA.

PWA nu sunt aplicații mobile, ci aplicații web pe care utilizatorii de smartphone-uri le pot adăuga ca scurtături pe ecranul lor de pornire și oferă un aspect și o senzație similară cu aplicațiile mobile native.

Puteți găsi, de asemenea, șabloane premium și aplicații prefabricate pentru fiecare cadru, dar Angular și React au mai multe opțiuni premium disponibile decât Vue.

Performanţă

Atunci când alegeți un cadru sau o bibliotecă, trebuie să vă gândiți și la performanță.

În multe cazuri, nu va trebui să vă faceți griji cu privire la performanță, mai ales dacă construiți un proiect mic. Cu toate acestea, cu cât un proiect crește în amploare și complexitate, performanța poate (și va) deveni o preocupare.

Este important de reținut că calitatea dezvoltării și respectarea celor mai bune practici atunci când vine vorba de performanța web este mai importantă decât alegerea cadrului.

Dar, deoarece există unele metrici de performanță și diferențe, le voi analiza și voi explica modul în care fiecare ar putea afecta eforturile dvs. de dezvoltare.

JS Framework Benchmark: Angular vs React vs Vue

Rezultatele JS Framework Benchmark arată că toate performează destul de bine la majoritatea benchmark-urilor, cum ar fi crearea sau adăugarea de rânduri într-un tabel.

După cum puteți vedea mai sus, Vue este considerabil mai lent decât Angular și React la selectarea rândurilor. Pe de altă parte, Angular și React nu sunt foarte eficiente la schimbarea rândurilor.

Acestea sunt singurele diferențe substanțiale în randarea benchmark-urilor și, în majoritatea cazurilor, nu vor produce rezultate vizibile. Deoarece selectarea rândurilor este o funcționalitate mai comună decât schimbarea rândurilor, aș spune că acest benchmark îl plasează pe Vue pe locul trei în spatele Angular și React, care împart poziția de sus.

Când vine vorba de memorie și timp de pornire, React și Vue au rezultate foarte bune, dar Angular este puțin mai lent. Angular poate dura 150 ms pentru a porni un script de bază și necesită mai multă memorie pentru a rula.

Perf Track: Angular vs React vs Vue

Perf Track de la Google Chrome Labs arată date de producție de la mii de site-uri web. Aceste statistici sunt afectate de multe alte lucruri și nu numai de cadrul de alegere, ci să ne uităm la numere.

Prima vopsea satisfăcătoare

Site-urile Web Vue și React se clasează mai sus pentru această măsurătoare, comparativ cu Angular, care poate dura mai mult timp pentru a porni și a prezenta conținut utilizatorului.

Cea mai mare vopsea plină de conținut

Angular este, de asemenea, cel mai lent dintre cele trei cadre în redarea unei pagini complete, doar 27 la sută dintre site-urile web Angular obțin scoruri în intervalul acceptabil.

Întârziere la prima intrare

Pentru toate cele trei cadre, mai mult de 80% dintre site-uri web se află în intervalul acceptabil pentru prima întârziere de intrare, ceea ce arată cât este nevoie până când utilizatorul poate interacționa cu pagina.

Octeți JavaScript

Cele mai ușoare aplicații sunt de departe cele dezvoltate cu Vue, cu 68% dintre aplicațiile Vue încărcând mai puțin de 1 MB de JavaScript. Pe de altă parte, aplicațiile Angular și React tind să aibă o dimensiune de cod mai mare.

Cum să utilizați aceste valori

Puteți vedea o tendință din aceste cifre, dar nu ar trebui să vă grăbiți să trageți concluzii. Pentru ultima cifră, de exemplu, o explicație ar putea fi că Vue este folosit pentru a dezvolta aplicații mai ușoare, în timp ce Angular este folosit pentru proiecte mai mari.

Statisticile vă pot ajuta să luați o decizie bună, dar nu le puteți folosi pentru a demonstra că un cadru este mai rapid sau mai bun decât celălalt.

Caracteristici avansate

Pentru aplicații mai avansate, cadrul front-end în uz ar trebui să poată îndeplini unele sarcini care îmbunătățesc performanța și pot scala mai bine.

Două tehnologii cheie sunt randarea pe server (SSR) și virtualizarea.

Reacţiona

React acceptă randarea pe server cu pachetul oficial ReactDOMServer. Pentru virtualizare, puteți utiliza un instrument popular terț numit React Virtualized.

Vue

Redarea pe server este acceptată în Vue și cu pachetul oficial SSR. În plus, puteți utiliza și cadrul Nuxt.js, care este construit pe Vue și acceptă SSR.

Opțiunile de virtualizare din Vue nu sunt atât de puternice, din păcate. După părerea mea, Vue Virtual Scroll List este cea mai bună soluție pentru defilarea virtuală, dar este puțin cu probleme și nu este la fel de stabilă ca opțiunile pentru React și Angular.

unghiular

Angular are pachetul oficial Angular Universal pentru SSR și o componentă oficială pentru derularea virtuală și redarea eficientă a listelor mari.

Curbă de învățare

Cât de ușor este să înveți fiecare dintre aceste cadre?

Pentru a răspunde la această întrebare, trebuie să ne uităm la complexitatea fiecărui cadru și la conceptele pe care le introduc.

Reacţiona

În cazul său de utilizare cel mai de bază, React este cel mai puțin complex dintre cele trei cadre. Asta pentru că trebuie doar să importați biblioteca, apoi puteți începe să scrieți aplicația React cu câteva linii de cod.

Dar, în afară de exemplul Hello World, majoritatea aplicațiilor React sunt bazate pe componente și nu redă doar câteva elemente pe pagină.

Un lucru pe care unii dezvoltatori îl consideră ciudat sau dificil la React este faptul că învățarea JSX este o stradă cu sens unic. Puteți folosi și JavaScript brut, dar deoarece majoritatea dezvoltatorilor React folosesc JSX, învățarea acestuia este aproape inevitabil.

Acesta este principalul lucru care poate face curba de învățare a lui React puțin mai abruptă, dar în afară de asta, este o bibliotecă ușor de învățat pentru dezvoltatorii care cunosc JavaScript și înțeleg conceptele de dezvoltare web.

Vue

Vue este puțin mai complex de configurat decât React. Îl puteți folosi ca bibliotecă pentru a defini componentele pe care le puteți utiliza în HTML - dar similar cu React, nu așa sunt construite majoritatea proiectelor.

Majoritatea proiectelor Vue vor avea o componentă rădăcină numită App.vue și o serie de componente secundare pentru afișarea diferitelor lucruri.

Când vine vorba de sintaxă, singurul lucru nou pe care trebuie să-l înveți este sintaxa șablonului Vue, care este foarte ușor de înțeles dacă cunoști HTML. Directivele de bază, cum ar fi v-if și v-for pentru randarea condiționată și redarea listelor, sunt ușor de înțeles chiar și pentru începători.

În plus, componentele cu fișier unic ale Vue păstrează tot codul front-end într-un singur loc, facilitând organizarea de noi proiecte.

Vue este cel mai ușor de învățat, după părerea mea, datorită simplității și sintaxei intuitive.

unghiular

Angular are cea mai complexă structură de proiect dintre cele trei și, deoarece este un cadru front-end complet, se bazează pe mai multe concepte.

Pe lângă componente, Angular acceptă module și servicii. Se așteaptă să scrieți și să vă proiectați baza de cod într-un mod specific care să vă facă proiectul mai ușor de întreținut atunci când se extinde.

În ceea ce privește sintaxă, deoarece Angular funcționează cel mai bine cu TypeScript, este important să cunoașteți TypeScript atunci când construiți un proiect Angular.

La fel ca și în cazul Vue, trebuie să vă familiarizați și cu sintaxa asemănătoare HTML, astfel încât să puteți începe să codificați noi funcții UI cu Angular.

În opinia mea, Angular este cel mai greu de învățat pentru un dezvoltator mediu, deoarece este mai complex și se bazează pe TypeScript.

Previziuni de viitor

Multe proiecte și cadre open-source se estompează în uitare și devin neîntreținute. Ar trebui să vă faceți griji în legătură cu oricare dintre cadrele pe care le discutăm aici?

Deși nu putem anticipa pe deplin ce se va întâmpla, activitatea de dezvoltare continuă este un bun indicator al stării de sănătate a acestor proiecte. Popularitatea și creșterea sunt, de asemenea, valori importante pentru a prezice longevitatea unui proiect, așa că haideți să aruncăm o privire asupra fiecărui cadru.

Reacţiona

React v17.0 a fost lansat, dar, în mod surprinzător, nu include caracteristici noi pentru dezvoltatori.

Schimbarea majoră este că această nouă versiune facilitează actualizarea React în sine. Puteți face upgrade doar câteva părți ale React de la versiunea mai veche la cea mai nouă, fără a fi nevoie să actualizați întregul proiect.

Dacă aplicația dvs. se bazează pe funcții care se modifică sau sunt depreciate cu noua versiune, puteți păstra versiunea veche pentru a menține activa această funcționalitate. Această actualizare face din React o alegere excelentă pe termen lung, deoarece face mai ușor să rămâneți la curent cu noile versiuni.

React a crescut cu 44% față de anul trecut în descărcări săptămânale npm. În cifre absolute, este încă cel mai descărcat dintre cele trei proiecte.

Vue

Vue 3 a fost lansat în septembrie 2020 și abordează multe probleme serioase pe care Vue 2 le are în proiectele mari. Introduce API-ul Composition care este inspirat de React Hooks și facilitează reutilizarea logicii între componente.

Întregul proiect a fost rescris în TypeScript, ceea ce îmbunătățește suportul TypeScript în noile proiecte Vue, în timp ce face proiectul mai ușor de întreținut.

Vue 3 este o actualizare foarte necesară și face ca Vue să fie mai potrivită pentru proiecte la scară largă.

Descărcările săptămânale ale Vue au crescut cu 87% față de anul trecut, făcând din Vue cadru cu cea mai rapidă creștere în termeni relativi. Dacă Vue poate menține această rată de creștere, atunci cu siguranță va depăși Angular în curând.

unghiular

Angular a introdus recent Compilatorul Ivy. Reduce timpul de construire, optimizează activele, permite testarea mai rapidă și, în general, îmbunătățește experiența dezvoltatorului.

Echipa Angular lansează actualizări majore de mai multe ori pe an, care pot include funcții noi sau pot aduce doar cadru-ul la viteză cu noile versiuni de browser.

Angular a crescut cu aproximativ 50% în descărcări săptămânale de anul trecut, deci este încă un proiect popular.

Concluzie

Angular, React și Vue sunt toate în curs de dezvoltare foarte activă. Ei lansează în mod regulat versiuni noi și le mențin pe cele existente. Deoarece nivelul actual de suport este ridicat în fiecare caz, puteți utiliza în siguranță oricare dintre aceste cadre.

Este important să rețineți că Angular nu crește la fel de repede ca înainte, în timp ce Vue - chiar dacă a început mai recent - pare să crească foarte mult.

După cum sa menționat anterior, nu putem prevedea ce cadre vor rămâne relevante pe termen lung, dar fiecare proiect are o comunitate grozavă în spate și este în continuă evoluție.

Scopul meu cu acest articol a fost să explic diferențele arhitecturale, să defalc punctele forte și punctele slabe ale fiecărui cadru și să le compar oriunde este aplicabil.

Înainte de a intra într-un nou cadru, există câteva lucruri de luat în considerare.

În primul rând, experiența echipei dumneavoastră poate fi un factor decisiv atunci când alegeți o nouă tehnologie.

În mod similar, trebuie să luați în considerare talentul disponibil în zona dvs., astfel încât să puteți angaja dezvoltatori pentru proiectul dvs.

În cele din urmă, când vine vorba de proiectul în sine, complexitatea și domeniul de aplicare pot afecta, de asemenea, alegerea cadrului.

Luând în considerare toate diferențele cheie, sper că puteți decide care este cel mai bun cadru front-end pentru obiectivele și nevoile dvs.