De ce React JS este mai bun decât Angular sau Vue JS?

Este cunoscut faptul că paginile web sunt construite în principal cu limbaje de programare HTML, CSS și JavaScript (cele trei blocuri fundamentale ale web). Mai exact, HTML creează elemente pe paginile web, cum ar fi meniuri, texte și casete. În timp ce CSS este utilizat pentru a stila, proiecta și plasa aceste elemente pe paginile web. Și, în sfârșit, JavaScript, care facilitează interacțiunea și manipularea acestor elemente. Tema discuției noastre se va învârti în jurul JavaScript; în special React.Js și superioritatea sa față de Angular și Vue.Js.

În rezumat, React JS este mai bun decât Angular sau Vue JS datorită capabilităților sale superioare Virtual DOM, a suportului solid al comunității, a documentației bogate, a atributelor sale ușoare, a curbei de învățare gestionabile și a flexibilității sale pentru a permite funcționalitatea mobilă cu React Native.

JavaScript: limbajul Glue

Pentru a stabili o prioritate pentru cazul nostru care să justifice dominația lui React, vom recapitula câteva elemente de bază. JavaScript a fost adesea identificat ca un limbaj de lipici, folosit pentru asamblarea altor componente. Dintre cele trei blocuri de construcție web, HTML și CSS sunt mai puțin complexe (deși sunt utilizate în principal în scopuri de design static). Cu toate acestea, pentru dezvoltatorii care creează conținut web dinamic, JavaScript este o prioritate, ceea ce indică de ce este mult mai mare și mai complicat decât contemporanii săi. În esență, devenind standardul de facto folosit pe majoritatea paginilor web.

În consecință, în ultimul deceniu, mai multe cadre front-end au fost proiectate pe langa JavaScript pentru a ușura dezvoltarea și întreținerea site-urilor web. În consecință, începând cu 2020, cele mai populare dintre aceste cadre JavaScript front-end au fost React și Vue, apoi Angular.

Deoarece am stabilit pe scurt că cadrele și bibliotecile bazate pe JavaScript și JavaScript sunt instrumente esențiale pentru dezvoltarea web. Așadar, pentru a stabili contextul blogului nostru, să revenim pe scurt și să schițăm istoria și dezvoltarea JavaScript.

Istoria tehnologiilor web și a browserelor

Primul browser web a fost dezvoltat și lansat în decembrie 1990, Tim Berners-Lee fiind dezvoltator principal. El a dezvoltat și lansat simultan Hypertext Transfer Protocol (HTTP), protocolul de aplicație pentru World Wide Web pentru indexarea și navigarea site-urilor web.

Mai târziu, browserul web grafic inaugural, Mosaic, a fost lansat în 1993. În mod similar, în același an, a fost dezvoltat HTML. Acest lucru a fost cu câțiva ani înainte de a fi creat JavaScript, în timp ce CSS a fost lansat în 1996, la un an după JavaScript. Aceste trei limbi au format mai târziu o stivă de tehnologie numită „triada de tehnologii pe care dezvoltatorii web trebuie să le învețe”.

Dezvoltarea JavaScript

Una dintre celebrele urmăriri ale browserului Mosaic a fost browserul Netscape Navigator, lansat în 1994. În 1995, dezvoltatorii popularului Netscape de atunci l-au angajat pe Brendan Elch, un programator, pentru a crea un nou limbaj de scripting dinamic pentru paginile web. și manipularea datelor din partea clientului.

Ca răspuns la piață, Netscape a văzut nevoia de a crea site-uri web dinamice în loc să se limiteze la HTML. Din păcate, majoritatea site-urilor web timpurii au folosit doar HTML și, prin urmare, au fost ineficiente din punct de vedere computațional. Așadar, Netscape a fost obligat să conceapă un limbaj de scripting web simplu, țintit pentru manipularea DOM (model de obiect de document). Proiectul a fost, în consecință, inspirat de funcționalitatea și sintaxa Java - deși sunt fundamental diferite în ciuda unei asemănări sintactice minore.

Lansat oficial în martie 1996, JavaScript a activat în cele din urmă o nouă funcționalitate pe paginile web pe care numai HTML nu le putea. De exemplu, răspunderea la intrarea utilizatorului, afișarea ferestrelor pop-up și schimbarea culorilor elementelor. Netscape a fost achiziționat ulterior de America Online (AOL), care deținea și Mozilla, ceea ce a contribuit la creșterea exponențială a JavaScript ca standard de internet.

Apariția aplicațiilor XML, AJAX și a aplicațiilor cu o singură pagină

Mai târziu, la începutul anilor 2000, utilizatorii web au fost frustrați de răspunsurile lente ale serverului și de timpii lungi de transmisie a datelor. Acestea au fost agravate și mai mult de conexiunile la internet de viteză redusă care au marcat epoca. A condus la dezvoltarea stivei de tehnologie AJAX (XML asincron și JavaScript)

În acest sens, XML este un limbaj de marcare similar cu HTML, deși este utilizat pentru reprezentarea datelor în loc de afișarea conținutului. XML a devenit relevant în JavaScript odată cu crearea stivei AJAX.

Descris adesea ca o colecție de mai multe tehnologii, combinate ca un întreg, AJAX cuprinde XHTML, CSS, DOM, XML, XLST, XML HttpRequest și JavaScript. Și în cadrul AJAX, JavaScript leagă toate celelalte instrumente împreună . În consecință, AJAX a oferit o modalitate de a actualiza părți ale unei pagini HTML fără a descărca întregul conținut.

Aplicații cu o singură pagină

În general, toate cadrele JavaScript adoptă principiile de aplicare a unei singure pagini. În practică, o aplicație cu o singură pagină (SPA) este o aplicație compusă din componente individuale, care sunt încărcate în memorie la o vizită pe prima pagină și pot fi apoi înlocuite sau actualizate independent, astfel încât întreaga pagină web nu trebuie să fie reîncărcată. la fiecare acțiune a utilizatorului.

În plus, cu SPA-urile, componentele pot fi reutilizate și, astfel, cantitatea de cod necesară este redusă dramatic. Prima aplicație cu o singură pagină a fost implementată în 2002, JavaScript fiind unul dintre limbile țintă pentru implementare. Succesul aplicațiilor cu o singură pagină a fost în principal datorită tehnologiei AJAX anterioare și a priorității acesteia în comunicarea cu serverul.

Relația JavaScript-HTML

HTML poate funcționa fie ca o completare la JavaScript, ca și în cazul jQuery; sau ca sintaxă integrată, asemănătoare HTML, care este compilată în elemente HTML. Un exemplu în acest sens este sintaxa JSX, recomandată pentru utilizare la dezvoltarea cu React. Nu este nici JavaScript pur, nici HTML, ci o amalgamare a ambelor. Deci, fundamental, integrarea creării elementelor de bază și a funcționalității structurale a HTML cu capabilitățile dinamice ale JavaScript.

Relația CSS-HTML

CSS este folosit în mod obișnuit în combinație cu JavaScript. Un exemplu de format tradițional este implementarea proprietăților CSS în fișiere .css separate. Celălalt format este de a integra CSS în cadrele JavaScript în sine, prin biblioteci specializate, cum ar fi CSS-in-JS și componente cu stil. Astfel de biblioteci le permit dezvoltatorilor să scrie cod JavaScript care stilează elementele vizuale cu sintaxă asemănătoare CSS, care este apoi compilată în CSS pur în browser.

Apariția unei implementări pe partea de server a JavaScript

În cele din urmă, 2009 a venit cu lansarea Node.js, o implementare a JavaScript-ului pe server. Node.js a extins domeniul JavaScript la back-end, permițând JavaScript să devină un limbaj full-stack.

Node.js este în prezent cel mai utilizat mediu de rulare JavaScript, folosit pentru executarea codului JavaScript în afara mediului browser web. Utilizați pentru funcționalitatea serverului, creatorii Node.js și-au propus să dezvolte o alternativă mai eficientă la serverul Apache HTTP de atunci popular (utilizat adesea cu PHP). Node.js a fost creat folosind motorul JavaScript V8 de la Google, care a fost construit folosind C++.

Framework JavaScript front-end

Din moment ce am pus bazele, putem acum să punem cărămizile și să descoperim motivele înclinării noastre pentru React.js.

Framework versus biblioteci

Un argument comun este ceea ce se califică drept bibliotecă atunci când vorbim despre acest trio JavaScript. În mod ironic, React este ocazional menționat ca o bibliotecă și alteori ca un cadru. Cu toate acestea, pentru claritate și coerență, este adesea util să separați cadrele de biblioteci.

În special, o bibliotecă este o colecție pasivă de resurse nevolatile în care dezvoltatorilor li se oferă control asupra modului de utilizare a resurselor. Ele sunt de obicei foarte simple și îndeplinesc doar o anumită sarcină, astfel încât pot fi clasificate ca instrumente.

În timp ce cadrele sunt concepute pentru a fi mai puțin pasive și forțează dezvoltatorii să facă lucrurile într-un anumit mod, folosind un schelet în scopuri de dezvoltare și impunând un flux de control. De exemplu, unui dezvoltator i se oferă o modalitate definită de a dezvolta și configura o întreagă aplicație web. În timp ce o bibliotecă de aplicații web nu, oferă în schimb operațiuni mai simple subdomenii, cum ar fi solicitări de rețea sau operațiuni de stilare.

Deși Vue și Angular sunt considerate din punct de vedere tehnic cadre, există încă un dezacord cu privire la faptul dacă React este un cadru sau o bibliotecă. În timp ce dezvoltatorii originali ai React se referă la aceasta ca o bibliotecă, este totuși folosită mai frecvent ca un cadru.

De ce React este alternativa dominantă!

În retrospectivă, React a fost dezvoltat ca port JavaScript al XHP (o bibliotecă PHP creată de Facebook). În general, XHP a fost o modificare a PHP care a permis crearea de componente personalizate și a avut ca scop prevenirea atacurilor utilizatorilor rău intenționați. Mai târziu, din acest proiect de portare JavaScript a crescut JSX (JavaScript XML), care a devenit un limbaj standard comun pentru React.

Toate lucrurile luate în considerare, React are un domeniu de aplicare mai restrâns decât colegii săi, redând doar interfața cu utilizatorul aplicației. Cu toate acestea, menține beneficiul unei structuri ușoare și, prin urmare, este mai puțin costisitor de învățat și utilizat. Acestea fiind spuse, poate fi în continuare considerat un cadru, deoarece este folosit în același scop ca Vue și Angular.

Capabilități superioare DOM virtuale.

React a fost primul cadru care și-a optimizat funcționalitatea conform DOM. Acesta a fost un factor care a contribuit la succesul său, deoarece manipularea DOM este destul de costisitoare în ceea ce privește resursele de calcul utilizate. Mai exact, React a fost proiectat pentru a efectua cât mai puțină manipulare DOM posibil, utilizând gestionarea intuitivă a stării și DOM-ul virtual pentru a controla această manipulare.

Această exploatare a DOM-ului virtual face ca React să actualizeze mai rapid, în detrimentul consumului de memorie mai mare. Și pentru a executa actualizări rapide ale browserului DOM, react menține o copie a arborelui DOM virtual în memorie, care consumă memorie suplimentară. În consecință, popularitatea lui React a dat naștere a numeroase biblioteci derivate, cum ar fi React Native pentru dezvoltarea mobilă.

Flux de date unidirecțional

În React, datele sunt menite să curgă în jos și sunt denumite flux de date unidirecționale. În timp ce legarea de date bidirecțională a Angular și Vue face codul mai frumos și mai simplu, React compensează prin manevrabilitate și performanță superioare. Un avantaj notabil în argumentul nostru.

De ce React este mai bine decât unghiular

Să facem o comparație de la caz la caz pentru mai mult context, nu? Destinat dezvoltării mai mari de aplicații, Angular este un cadru JavaScript mai complet, în ceea ce privește caracteristicile de programare și dimensiunea fișierului.

Cu toate acestea, în comparație cu React, Angular are o umflare negativă, complexitate și un stil greu de trăsături de dezvoltare. Este recomandat pentru proiecte de dezvoltare mai mici și este menționat ca având o curbă de învățare abruptă. Pentru a exacerba lucrurile, AngularJS nu mai este în curs de dezvoltare activă.

Angular este construit în întregime în TypeScript și necesită mult cod, ceea ce îl face puțin complicat. Dimpotrivă, React este destul de „simplu”, iar orientarea sa inițială este concentrată pe controlul și manipularea vederii. În esență, permite dezvoltatorului să selecteze exact ceea ce are nevoie, dar beneficiază și de capacitatea de a utiliza un număr mare de pachete terțe. Deci, în consecință, React nu include o mulțime de cheltuieli generale în comparație cu Angular.

De ce React este mai bun decât Vue

Vue.js a fost creat de angajatul Google, Evan You. Evan a fost inspirat de AngularJS, dar a vrut să creeze o versiune mai simplificată și îmbunătățită a acestuia. În ciuda atributelor sale ușoare, a performanței grozave și a stilului de programare plăcut, aspectul negativ al Vue este stângăcia sa. Aici se vede superioritatea lui React.

De exemplu, nu există o bună practică clară în Vue.js, spre deosebire de React, ceea ce poate face dificilă menținerea aplicațiilor majore. Cu toate acestea, cele mai bune practici pentru React se găsesc în comunitate. De exemplu, crearea unui flux de lucru viabil este activată prin pachetul oficial create-react-app. Datorită punctelor de mai sus, React oferă în mod adecvat capacitatea de a scrie și de a menține o mulțime de cod complex.

Sintaxa ES6

În plus, dezvoltatorii pot utiliza sintaxa ES6 și cu Vue, cu toate acestea, React este proiectat mai optim decât Vue în acest sens. În timp ce Vue oferă în prezent suport TypeScript, suportul său nu este bine lustruit ca React folosind CRA (Create React App) cu suport TS într-o singură comandă. În plus, cu Vue, mai avem nevoie de pachete terțe cu decoratori și caracteristici personalizate pentru a crea o aplicație TypeScript adevărată și completă. Și, din păcate, documentația oficială nu oferă toate informațiile necesare pentru a începe. Un alt avantaj React!

Pe măsură ce ne cimentăm argumentul, să defalcăm în continuare discuția folosind anumite repere mai clare.

1. Dimensiunea cadrului

Deși dimensiunea pachetului minimizat al unui cadru din registrul npm este puțin probabil să descurajeze sau să încurajeze orice dezvoltator să selecteze cadrul, aceasta poate totuși să ne ajute argumentul. Angular este mult mai mare decât restul (187,6 kB), în timp ce React este de 6,4 kB, iar Vue se situează undeva la mijloc, la 63,5 kB.

În general, comparația dimensiunii pachetului arată că Angular acceptă și conține o gamă mai mare de funcționalități, în timp ce React este proiectat pentru o dezvoltare mai eficientă. Natura lui React oferă astfel dezvoltatorului mai puține opțiuni pentru a îmbunătăți eficiența, ceea ce este benefic pentru proiecte mai mici.

În plus, structura complicată a lui Angular duce la un risc potențial de performanță slabă în comparație cu React sau Vue, în special pentru alocarea memoriei.

2. Experiența de dezvoltare, curba de învățare și disponibilitate

În general, TypeScript nu este în sine mult mai greu sau mai ușor de învățat decât JavaScript. Cu toate acestea, nu este la fel de utilizat și conține mai puține biblioteci și documentație generală decât JavaScript. Acești factori, combinați cu diferențele de sintaxă și timpul necesar pentru a te obișnui cu codificarea într-o variantă ușor diferită de JavaScript, oferă un ușor avantaj pentru React față de Angular.

3. Situația bazată pe limbaj

Un alt punct cheie este React și Vue folosesc JavaScript ES6 ca limbaj de bază. ES6 este cel mai nou standard al industriei JavaScript din 2015. Pe de altă parte, Angular 1 folosește JavaScript ES5, care este versiunea anterioară, în timp ce Angular 2 se bazează pe TypeScript.

Deși TypeScript le permite dezvoltatorilor să scape de formatul tradițional de programare JavaScript, acesta, totuși, are comunități limitate de utilizatori. Aceasta înseamnă că există un risc potențial ca TypeScript să dispară dacă apare un alt nou superset sintactic strict de JavaScript. Dimpotrivă, JavaScript ES6 nu va dispărea curând, deoarece este criteriul actual al industriei atunci când se dezvoltă în JavaScript.

4. Documentare

Cu toată sinceritatea, disponibilitatea documentației este satisfăcătoare pentru toate aceste cadre. Acestea fiind spuse, este încă de remarcat faptul că documentația React este disponibilă în cel mai mare număr de limbi (16). Vue rămâne în urmă, cu documentație în 8 limbi, în timp ce documentația Angular este disponibilă în 4 limbi. Documentația React este coerentă și are o teorie unită în livrare pentru diferiți dezvoltatori.

Din păcate, situația cadru a Angular poate prezenta unele dificultăți pentru un dezvoltator, deoarece este împărțit între AngularJS și Angular 2. Mai mult, termenul „Angular” poate fi uneori la fel de ambiguu cu privire la cadru la care se referă în contexte online. Mai ales când navighezi pe site-uri mai mici și răspunsuri mai scurte.

5. Sprijin comunitar

În cea mai mare parte, React are cel mai mare suport comunității în prezent dintre toate cadrele JavaScript. Acest lucru este exemplificat prin amploarea forumurilor de discuții și a camerelor de chat. De asemenea, utilizatorii pot urmări ultimele știri și pot participa la discuții pe Facebook și Twitter.

Svelte Framework (O mențiune de onoare)

Am considerat că este înțelept să menționăm o intrare relativ nouă în sfera JavaScript. Dezvoltat de Rich Harris și lansat inițial în 2016, Svelte a câștigat o popularitate masivă pe tot parcursul anului 2019. A introdus mai multe îmbunătățiri în JavaScript, cum ar fi modificări în gestionarea statelor locale.

De asemenea, este de remarcat faptul că Svelte nu are DOM virtual și convertește codul scris în JavaScript în timpul construirii, în loc de timpul de execuție. În esență, ocolește conversia elementelor declarative în DOM real.

rezumat

Deși Vue are puțin mai multe stele Github, React este încă superior, fără puncte slabe vizibile și puncte forte de performanță mai bune. În esență, o performanță mai bună înseamnă timpi de încărcare mai mici și o satisfacție sporită a utilizatorului. În plus, pentru site-urile web comerciale, acest lucru are ca rezultat creșterea veniturilor, deoarece o reducere a timpului de încărcare de câteva milisecunde poate crește interacțiunea și păstrarea utilizatorilor.

În cele din urmă, viitorul peisajului framework-ului JavaScript este greu de prezis. Deși, așa cum sugerează dovezile, React va rămâne probabil cadrul dominant pentru viitorul previzibil. Cu toate acestea, pentru dezvoltatorii care doresc să dezvolte aplicații utilizând un cadru matur, bine susținut, cu o performanță excelentă și multă documentație, React este alegerea superioară!