Perché React JS è meglio di Angular o Vue JS?

È risaputo che le pagine Web sono costruite principalmente con linguaggi di programmazione HTML, CSS e JavaScript (i tre elementi costitutivi fondamentali del Web). In particolare, l'HTML crea elementi sulle pagine web, come menu, testi e riquadri. Mentre i CSS vengono utilizzati per lo stile, la progettazione e il posizionamento di quegli elementi nelle pagine web. E infine JavaScript, che facilita l'interazione e la manipolazione di questi elementi. Il tema della nostra discussione ruoterà attorno a JavaScript; in particolare React.Js e la sua superiorità su Angular e Vue.Js.

In sintesi, React JS è migliore di Angular o Vue JS grazie alle sue capacità di Virtual DOM superiori, al suo solido supporto per la community, alla ricca documentazione, ai suoi attributi leggeri, alla curva di apprendimento gestibile e alla sua flessibilità per consentire la funzionalità mobile con React Native's.

JavaScript: il linguaggio della colla

Per stabilire una precedenza per il nostro caso che giustifica il predominio di React, ricapitoliamo alcune nozioni di base. JavaScript è stato spesso identificato come un linguaggio di colla, utilizzato per l'assemblaggio di altri componenti. Dei tre elementi costitutivi del Web, HTML e CSS sono meno complessi (sebbene utilizzati principalmente per scopi di progettazione statica). Tuttavia, per gli sviluppatori che creano contenuti web dinamici, JavaScript è una priorità, il che indica perché è molto più grande e complicato dei suoi contemporanei. Essenzialmente, diventando lo standard de facto impiegato nella maggior parte delle pagine web.

Di conseguenza, nell'ultimo decennio, più framework front-end sono stati progettati su JavaScript per facilitare lo sviluppo e la manutenzione dei siti web. Di conseguenza, a partire dal 2020, i più popolari di questi framework JavaScript front-end erano React e Vue, poi Angular.

Poiché abbiamo brevemente stabilito che i framework e le librerie basati su JavaScript e JavaScript sono strumenti critici per lo sviluppo web. Quindi, per impostare il contesto per il nostro blog, torniamo indietro brevemente e delineiamo la storia e lo sviluppo di JavaScript.

La storia delle tecnologie Web e dei browser

Il primo browser web è stato sviluppato e rilasciato nel dicembre 1990 con Tim Berners-Lee in qualità di sviluppatore principale. Contemporaneamente ha sviluppato e rilasciato l'Hypertext Transfer Protocol (HTTP), il protocollo applicativo per il World Wide Web per l'indicizzazione e la navigazione dei siti web.

Successivamente, nel 1993 è stato rilasciato il browser web grafico inaugurale, Mosaic. Allo stesso modo, nello stesso anno è stato sviluppato HTML. Questo è stato alcuni anni prima della creazione di JavaScript, mentre CSS è stato rilasciato nel 1996, un anno dopo JavaScript. Queste tre lingue in seguito formarono notoriamente uno stack tecnologico soprannominato "la triade di tecnologie che gli sviluppatori Web devono imparare".

Lo sviluppo di JavaScript

Uno dei famosi seguiti del browser Mosaic è stato il browser Netscape Navigator, rilasciato nel 1994. Nel 1995, gli sviluppatori dell'allora popolare Netscape, hanno assunto Brendan Elch, un programmatore, per creare un nuovo linguaggio di scripting dinamico per le pagine web e manipolazione dei dati lato client.

In risposta al mercato, Netscape ha visto la necessità di creare siti Web dinamici invece di limitarsi all'HTML. Sfortunatamente, la maggior parte dei primi siti Web utilizzava solo HTML e quindi erano inefficienti dal punto di vista computazionale. Quindi, Netscape è stato costretto a ideare un semplice linguaggio di scripting web mirato alla manipolazione DOM (document object model). Il progetto è stato conseguentemente ispirato alle funzionalità e alla sintassi di Java – sebbene siano fondamentalmente diversi nonostante una minore somiglianza sintattica.

Rilasciato ufficialmente nel marzo 1996, JavaScript alla fine ha abilitato nuove funzionalità sulle pagine Web che l'HTML da solo non poteva. Ad esempio, rispondere all'input dell'utente, mostrare finestre pop-up e cambiare i colori degli elementi. Netscape è stata successivamente acquisita da America Online (AOL) che possedeva anche Mozilla, che ha contribuito alla crescita esponenziale di JavaScript come standard Internet.

L'emergere di XML, AJAX e le applicazioni a pagina singola

Più tardi, all'inizio degli anni 2000, gli utenti Web erano frustrati dalle risposte lente del server e dai lunghi tempi di trasmissione dei dati. Questi sono stati ulteriormente aggravati dalle connessioni Internet a bassa velocità che hanno segnato l'epoca. Ha portato allo sviluppo dello stack tecnologico AJAX (XML asincrono e JavaScript)

A questo proposito, XML è un linguaggio di markup simile all'HTML, sebbene utilizzato per la rappresentazione dei dati anziché per la visualizzazione dei contenuti. XML è diventato rilevante all'interno di JavaScript con la creazione dello stack AJAX.

Spesso descritto come una raccolta di diverse tecnologie, raggruppate insieme nel loro insieme, AJAX comprende XHTML, CSS, DOM, XML, XLST, XML HttpRequest e JavaScript. E all'interno di AJAX, JavaScript unisce tutti gli altri strumenti insieme . Di conseguenza, AJAX ha fornito un modo per aggiornare parti di una pagina HTML senza scaricarne l'intero contenuto.

Applicazioni a pagina singola

In generale, tutti i framework JavaScript adottano i principi dell'applicazione a pagina singola. In pratica, un'applicazione a pagina singola (SPA) è un'applicazione composta da singoli componenti, che vengono caricati in memoria alla visita della prima pagina e possono quindi essere sostituiti o aggiornati in modo indipendente, in modo da non dover ricaricare l'intera pagina web su ogni azione dell'utente.

Inoltre, con le SPA, i componenti possono essere riutilizzati, riducendo drasticamente la quantità di codice necessaria. La prima applicazione a pagina singola è stata implementata nel 2002, con JavaScript inteso come uno dei linguaggi di destinazione per l'implementazione. Il successo delle applicazioni a pagina singola è dovuto principalmente alla precedente tecnologia AJAX e alla sua precedenza nella comunicazione server.

La relazione JavaScript-HTML

HTML può funzionare sia come complemento a JavaScript, come con jQuery; o come sintassi integrata simile a HTML che viene compilata in elementi HTML. Un'istanza di questo è la sintassi JSX, consigliata per l'uso durante lo sviluppo con React. Non è né JavaScript puro né HTML, ma una fusione di entrambi. Quindi, fondamentalmente, integrando la creazione di elementi di base e le funzionalità strutturali di HTML con le capacità dinamiche di JavaScript.

Relazione CSS-HTML

CSS è comunemente usato in combinazione con JavaScript. Un formato di esempio tradizionale consiste nell'implementare le proprietà CSS in file .css separati. L'altro formato consiste nell'integrare i CSS negli stessi framework JavaScript, attraverso librerie specializzate come CSS-in-JS e componenti di stile. Tali librerie consentono agli sviluppatori di scrivere codice JavaScript che stilizza gli elementi visivi con una sintassi simile a CSS che viene quindi solitamente compilata in puro CSS nel browser.

L'emergere di un'implementazione lato server di JavaScript

Alla fine, il 2009 è arrivato con il rilascio di Node.js, un'implementazione lato server di JavaScript. Node.js ha esteso il dominio JavaScript al back-end, consentendo a JavaScript di diventare un linguaggio full-stack.

Node.js è attualmente l'ambiente di runtime JavaScript più utilizzato, utilizzato per eseguire codice JavaScript al di fuori dell'ambiente del browser web. Utilizzato per funzionalità lato server, i creatori di Node.js miravano a sviluppare un'alternativa più efficiente all'allora popolare server HTTP Apache (spesso utilizzato con PHP). Node.js è stato creato utilizzando il motore JavaScript V8 di Google, che a sua volta è stato creato utilizzando C++.

Framework JavaScript front-end

Dato che abbiamo posto le basi, ora possiamo gettare i mattoni e approfondire le ragioni della nostra inclinazione a React.js.

Strutture contro biblioteche

Un argomento comune è ciò che si qualifica come libreria quando si parla di questo trio JavaScript. Ironia della sorte, React viene occasionalmente definito una libreria e altre volte come un framework. Tuttavia, per chiarezza e coerenza, è spesso utile separare i framework dalle librerie.

In particolare, una libreria è una raccolta passiva di risorse non volatili in cui gli sviluppatori hanno il controllo su come utilizzare le risorse. Sono in genere molto semplici e svolgono solo un determinato compito, quindi possono essere classificati come strumenti.

Mentre i framework sono progettati per essere meno passivi e costringere gli sviluppatori a fare le cose in un certo modo avvalendosi di uno scheletro per scopi di sviluppo e applicando un flusso di controllo. Ad esempio, a uno sviluppatore viene fornito un modo definito per sviluppare e configurare un'intera applicazione Web. Mentre una libreria di applicazioni Web non lo fa, fornisce invece operazioni di sottodomini più semplici, come richieste di rete o operazioni di stile.

Sebbene Vue e Angular siano tecnicamente considerati framework, c'è ancora qualche disaccordo sul fatto che React sia un framework o una libreria. Sebbene gli sviluppatori originali di React la definiscano una libreria, è ancora più comunemente usata come framework.

Perché React è l'alternativa dominante!

Con il senno di poi, React è stato sviluppato come un port JavaScript di XHP (una libreria PHP creata da Facebook). In generale, XHP era una modifica di PHP che consentiva la creazione di componenti personalizzati e mirava a prevenire attacchi di utenti dannosi. Successivamente da questo progetto di porting JavaScript è cresciuto JSX (JavaScript XML), che è diventato un linguaggio standard comune per React.

Tutto sommato, React ha un ambito più ristretto rispetto ai suoi colleghi, rendendo solo l'interfaccia utente dell'applicazione. Tuttavia, mantiene il vantaggio di una struttura leggera e quindi è meno costoso da imparare e utilizzare. Detto questo, può ancora essere considerato un framework, poiché viene utilizzato per lo stesso scopo di Vue e Angular.

Funzionalità DOM virtuali superiori.

React è stato il primo framework a ottimizzare la sua funzionalità secondo il DOM. Questo è stato un fattore che ha contribuito al suo successo poiché la manipolazione del DOM è piuttosto costosa in termini di risorse informatiche utilizzate. In particolare, React è stato progettato per eseguire il minor numero possibile di manipolazioni DOM utilizzando la gestione intuitiva dello stato e il DOM virtuale per controllare questa manipolazione.

Questo sfruttamento del DOM virtuale rende l'aggiornamento di React più veloce, a scapito di una maggiore intensità di memoria. E per eseguire aggiornamenti rapidi al DOM del browser, react mantiene in memoria una copia dell'albero del DOM virtuale, che consuma memoria aggiuntiva. Di conseguenza, la popolarità di React ha dato vita a numerose librerie spinoff come React Native per lo sviluppo mobile.

Flusso di dati unidirezionale

In React, i dati devono fluire verso il basso e sono indicati come flusso di dati unidirezionale. Mentre l'associazione dati bidirezionale di Angular e Vue rende il codice più carino e semplice, React compensa con gestibilità e prestazioni superiori. Un notevole vantaggio nella nostra argomentazione.

Perché reagire è meglio di angolare

Facciamo un confronto caso per caso per più contesto, vero? Destinato allo sviluppo di applicazioni più ampie, Angular è un framework JavaScript più completo, in termini di funzionalità di programmazione e dimensioni dei file.

Tuttavia, rispetto a React, Angular ha rigonfiamento negativo, complessità e uno stile pesante di tratti di sviluppo. È consigliato per progetti di sviluppo più piccoli e citato come avente una curva di apprendimento ripida. Per esacerbare le cose, AngularJS non è più in fase di sviluppo attivo.

Angular è costruito interamente in TypeScript e richiede molto codice, il che lo rende un po' complicato. Al contrario, React è piuttosto "semplice" e il suo orientamento originale è focalizzato sul controllo e la manipolazione della vista. In sostanza, consente allo sviluppatore di selezionare esattamente ciò di cui ha bisogno, ma si avvale anche della possibilità di utilizzare un gran numero di pacchetti di terze parti. Quindi, di conseguenza, React non include molto sovraccarico rispetto ad Angular.

Perché React è meglio di Vue

Vue.js è stato creato dal dipendente di Google Evan You. Evan è stato ispirato da AngularJS, ma ha voluto crearne una versione più snella e migliorata. Nonostante le sue caratteristiche leggere, le grandi prestazioni e lo stile di programmazione piacevole, l'aspetto negativo di Vue è la sua goffaggine. Qui si mostra la superiorità di React.

Ad esempio, in Vue.js non esistono buone pratiche chiare rispetto a React, il che potrebbe rendere difficile la manutenzione delle applicazioni principali. Tuttavia, le migliori pratiche per React si trovano nella comunità. Ad esempio, la creazione di un flusso di lavoro fattibile è abilitata tramite il pacchetto ufficiale create-react-app. A causa dei punti precedenti, React fornisce opportunamente la capacità di scrivere e mantenere molto codice complesso.

Sintassi ES6

Inoltre, gli sviluppatori possono utilizzare anche la sintassi ES6 con Vue, tuttavia, React è progettato in modo più ottimale rispetto a Vue a questo proposito. Sebbene Vue attualmente offra il supporto TypeScript, il suo supporto non è ben rifinito come React utilizzando CRA (Create React App) con supporto TS in un unico comando. Inoltre, con Vue, abbiamo ancora bisogno di alcuni pacchetti di terze parti con decoratori e funzionalità personalizzati per creare una vera e completa applicazione TypeScript. E purtroppo la documentazione ufficiale non fornisce tutte le informazioni necessarie per iniziare. Un altro vantaggio React!

Mentre cementiamo la nostra argomentazione, scomponiamo ulteriormente la discussione utilizzando alcuni parametri di riferimento più chiari.

1. Dimensioni della struttura

Sebbene sia improbabile che la dimensione del pacchetto minimizzato di un framework nel registro npm scoraggi o incoraggi qualsiasi sviluppatore a selezionare il framework, può comunque aiutare la nostra argomentazione. Angular è in particolare un po' più grande del resto (187,6 kB) mentre React è 6,4 kB e Vue cade da qualche parte nel mezzo, a 63,5 kB.

In generale, il confronto delle dimensioni del pacchetto mostra che Angular supporta e contiene una maggiore ampiezza di funzionalità, mentre React è progettato per uno sviluppo più snello. La natura di React offre quindi allo sviluppatore meno scelte per migliorare l'efficienza, il che è utile per i progetti più piccoli.

Inoltre, la struttura complicata di Angular comporta un potenziale rischio di scarse prestazioni rispetto a React o Vue, soprattutto per l'allocazione della memoria.

2. Esperienza di sviluppo, curva di apprendimento e disponibilità

In generale, TypeScript non è di per sé molto più difficile o più facile da imparare di JavaScript. Tuttavia, non è così ampiamente utilizzato e contiene meno librerie e documentazione generale rispetto a JavaScript. Questi fattori, combinati con le differenze di sintassi e il tempo necessario per abituarsi alla codifica in una variazione leggermente diversa di JavaScript, forniscono un leggero vantaggio a React rispetto ad Angular.

3. La situazione linguistica

Un altro punto chiave è che React e Vue usano JavaScript ES6 come linguaggio di base. ES6 è il più recente standard del settore JavaScript del 2015. D'altra parte, Angular 1 sfrutta JavaScript ES5 che è la versione precedente mentre Angular 2 si basa su TypeScript.

Sebbene TypeScript consenta agli sviluppatori di sbarazzarsi del tradizionale formato di programmazione JavaScript, tuttavia ha comunità di utenti limitate. Ciò significa che esiste il rischio potenziale che TypeScript possa scomparire se viene visualizzato un altro nuovo superset sintattico rigoroso di JavaScript. Al contrario, JavaScript ES6 non scomparirà presto perché è l'attuale criterio di settore quando si sviluppa in JavaScript.

4. Documentazione

In tutta onestà, la disponibilità della documentazione è soddisfacente per tutti questi quadri. Detto questo, è comunque degno di nota il fatto che la documentazione di React sia disponibile nel maggior numero di lingue (16). Vue resta indietro, con documentazione in 8 lingue, mentre la documentazione Angular è disponibile in 4 lingue. La documentazione di React è coerente e ha unito la teoria nella consegna per diversi sviluppatori.

Sfortunatamente, la situazione del framework di Angular può presentare alcune difficoltà per uno sviluppatore in quanto è divisa tra AngularJS e Angular 2. Inoltre, il termine "Angular" a volte può risultare ambiguo su quale framework si riferisce nei contesti online. Specialmente durante la navigazione in siti più piccoli e risposte più brevi.

5. Supporto della comunità

Per la maggior parte, React ha probabilmente il più grande supporto dalla comunità attualmente tra tutti i framework JavaScript. Ciò è esemplificato dall'ampiezza dei suoi forum di discussione e chat room. Inoltre, gli utenti possono seguire le ultime notizie e partecipare alla discussione su Facebook e Twitter.

Struttura snella (una menzione d'onore)

Abbiamo ritenuto opportuno menzionare un ingresso relativamente nuovo nella sfera JavaScript. Sviluppato da Rich Harris e inizialmente rilasciato nel 2016, Svelte ha guadagnato un'enorme popolarità per tutto il 2019. Ha introdotto diversi miglioramenti in JavaScript come cambiamenti nella gestione dello stato locale.

Vale anche la pena notare che Svelte non ha DOM virtuale e converte il codice scritto in JavaScript in fase di compilazione, anziché in fase di esecuzione. In sostanza, elude la conversione di elementi dichiarativi nel vero DOM.

Riepilogo

Sebbene Vue abbia leggermente più stelle Github, React è comunque superiore senza punti deboli distinguibili e migliori punti di forza delle prestazioni. In sostanza, prestazioni migliori significano tempi di caricamento inferiori e maggiore soddisfazione dell'utente. Inoltre, per i siti Web commerciali, ciò si traduce in un aumento delle entrate poiché una riduzione del tempo di caricamento di un paio di millisecondi può aumentare l'interazione e la fidelizzazione dell'utente.

In definitiva, il futuro del panorama del framework JavaScript è difficile da prevedere. Anche se, come suggeriscono le prove, è probabile che React rimanga il framework dominante per il prossimo futuro. Tuttavia, per gli sviluppatori che desiderano sviluppare applicazioni utilizzando un framework maturo e ben supportato con grandi prestazioni e molta documentazione, React è la scelta migliore!