React o Angular? Quali sono i trend del 2019?

Qual è il miglior framework JavaScript: React o Angular? Proviamo a valutarne caratteristiche e differenze, per scegliere quello più adatto al nostro progetto.

Indice

• React o Angular? La sfida tra Facebook e Google si gioca sul front-end!
• Un po’ di storia
• Framework o libreria?
• Regular DOM o Virtual DOM?
• JSX o TypeScript?
• Data binding one-way o data binding two-way?
• Supporto per applicazioni mobile: NativeScript o React Native?
• Curva di apprendimento
• Diffusione
• React o Angular? Conclusioni

React o Angular? La sfida tra Facebook e Google si gioca sul front-end!

Sviluppare applicazioni web significa gestire il modo in cui gli utenti interagiranno con noi. Per questo il front-end è un aspetto così importante di un progetto e per questo scegliere gli strumenti migliori per realizzarlo è fondamentale: stiamo dialogando direttamente con l’utente finale.

Ad oggi, la sfida del front-end si gioca tra Angular e React.

Entrambi sono stati ideati da un colosso dell’informatica (rispettivamente, Google e Facebook) e, ad un livello macroscopico, le differenze sono poche: sono entrambi prodotti open source e godono di un’ampia popolarità tra brand di tutto il mondo.

Ma quale strumento scegliere per il nostro progetto? Ovviamente non esiste una risposta univoca: come sempre, dipende dal progetto e dal suo contesto. Proviamo però ad approfondire alcune delle caratteristiche di entrambi, per provare a fare la scelta migliore.

Un po’ di storia

AngularJS nasce tra il 2008 ed il 2009, quasi per caso, dall’idea di alcuni sviluppatori Google, con l’obiettivo di semplificare la vita ai web designer poco esperti di programmazione, che lavoravano nel colosso di Monuntain View.

Fun fact, perché si chiama Angular? Semplice, perché l’html utilizza parentesi angolate < >.

Nel 2010, AngularJS viene rilasciato come progetto open source ed alcuni grandi marchi iniziano ad incorporarlo nel proprio set di strumenti per lo sviluppo di applicazioni web e mobile.

Già nel 2014, però, AngularJS non riusciva più a stare al passo con i progressi degli standard JavaScript (non dimentichiamoci che era nato come un piccolo progetto interno). Per questo, il team di Google ha deciso di riscrivere da zero il framework, rendendolo capace di superare tutti i problemi che la versione originaria causava nell’approcciarsi ad applicazioni di grandi dimensioni o multipiattaforma.

Lo stravolgimento del framework ha generato il panico tra gli sviluppatori: interi progetti di terze parti come Angular Material e Boostrap diventavano obsoleti.

Si è trattato di un prezzo alto da pagare, ma i risultati, ad oggi, ci dicono che ne è valsa la pena: Angular (non più AngularJS) offre tutte le soluzioni necessarie per costruire applicazioni di grandi dimensioni.

Ma torniamo un po’ indietro nel tempo: tra il 2010 ed il 2011, Facebook cresceva, così come cresceva il numero delle feature che offriva e degli sviluppatori che lavoravano sul prodotto. Il risultato era che il codice aumentava esponenzialmente, generando lentezza e difficoltà legate alla sua manutenzione.

Il problema principale? Piccole modifiche alla struttura del codice obbligavano a renderizzare nuovamente l’intera app, con aggiornamenti a cascata che coinvolgevano tutta la struttura. Più il codice cresceva e più gli aggiornamenti a cascata diventavano problematici.

React è nato proprio con l’obiettivo di superare queste difficoltà: riuscendoci brillantemente, è stato ben presto utilizzato ampiamente sia da Facebook che da Instagram, e nel 2013 è stato rilasciato come progetto open source.

Framework o libreria?

Angular è un framework MVC a tutti gli effetti, mentre React è una libreria JavaScipt (quindi non copre l’intero pattern architetturale, ma solo la View).

• Questo significa che Angular offre molte più funzionalità out off the box, ma anche una minore flessibilità: non è possibile scegliere quali librerie utilizzare, ad esempio, per il routing.
• Per contro, React non vincola lo sviluppatore a librerie predefinite, ma, allo stesso tempo, non risolve i problemi legati al Model e Controller. Lo sviluppatore potrà scegliere liberamente librerie indipendenti, ma poi dovrà occuparsi da solo degli aggiornamenti e delle migrazioni.

Regular DOM o Virtual DOM?

React utilizza un DOM virtuale, mentre Angular no. Che significa?

DOM sta per Document Object Model: si tratta di un’interfaccia di programmazione per documenti HTML, XHTML o XML, organizzata sotto forma di albero, che consente agli script di interagire dinamicamente con il contenuto e la struttura di un documento web e di aggiornarli. Tutto ciò che si trova in un documento HTML può essere consultato, modificato, cancellato o aggiunto utilizzando il DOM.

Esistono due tipi di DOM: virtuale e reale. Il DOM tradizionale o reale aggiorna l’intera struttura ad albero anche se le modifiche avvengono in un solo elemento, mentre il DOM virtuale (possiamo immaginarlo come una rappresentazione “leggera” di un DOM reale) tiene traccia delle modifiche ed aggiorna solo elementi gli elementi variati, lasciando intatte le altre componenti della struttura ad albero. Logicamente, quindi, il DOM virtuale garantisce un aggiornamento del browser più efficiente, e pertanto prestazioni superiori e miglior user experience.

Come anticipato, React utilizza un DOM virtuale, mentre Angular opera su DOM reale. Ci aspetteremmo quindi una vittoria schiacciante di React, almeno per quanto concerne questa caratteristica; in realtà, Angular utilizza strumenti di “change detection” altamente performanti, che, di fatto, rendono le prestazioni dei due strumenti molto simili, almeno da questo punto di vista.

JSX o TypeScript?

• Una delle caratteristiche tipiche di React è JSX, un preprocessore di codice HTML like, che produce codice JavaScript. Indubbiamente, semplifica la codifica dell’interfaccia utente, rendendo il codice JavaScript simile all’HTML.
• Angular, invece, utilizza TypeScript, un linguaggio che consente di individuare errori durante la digitazione, il completamento automatico ed un rapido refactoring del codice. Essendo un linguaggio altamente compatto, scalabile e pulito, TypeScript è perfetto per grandi progetti di scala aziendale.

Cominciamo quindi ad intravedere qualche differenza tra i due strumenti: JSX è più semplice e TypeScript più adatto a progetti di grandi dimensioni. Ma proseguiamo.

Data binding one-way o data binding two-way?

L’associazione dati (data binding) è il processo di sincronizzazione dei dati tra il Model (business logic) e la View (UI). Esistono due implementazioni di base del binding dei dati: one-directional e two-directional.

• L’associazione bidirezionale dei dati in Angular è simile all’architettura Model-View-Controller, in cui il Model e la View sono sincronizzati: pertanto, una modifica allo stato del Model impatta sulla View ed una modifica dell’interfaccia utente cambia anche lo stato del Model corrispondente.
• React, invece, utilizza l’associazione dati unidirezionale o discendente: se si modifica un elemento nell’interfaccia utente, lo stato del Model non cambia. Questo tipo di associazione dati rende il codice più stabile ma richiede un lavoro aggiuntivo per sincronizzare il Model e la View.

In poche parole, il metodo utilizzato da React rende il codice più stabile ed il debugging più immediato, mentre quello utilizzato da Angular è più semplice da capire e da utilizzare.

Supporto per applicazioni mobile: NativeScript o React Native?

Sia Angular che React offrono soluzioni per creare applicazioni mobili o per garantire la portabilità delle applicazioni web sul mobile:

• Sul fronte Angular, ad esempio, troviamo NativeScript, un framework mobile multipiattaforma che utilizza TypeScript comelinguaggio principale, mentre l’interfaccia utente è realizzata con XML e CSS. Lo strumento consente di condividere 
  circa il 90 percento del codice su iOS e Android, trasferendo la logica di business dalle app web ed utilizzando lo stesso skillset per le UI. NativeScript permette di scrivere una singola interfaccia utente per dispositivi mobili e di adattarla leggermente a ciascuna piattaforma, se necessario. A differenza delle soluzioni ibride multipiattaforma che utilizzano il rendering WebView, il framework esegue app su macchine virtuali JavaScript e si connette direttamente ad API mobile native che garantiscono prestazioni elevate, paragonabili alle app native.
• React invece offre React Native, una piattaforma sviluppata da Facebook per la creazione di applicazioni mobile native con React. La sintassi è leggermente diversa da quella impiegata per le webapp, ma ci sono molte somiglianze. React Native adotta un approccio che si discosta da NativeScript: gli sviluppatori sono incoraggiati a scrivere una sola UI per piattaforme diverse, aderendo all’approccio “learn once, write everywhere”. Pertanto, le stime di condivisione del codice sono intorno al 70%.

In generale, sia Angular che React sono un’ottima scelta per applicazioni che devono essere eseguite sia sul web che su strumenti mobile: mentre NativeScript è più focalizzato sulla condivisione del codice e sulla riduzione del time-to-market, ReactNative privilegia la realizzazione di app che si avvicinano di più per look and feel a quelle native, anche se i tempi di sviluppo sono più lunghi.

Curva di apprendimento

Generalmente, si ritiene che Angular abbia una barriera all’ingresso più alta rispetto a React: ad esempio, ha una gestione dei componenti che gli sviluppatori giudicano spesso complessa. Inoltre, essendo meno flessibile di React, impone a chi lo utilizza di “imparare a pensare come Angular” prima di iniziare ad utilizzarlo. Tuttavia, alcune funzionalità importanti sono già integrate nel core del framework, e questo consente di produrre meno codice.

React, per contro, risulta più semplice da approcciare, ma la quantità di codice prodotto è maggiore, il che può rallentare lo sviluppo.

Diffusione

Secondo lo StackOverflow Developer Survey 2019, React ha superato Angular. Da notare che il sorpasso è avvenuto quest’anno: nel 2018, Angular superava React di oltre 9 punti percentuali. Questo non è vero, tuttavia, se andiamo a verificare i risultati della ricerca tra gli sviluppatori professionisti, dove Angular supera React, anche se per un misero 0,1.

Ma le sorprese non sono finite; React è infatti, il framework web più amato dagli sviluppatori:

Su Github, Angular ha al momento in cui stiamo scrivendo 48.908 stelle e 948 contributors. React, per contro, ha 130.711 stelle e 1.295 contributors con una media di 90,1 stelle in più al giorno, contro le 32,7 di Angular:

Fonte: GitHub

React, insomma, sta crescendo sotto tutti i punti di vista, e anche molto velocemente, come dimostra anche il seguente grafico su Google Trends:

Fonte: Google Trends

Ma cosa ne pensano le aziende?

Non ce ne vogliano gli sviluppatori, ma l’attenzione al business dei nostri clienti viene prima di tutto; perciò, indipendentemente da cosa dicono queste analisi, proviamo a vedere quali aziende utilizzano questi strumenti:

• React è utilizzato (ovviamente) da Facebook, Instagram e Whatsapp, ma anche da compagnie come Netflix, New York Times e Drobox.
• Angular è utilizzato, tra gli altri, da Google, Microsoft, Adobe, Apple, e PayPal.

In entrambi i casi, la lista delle compagnie che si sono affidate allo strumento sarebbe più lunga e ricca di nomi importanti; ma questi sono sufficienti a capire la diffusione massiva di entrambi gli strumenti, che risultano quindi ampiamente solidi e maturi.

Un’altra analisi interessante riguarda la ricerca di profili professionali con competenze sui due strumenti: secondo un sondaggio svolto da Cloud Academy nel 2019, “Angular vs React Industry Trends”, Angular è più presente di React nelle imprese e le società più grandi ed in settori più consolidati (come quello finanziario) preferiscono Angular. 

React o Angular? Conclusioni

Ma allora, è migliore Angular o React? Proviamo a tirare un po’ di conclusioni: come anticipato in premessa, non esiste una risposta univoca a questa domanda. Come sempre, dipende dal progetto e dal contesto in cui ci troviamo.

Probabilmente, conviene usare React quando la nostra web app ha numerosi contenuti dinamici. La sfida tra molte applicazioni web oggi si gioca sui millisecondi necessari a caricare grandi elenchi di dati all’interno di una singola pagina, proprio perché quei millisecondi fanno davvero la differenza per la user experience. Per questo, numerosi siti che hanno molti contenuti dinamici, che cambiano continuamente, come Instagram o Facebook, scelgono React.

Per contro, se ci troviamo di fronte alla necessità di realizzare un’applicazione complessa di livello enterprise (che integra fonti di dati diverse, presenta anagrafiche e form), Angular è forse ad oggi la soluzione migliore.

Proviamo a riassumere ulteriormente (anche se, lo precisiamo, si tratta di un’interpretazione semplicistica e non sempre vera): Angular funziona meglio per il B2B e React per il B2C.