Comparația ultimelor cadre JavaScript: Angular vs React

O întrebare pe care mi se pune aproape zilnic este că ar trebui să încep cu ReactJS sau Angular? Cu toate acestea, înainte de a continua, permiteți-mi să vă dau o declinare a răspunderii.

Nu este un blog în care să-l lovesc pe unul sau pe celălalt sau să spun că ar trebui să folosești întotdeauna unul peste celălalt. Fiecare dezvoltator și fiecare proiect sunt complet diferite și au un set diferit de cerințe, așa că a spune că ar trebui să utilizați întotdeauna ReactJS sau să folosiți întotdeauna Angular este destul de stupid.

Argumentul logic

Puteți argumenta că Angular este un cadru și React este, din punct de vedere tehnic, o bibliotecă în sine. Nu neg acest fapt, dar acesta este argumentul în care nu vreau să intru acum. Există pachete pe care le puteți adăuga la React, care îl vor transforma într-un cadru care concurează direct cu Angular. Comparăm cele două ecosisteme, nu cadrul exact versus biblioteca exactă.

Curba de învățare

Să începem cu Angular. Încă o altă declinare a răspunderii: când spun Angular, vorbesc despre Angular 4, nu despre AngularJS.

Angular este un cadru mare, ceea ce înseamnă că este puternic și include multe. Sunt multe de învățat. Veți auzi o mulțime de vocabular nou intimidant, cum ar fi injecția de dependență, decoratori de directive, țevi etc. Apoi trebuie să vă ocupați de Typescript, care este JavaScript plus o grămadă de alte caracteristici, inclusiv tastarea statică.

Angular este mai obișnuit decât React, ceea ce este unul dintre avantajele în opinia mea pentru că cu React poți face același lucru în un milion de moduri diferite. Cu Angular, există în general una sau două moduri de a face anumite lucruri, ceea ce le face mai ușor de urmat și vă oferă instrucțiuni mult mai clare despre ceea ce ar trebui să faceți.

Dar, din nou, se reduce la preferințe. S-ar putea să vă placă flexibilitatea de a face lucrurile în moduri diferite. După cum am menționat, ReactJS este o bibliotecă dacă vorbim doar despre biblioteca de bază, este mult mai mică și mult mai ușor de învățat decât cadrul Angular. Puteți spune că veți învăța React într-un timp mai scurt. React este o bibliotecă de vizualizare grozavă în sine, dar nici măcar nu este la fel de puternică pentru aplicații mari. Dacă doriți rutare, validare, solicitări HTTP în React, va trebui să instalați alte pachete și asta se adaugă la curba de învățare.

Dacă te uiți la codul React de la doi dezvoltatori diferiți, probabil că vor arăta complet diferit, indiferent dacă fac solicitări HTTP sau se ocupă de stare și proprietăți. Toate aceste lucruri pot fi tratate foarte diferit și de multe ori pot fi în mod greșit.

Găsești cele mai bune practici și toate problemele dispar, dar asta se adaugă la curba de învățare.

Spre deosebire de Angular React, nu folosește șabloane. Folosește ceva numit JSX sau extensie JavaScript sau extensie de sintaxă JavaScript, care ne permite să încorporam HTML în JavaScript. La început, acest lucru poate părea puțin ciudat. Mai ales, când probabil ați fost învățat să vă separați marcajul și JavaScript.

Gândiți-vă la asta ca și cum ați introduce HTML în JavaScript cu câteva modificări diferite: nu puteți utiliza atributul de clasă și trebuie să utilizați numele clasei.

În cele din urmă, avem Redux. React este adesea folosit cu Redux sau Flux, care sunt manageri de stat la nivel de aplicație. După părerea mea, Redux este foarte greu doar să îl configureze și să înveți conceptele despre acesta.

Cred că este suprafolosit. Cred că mulți dezvoltatori folosesc redux acolo unde nu este necesar. Nu aveți nevoie de el pentru aplicații mai mici, dar mulți dezvoltatori insistă să îl folosească. Asta se reduce din nou la preferințe. Redux este foarte puternic, nu vreau să elimin asta. Când vorbim despre curba de învățare, este al naibii de greu de înțeles.

Câștigător: Este o cravată

Performanţă

Nu este corect să comparăm direct performanța Angular to React. Angular este un cadru complet din față în spate, care include rutare, instrumente de formulare, bibliotecă HTTP, extensii reactive etc. Toate aceste caracteristici umflă cadrul și îl fac mai lent. Cu toate acestea, React este doar o bibliotecă de vizualizare, care este mult mai mică și mai rapidă.

Odată ce începeți să adăugați pachete precum routerul, clientul HTTP sau orice veți adăuga la aplicația dvs. React, atunci începe să apară puțin mai mult până unde este Angular și apoi puteți începe să le comparați corect, dar chiar și după aceea, React încă câștigă departamentul de performanță. Este o tehnologie foarte rapidă în general.

Trecerea de la Angular 2 la Angular 4 sub capotă au făcut destul de mult pentru a crește performanța. Angular 4 are performanțe mai bune decât Angular 2. Cu toate acestea, React câștigă în continuare la departamentul de performanță.

Angular vs React. Sursa: Academind.com

Câștigător: Reacționează

Caracteristici

Ambele cadre au multe aceleași caracteristici și avantaje generale: vă organizează codul, sunt bazate pe componente, oferă markup dinamic etc. Sunt obișnuiți să facă multe aceleași lucruri și împărtășesc un multe din aceleași caracteristici.

Vom analiza câteva dintre caracteristicile individuale. Angular are, evident, mult mai multe caracteristici decât React la bază. Permiteți-mi să vă reamintesc, vorbim despre două ecosisteme și pachete comune care sunt utilizate cu React.

Angular este un cadru complet inclus. Vine cu un router de componente, extensii reactive pentru observabile, un client HTTP, un modul de formular pentru validare și lista poate continua. În plus, oferă legare bidirecțională a datelor într-un mod în care niciun alt cadru nu o face cu adevărat. Legarea datelor de la vizualizare la model este extrem de ușoară folosind directiva ng model.

Angular acceptă, de asemenea, MVC (model View controller) sau cel puțin diferite aspecte din acel model de design. vine, de asemenea, cu funcții care vă permit să implementați cu ușurință testarea: atât testarea unitară, cât și testarea end-to-end. Angular este plin de funcții pentru a construi aplicații front-end la nivel de întreprindere. Pe de altă parte, React nu include prea mult la bază. Cu toate acestea, pot fi adăugate lucruri pentru a-i oferi caracteristicile pe care Angular le include imediat, plus unele suplimentare.

React folosește un DOM virtual care este foarte puternic. Își creează propria versiune ușoară a Dom-ului real și include și actualizează doar ceea ce este necesar, mai degrabă decât să reîmprospăteze întregul lucru. Virtual DOM este un motiv major pentru care React este extraordinar de rapid.

React folosește JSX, care este mai puternic decât șabloanele standard, deoarece puteți pune absolut orice tip de JavaScript dorit în el. JSX nu este necesar pentru a utiliza React, dar face lucrurile mult mai ușor. Nu mă gândesc la niciun motiv pentru care nu ați folosi JSX și cu Angular. React face, de asemenea, o treabă foarte bună în gestionarea stării și proprietăților componentelor. Face ca datele să fie foarte ușor de lucrat și de transferat între componente. Trecând date între componente, Angular este mult mai dificil decât să o faci în React.

Core React este greu de menținut starea la nivel de aplicație. Starea componentelor este ușoară, dar dacă doriți un adevărat management al stării la nivel de aplicație, atunci veți avea nevoie de Redux sau Flux, ceea ce am spus mai devreme este destul de confuz de învățat. Pachetele externe care sunt adesea folosite ca noul router React versiunea 4 sunt puțin greu de înțeles, dar sunt și foarte puternice odată ce învață să-l rulezi și să îl configurezi. Există o mulțime de moduri diferite de a-l folosi, de asemenea. React nu are o componentă HTTP de bază ca Angular, dar puteți folosi Fetch sau Axios, care este un client HTTP extern, iar apoi Enzyme este popular pentru atestarea React. Există unele dintre pachetele diferite care sunt utilizate în mod obișnuit cu React, chiar dacă nu fac parte din biblioteca reală.

În timp ce ambele tehnologii au un număr bun de caracteristici, dacă doar comparați tehnologiile de bază, atunci Angular este câștigătorul.

Câștigător: Angular

Scule

Angular și React au niște interfețe de linie de comandă destul de frumoase. Angular CLI și aplicația Create React sunt ambele destul de grozave și ne permit cu adevărat să eficientizăm dezvoltarea. Angular CLI este puțin mai puternic, deoarece putem genera rapid lucruri precum componente și servicii. Create React nu poate face asta. Trebuie să creați totul singur în ceea ce privește fișierele și structura de bază. Ambele sisteme folosesc pachetul web, au propriile lor servere de dezvoltare cu încărcare automată și au instrumente de compilare și compilare. Evident, Angular are sarcina suplimentară de a transpila Typescript. CLI are un script pentru asta atunci când rulăm ng serve. Tot ce s-a întâmplat în culise. Folosește ceva numit TSC sau Typescript Compiler pentru asta și ambele au și instrumente de testare. Aplicația Create React folosește Jest pentru testare, iar apoi una dintre părțile acestor instrumente este abilitatea de a construi aplicația dvs. în producție în active statice pe care le puteți încărca pur și simplu pe un server sau le puteți plasa în folderul client back-end.

Dacă este o aplicație full stack, acestea sunt cu adevărat importante. Nu trebuie să le folosiți. Puteți construi o aplicație React doar de la zero cu pachetul web. Acestea fac mult mai ușor nu doar construirea aplicației, ci și compilarea și construirea acesteia pentru producție.

Amândoi sunt drăguți chiar și în acel departament.

Câștigător: Angular

Ecosistem

După cum am spus, ambele tehnologii au propriile lor ecosisteme, care acum se răspândesc cu mult dincolo de browserul web.

Ionic este un cadru hibrid popular, care este o aplicație Angular care rulează în interiorul unui wrapper nativ pentru aplicații mobile. Puteți crea aplicații mobile folosind Angular. Aplicațiile hibride pot fi puțin neplăcute în comparație cu aplicațiile native. Experiența utilizatorului poate să nu fie atât de grozavă uneori – nu la fel de rapidă și receptivă. Dintre diferitele cadre hibride, Ionic 3 este cel mai bun. Există, de asemenea, NativeScript, care ne permite să construim adevărate aplicații native iOS și Android cu Angular, precum și JavaScript.

Cu toate acestea, NativeScript nu pare să fie la fel de bun ca React Native de la Facebook, cel puțin în acest moment. Angular are, de asemenea, o bibliotecă de componente de design de materiale dacă sunteți un fan al designului de materiale. Angular Universal este un proiect seed care poate fi folosit pentru a reda Angular pe partea de server. Există și magazinul NgRx, care este o bibliotecă de management de stat inspirată de Reax redux. Se bazează pe starea mutată de reductorii de la egal la egal. Are și integrare cu extensiile Reactive.

Ai fi observat. Odată, unul dintre ei face ceva, celălalt copia într-un mod diferit. React și Angular au devenit Microsoft și Apple de cadre JavaScript.

React are un ecosistem destul de mare. Are React nativ, care este popular. Este cea mai bună modalitate de a crea aplicații mobile cu tehnologii web. React Native este rapid și multe dintre aplicații, dacă sunt construite corect, sunt chiar acolo cu aplicații native care sunt construite pe Swift sau Java. React are o bibliotecă de design de materiale numită Material-UI, care seamănă la fel cu componenta de design de materiale a lui Angular, dar este mai matură. JS este un cadru pentru redarea aplicațiilor React pe server. Își propune să facă acest lucru în cel mai simplu mod posibil, astfel încât să poată fi comparat cu Angular Universal. MobX este o altă modalitate de a gestiona starea. Funcționează puțin diferit față de redux. Oferă un set de decoratori pentru a defini observabile și observatori și introduce logica reactivă în starea ta.

Storybook este un mediu de dezvoltare pentru React. Vă permite să răsfoiți o bibliotecă de componente, să vizualizați diferite stări ale fiecărei componente și să dezvoltați și să testați componentele în mod interactiv. Reactive VR transformă React în realitate virtuală. React desktop este o bibliotecă JavaScript construită pe deasupra bibliotecii Reacts, care se presupune că aduce o experiență desktop nativă pe web, cu multe componente macOS și Windows 10. Ecosistemul React este extrem de mare și puternic. React își face loc în fiecare aspect al tehnologiei și este un câștigător clar.

Câștigător: Reacționează

Oamenii în costume și cravate folosesc Angular, iar hipsterii cu barbă zdravănă folosesc React.

Concluzia: este o cravată

Dacă decideți între aceste cadre, priviți diferitele categorii și vedeți ce vă interesează. Încercați-le pe amândouă și vedeți pe care o alegeți mai repede. Cercetați mai mult decât acest blog. Nu vei primi niciodată toate informațiile de care ai nevoie de la un blog, așa că citește mai multe.

Dacă vă uitați la un ecosistem mai mare care include dezvoltarea de aplicații mobile native, alegeți React fără să vă gândiți de două ori. Dacă sunteți după caracteristici, Angular este uriaș. Există mai multe caracteristici decât aveți nevoie.