La scelta del framework risulta sempre tra le decisioni più complicate da prendere. Per valutare quale sia quello più adatto alle tue esigenze bisogna avere ben chiara l’idea sull’obiettivo che vogliamo raggiungere. Le caratteristiche principali che devi considerare quando scegli un framework sono: tempo, proprietà e caratteristiche tecniche, coinvolgimento della community e conseguenze della scelta. In questo articolo confronteremo due framework javascript, Angular vs React, e vedremo ciò che più ti aiuterà a realizzare il tuo progetto.
Angular
Angular è un framework Javascript open source basato sul Typescript, sviluppato da un team Google. È adatto sia per sviluppo web che mobile e ha una raccolta di librerie e funzionalità ben integrata (comunicazione client-server, routing, etc..). Come framework rimane più complesso da capire, c’è molta sintassi non necessaria e la gestione dei componenti è complicata. Alcune delle funzionalità più complicate sono incorporate nel core del framework, di conseguenza non potrai evitare di impararle. Tuttavia, a differenza di altri framework, Angular offre l’associazione dati bidirezionale. Ciò significa che qualora noi andassimo a modificare un valore nella casella di input, in automatico verrà aggiornato il valore della proprietà della classe componente. In poche parole, verrà fatta una sincronizzazione in tempo reale tra il modello e la sua visualizzazione.
A differenza di React, Angular supporta l’inserimento della Dependency Injection (DI) adattando la flessibilità sia nel test che nel debug. Un uso di queste dipendenze viene fatto per la riutilizzabilità di una classe. Per quanto riguarda la gestione dello stato, di vitale importanza soprattutto nelle grandi applicazioni, Angular utilizza NGRX, una libreria che consente l’uso della gestione dello stato reattivo. NGRX memorizza tutti gli stati in un unico albero, consentendo di accedere a tutti i moduli da qualsiasi punto di un’applicazione.
React
React è una libreria (anche se viene spesso definita, erroneamente, framework) open source costruita usando JSX, sviluppata da Facebook e utilizzata sia nello sviluppo web che mobile. Tuttavia, per quanto riguardo lo sviluppo mobile, deve essere incorporato Cordova, un framework di sviluppo web. React si occupa dello sviluppo dell’interfaccia utente, infatti questa libreria consente agli sviluppatori di crearne di interattive e complesse. Diversamente da Angular, React necessita di librerie aggiuntive per poter utilizzare altre funzioni ma è più facile da imparare e implementare. Ad esempio, Redux, React Router o Helmet ottimizzano i processi di gestione dello stato, routing e interazione con l’API. Funzioni come data binding, routing basato su componenti, generazione di progetti, convalida di moduli o inserimento delle dipendenze richiedono l’installazione di moduli o librerie aggiuntivi.
In questo confronto Angular VS React vediamo come la libreria, diversamente dal framework Angular, utilizzi principalmente il data binding unidirezionale. Ciò implica un flusso di dati da padre a figlio. Questo processo risulta migliore rispetto al bidirezionale in quanto aiuta a scrivere un codice senza errori, offrendo inoltre un debug semplice poiché si ha maggiore controllo sui dati. Tuttavia, qualora si volere cambiare il tipo di associazione, é possibile implementare la bidirezionale applicando un evento “modifica” su uno dei componenti.
Ogni singolo componente di React può avere uno stato, quindi bisognerà gestire gli stati di questi separatamente. In caso ciò non venisse fatto, si riscontreranno più bug ed errori di quelli che già ci sarebbero. React utilizza diverse librerie per la gestione dello stato come REDUX, RECOIL e HOOKS.
Angular VS React: tabella prestazioni
Angular | React | |
Caricamento in corso | 10 ms | 7 ms |
Scripting | 173 ms | 102 ms |
Rendering | 3 ms | 6 ms |
Painting | 2 ms | 4 ms |
Sistema | 73 | 129 |
Idol | 3034 | 3042 |
Totale | 3295 | 3289 |
Confronto in breve: Angular VS React
Angular | React | |
Overview | Framework JS Gestito da: Google | Libreria per UI Gestito da: Facebook |
Universalità | Per web e mobile Apps single e multi-page | Per web e mobile Apps single e multi-page |
Autosufficienza | Del tutto autosufficiente Nessun bisogno di libreria addizionale | Solo per scrittura di UI Necessità di librerie esterne |
Apprendimento | Lungo e difficile | Facile e veloce se conosci JS |
Comunità e compagnie | Grande comunità. Ne fanno parte: McDonald’s, AT&T. HBO, Apple, Adobe, Nike | Grande comunità. Ne fanno parte: Facebook, Twitter, Netflix, PayPal, Yahoo, Uber, Microsoft |
Performance | Abbastanza veloce | Veloce grazie all’ottimizzazione con VirtualDOM |
Linguaggi | Javascript e Typescript | JS ES6+, JSX |
Struttura app | Fissa e complessa. Basato su Componenti, Modelli, Controller e Viste | Flessibile. Basata su componenti. |
Componenti UI | Componenti interni, componenti in material design | Un gran numero di librerie esterne. |
Direttive | Molto complicate senza una conoscenza di Angular | Facili da comprendere |
Dependency Injection | Supportata | Non supportata |
State management | Mancanza di uno standard interno | Redux standard de facto. |
Data binding | Bidirezionale I dati sono mutabili | Monodirezionale I dati sono immutabili |
Lifecycle | DOM reale Change detection | DOM virtuale |
Angular VS React, qual è il migliore?
In conclusione, abbiamo capito che sia Angular che React presentano punti deboli e di forza. Il primo è un framework completo, con ottime performance e con la capacità di creare applicazioni web complesse. L’ostacolo sta nello studio di questo framework, in quanto risulta essere molto complicato dati anche i continui aggiornamenti. Tuttavia Google offre documentazioni dettagliate che possono aiutare nell’apprendimento. Quindi, una volta aver appreso i concetti base, Angular consente di sviluppare funzionalità avanzate in poco tempo.
Per quanto riguarda React, questa libreria UI sembra molto comoda da usare, più semplice sia per quanto riguarda i concetti che come curva di apprendimento iniziale. Nonostante la sua semplicità, bisogna comunque tenere in considerazione il fatto che per utilizzare React bisogna integrare altre libreria, di conseguenza aumenta la sua complessità.