NS12 è PMI Innovativa
0689178001

Sviluppo Front-End: quali framework e librerie da usare nel 2020?

NS12 > News > Business > Sviluppo Front-End: quali framework e librerie da usare nel 2020?

Sviluppo Front-End: quali framework e librerie da usare nel 2020?

  • d.barbato
  • Nessun commento

Come si è evoluto il Web?

Lo sviluppo Front-end negli anni si è evoluto in maniera radicale.

Nel passato applicazioni e siti web erano solitamente composti da pagine costruite server-side in modo dinamico, dove lato server venivano aggiunti la maggior parte dei contenuti (dati) alla pagina, più eventuali pagine statiche composte sempre lato server.

Il browser doveva soltanto preoccuparsi di mostrare la pagina HTML che riceveva dal server, con eventuale CSS per abbellire il tutto ed un moderato quantitativo di JavaScript, spesso usato per fini grafici.  I contenuti si limitavano spesso a testo ed immagini e l’interazione utente era minima se non totalmente inesistente.

Con l’andare avanti del tempo però, le esigenze degli utenti non erano più soltanto visualizzare dati, le persone volevano inviare messaggi in tempo reale, guardare video o in generale avere più interazione con i contenuti del Web (e con il DOM HTML).

Tutto ciò portò ad aumentare l’utilizzo di Javascript, che si evolse in fretta e divenne sempre più un perno centrale nello sviluppo web, grazie anche a librerie Javascript come jQuery che permettevano di semplificare la selezione e manipolazione del DOM, del CSS, la gestione degli eventi, semplificando l’uso di funzionalità AJAX (mettendo a disposizione diversi comandi per l’interazione con AJAX, tecnica di sviluppo introdotta proprio in quel periodo).

Con il tempo crebbe molto la disponibilità di nuove librerie e Framework JavaScript che davano un aiuto allo sviluppatore, portando anche molti esperti a spostare spesso il pre-rendering di pagine e applicazioni web lato Client piuttosto che, come accadeva precedentemente, lato server.
(nb. il rendering lato server ancora esiste ed è spesso utile!)

Lo sviluppo Front-End oggi

Ma ad oggi, il front-end come è diventato? Vediamolo con una Roadmap che rappresenta il percorso che potrebbe seguire un Web developer oggigiorno.

Sembra tanto vero?

E pensare che questa è  solo una piccola parte! Per vedere una roadmap più aggiornata e completa delle conoscenze che dovrebbe avere uno sviluppatore Front-End, potete consultare la roadmap a questo link! (tosta eh?)

In poche parole, le basi sono spesso le stesse di una volta, HTML, CSS e Javascript, ma ne viene fatto un utilizzo diverso. Si sono aggiunti molteplici concetti e tecnologie e c’è stata una estensione dei diversi linguaggi, diversi framework di sviluppo, framework di testing, gestori di pacchetti, diverse librerie di supporto, nuovi pattern, concetti rinforzati riguardanti la sicurezza, chi più ne ha, più ne metta!

Sarebbe difficile vedere tutti questi concetti ma, per fortuna, in questo articolo andremo ad approfondire soltanto i framework e librerie che entrano in gioco per aiutare lo sviluppatore a creare un’applicazione/sito web.

Framework e Librerie per lo sviluppo Front-End

Oggigiorno è possibile ricorrere ad una molteplicità di framework e librerie per aiutare lo sviluppatore nella stesura del codice per lo sviluppo di un sito o applicazione web, sia con rendering lato server, sia con rendering lato client.

Visto che ne stiamo per parlare, una domanda d’obbligo prima di andare avanti: conosci la differenza tra una libreria ed un framework vero?

Librerie e framework sono codice scritto da qualcun altro per aiutare a risolvere problemi comuni. La differenza tecnica sta in un termine chiamato inversione di controllo:

  • Quando usi una libreria, sei responsabile del flusso dell’applicazione. Stai scegliendo quando e dove chiamare una funzionalità della libreria o la libreria stessa.
  • Quando si utilizza un framework, quest’ ultimo è responsabile del flusso. Fornisce alcuni punti in cui è possibile inserire il codice o scrivere funzionalità, ma chiama il codice inserito come necessario.  Un framework è solitamente anche più “opinionato” di una libreria, ovvero si dà meno libertà allo sviluppatore nello strutturare il proprio codice, ma si fornisce anche una guida precisa di come fare un determinato use-case o di come seguire un determinato flow di eventi.

Oggi possiamo contare su moltissimi framework e librerie per lo sviluppo Front-end!

Ne andremo a vedere 3 in particolare: AngularReact e Vue.js, tutti solitamente utilizzati nello sviluppo di SPA (single page application) e solitamente vengono utilizzati per il Client-Side-Rendering (hanno anche dei supporti per utilizzare il Server-Side-Rendering, ma non è argomento di questa guida)

Angular vs React vs Vue

Vediamo una breve introduzione:

* Angular.js è nato nel 2010, ma Angular (2+) è nato nel 2016

Angular

Sviluppato da Google, viene rilasciato nel 2010 ed è quindi il più vecchio dei 3. Nel 2016 è stato completamente ristrutturato ed il linguaggio principale è passato da Javascript di AngularJS a Typescript di Angular (2+).

Si tratta di un framework enorme, il più maturo tra quelli che andremo ad analizzare, un pacchetto completo ricco di funzionalità, una architettura MVC , una CLI per inizializzare e mantenere i progetti, il supporto alle PWA (Progressive Web Application), insomma, un vero e proprio ecosistema dove raramente si avrà uno use-case senza una soluzione built-in pronta per aiutare lo sviluppatore.

Le pagine con Angular si creano tramite HTML + TypeScript +, le direttive/istruzioni specifiche di Angular che servono ad offrire determinate funzionalità come il two-way data binding o supporto di vario genere, quindi la sintassi di Angular sicuramente rimarrà chiara ad uno sviluppatore Web.

Alcune criticità

Una delle note negative di Angular è che si tratta di un framework più pesante degli altri ed ha una curva di apprensione molto ripida, non tanto per il fatto di dover imparare un nuovo linguaggio (TypeScript, che comunque risulta molto simile a JavaScript), ma soprattutto per la difficoltà nell’imparare e comprendere il vasto ecosistema di Angular e tutte le funzionalità che può offrire.
Lo sviluppo del codice stesso risulta più lento e complesso con un framework come Angular.

React

Sviluppato da Facebook, è noto per essere efficiente e flessibile, con una buona retrocompatibilità e, trattandosi di un  una libreria e non di un framework, è possibile integrarlo con altri framework.

React è minimalistico e si focalizza sulla creazione di UI tramite l’uso di componenti riutilizzabili, offre diverse funzionalità base come il traffico dati a senso unico (one way data flow = maggiore controllo del flow), un supporto al rendering server-side (quindi SEO-friendly) e vanta una community molto attiva.

React conta anche su un numero significativo di contributi proprio da parte della community (pacchetti/librerie) , quindi nonostante non abbia di base quanto offerto da un framework, conserva il vantaggio di poter essere arricchito con molte librerie esterne, finendo per avere praticamente tutto quello che si potrebbe volere: un ricco pacchetto di funzionalità già preconfezionare e customizzabili!

La sintassi di React è interamente in JavaScript, non c’è una separazione netta tra Html e JavaScript, anche un componente è una funzione JavaScript. Infatti fa utilizzo di un DOM virtuale e tramite una sintassi particolare (JSX) si può indicare a React quale contenuto HTML deve renderizzarsi nel DOM HTML reale. In poche parole, gli elementi che solitamente siamo abituati a vedere suddivisi, HTML e javascript, in React sono uniti e rappresentati in un unico file JavaScript.

Occhio però!

Uno sviluppatore che si approccia a React, molto probabilmente conosce già il linguaggio da usare (JavaScript) quindi avrà familiarità con quello che vede. Tuttavia React ha una curva di apprendimento non semplicissima in quanto, come abbiamo detto, introduce un concetto di DOM virtuale ed un mix delle viste e della logica in un solo file in un solo linguaggio.

In fin dei conti, ad ogni modo, risulta molto più semplice di Angular, non richiedendo l’apprendimento di alcun ecosistema complicato, non essendo un Framework e caratterizzandosi principalmente per il fatto di lasciare l’utente sufficientemente libero di impostare la struttura del codice come più preferisce  (…che non è sempre un aspetto positivo!;) ).

Vue

Veniamo ora al più recente dei 3. Non c’è una grande azienda dietro. Pur essendo un framework open-source creato da un ex dipendente Google, in pochi anni ha acquisito una grande popolarità ed attualmente risulta avere quasi 300 collaboratori su Github.

Questo aumento di popolarità ha portato Vue.js a diventare un forte concorrente di Angular e React, forse anche grazie ai molti giganti cinesi come Alibaba e Baidu che scelgono Vue come loro principale framework JavaScript front-end.

Vue è considerato progressivo, semplice, flessibile e leggero, con totale retrocompatibilità, permettendo di scrivere codice pulito e facile da capire, anche grazie ad una sintassi che è praticamente molto vicina allo standard HTML + JavaScript. Inoltre risulta molto semplice da impostare in fase iniziale, a meno di dover lavorare su progetti particolarmente  grandi.

Come funzionalità di base possiamo vederlo nel mezzo tra Angular e React. E’ un framework semplice che si focalizza sul codice, offre un two-way data databinding, un DOM virtuale, ha  le caratteristiche di framework come Angular (router, state managment) ma ci sono molti componenti mantenuti dalla community.

Attualmente Vue utilizza JavaScript ma nella versione 3.0 alla quale stanno lavorando, verrà supportato anche TypeScript.

Popolarità ed apprezzamento

La popolarità di un Framework può essere valutata in base a diversi aspetti, come l’utilizzo da parte degli sviluppatori, le loro opinioni, l’offerta lavorativa e molto altro. In questa sezione andremo a vedere alcuni degli elementi che influiscono di più sulla valutazione di un framework,

Un sito come stateofjs cerca di unire proprio tutti i concetti accennati, anno dopo anno,  e grazie ad un questionario a cui hanno partecipato oltre 20 mila sviluppatori front-end, cerca di dare un rating all’opinione generica.

Come possiamo vedere React e Vue sono entrambi amati – con l’unica differenza che React è molto più conosciuto – a differenza di Angular che non è decisamente il framework preferito dagli sviluppatori.

Un’altra fonte che possiamo utilizzare in ambito statistico per comprendere a fondo l’opinione degli sviluppatori, potrebbe essere il questionario annuale di Stack Overflow del 2019, dove oltre 90.000 sviluppatori di diverso livello ed esperienza hanno risposto ad una serie di domande.

Si è evinto anche qui che tra i vari framework, React e Vue sono i più amati e ricercati, mentre Angular continua a non andare giù!

Utilizzo

Un elemento chiave per completare la valutazione complessiva anche dal punto di vista dell’utilizzo effettivo, è il numero dei downloads dei pacchetti npm principali dei framework/librerie grazie ad npmtrends.

Da notare che non tutti i download di Angular sono mostrati, e nonostante ciò possiamo capire come la libreria di React si distanzi di gran lunga dai suoi concorrenti.

Un altro fattore che può essere rilevante sono le statistiche dei repository ufficiali, che ci può far capire che, nonostante Vue non sia ancora utilizzato come gli altri due, in un futuro non troppo lontano la situazione potrebbe completamente ribaltarsi, date le molte stelle  (165k) e le molte persone che osservano il repository.

E sempre tornando al questionario di Stack Overflow, su oltre 63.000 risposte, possiamo notare come a livello mondiale, oltre il 30% degli sviluppatori ha utilizzato React e/o Angular, mentre soltanto il 15% ha utilizzato Vue.

Offerta lavorativa

Un parametro oggi fondamentale per capire dove sta andando il mercato e avere una percezione netta dei progetti che ruotano attorno a questi framework è sicuramente l’offerta lavorativa. Possiamo controllare le principali piattaforme dedicate al lavoro come Linkedin ed Indeed per vedere le richieste di lavoro attualmente presenti nel mercato. Dati del 2020:

Questi dati ovviamente servono soltanto a capire come si suddivide il mercato attuale, che chiaramente cambia di nazione in nazione.

Da notare che, se li confrontiamo con i dati del 2018 a livello mondiale, possiamo notare immediatamente come la richiesta di sviluppatori Angular sia andata via via sempre più a scremarsi, a favore dell’ormai intramontabile React e del sempre più popolare Vue.

Performance

Non entreremo troppo nel merito, ma vogliamo dividere le performance in due categorie principali.

  • Startup Performance : quanto velocemente si carica e quanto tempo necessita per diventare operativa ed interattiva l’UI, principalmente dovuto alla dimensione del pacchetto/bundle (codice proprio + framework/librerie) che come abbiamo visto è decisamente superiore nel caso di Angular. In questo campo quindi, Vue e React si quasi eguagliano, mentre Angular è quello più lento.
  • Runtime Performance: quanto velocemente risponde all’input utente, che dipende sì da come è ottimizzato il codice, ma anche molto dal codice del framework dietro le scene. In questo campo, negli anni, sono stati fatti tantissimi test in varie situazioni, molte delle quali non sono reali (ad esempio visualizzazione e manipolazione di 10.000 righe di una tabella, casi che non dovrebbero proprio accadere).
    In generale possiamo dire che Vue e React si comportano molto bene nell’allocazione della memoria, mentre per la manipolazione del DOM Angular/React sono leggermente superiori a Vue. Per vedere alcuni di questi test, basta andare a questo link.

In generale, i tre si comportano diversamente in vari ambiti ma le performance sono molto simili tra loro, quindi almeno da questo punto di vista, è difficile dichiarare un vincitore. Ed è innegabile, inoltre, che le performance cambino da versione a versione!

In questo senso quindi, nell’obiettivo di fornire la massima trasparenza sulle prestazioni dei tre framework è corretto dire che la scelta su quello che più fa al caso nostro non dovrebbe mai dipendere dalle sue performance, essendo ottime e spesso quasi uguali tra loro.

Ma allora quale Framework o libreria scegliere nel 2020?

È complicato se non impossibile dare una risposta corretta a questa domanda. Nessuno tra i framework e librerie delle quali abbiamo parlato è migliore in assoluto, e addirittura arrivano ad equivalersi in molti aspetti.

Per rispondere correttanente, bisognerebbe farsi un esame di coscienza, valutare la grandezza e la preparazione del team di sviluppo, considerare la grandezza del progetto in questione, pesare i costi che si possono sostenere nello sviluppo. Ultimo, ma non meno importante, dare uno sguardo al futuro.

 

Angular è una scelta solida per le aziende con grandi team di sviluppatori (che magari già usano Angular), e in generale è ottimo su progetti molto vasti (o con possibilità di crescita esponenziale futura).
La struttura MVC potrebbe inoltre risultare famigliare a molti sviluppatori e porterebbe ad ottenere una buona SoC (Separation of Concerns), da non sottovalutare in progetti molto grandi. Di certo però l’ecosistema di Angular non farà felicissimi i nuovi sviluppatori che lo approcceranno per la prima volta.

 

React è amatissimo, ormai consolidato da anni, ha una forte community e molte risorse pronte da poter inserire nei propri progetti con facilità.
Gli stessi dati mostrati in precedenza mettono in evidenza quanto possa essere luminoso il futuro di React, anche grazie al fatto di potersi integrare con qualsiasi altro framework disponibile, essendo una libreria.

Inoltre da non ignorare la parte mobile. Esiste  infatti il framework React-Native per lo sviluppo mobile cross-platform (quasi) nativo, differente da React  ma con molti concetti decisamente in comune; lo sviluppatore che utilizza React potrebbe adattarsi facilmente allo sviluppo mobile con React-Native sebbene debba tenere a bada uno dei suoi aspetti più negativi, la tendenza a cambiare troppo spesso, con ripercussioni anche sulla documentazione.

 

Vue ha avuto una crescita esponenziale. Ha un futuro incerto sì,  ma promette bene! Basti pensare all’introduzione di TypeScript nelle prossime versioni e al completo passaggio a Vue dei Big del Web cinese. Vue dovrebbe essere la tua scelta se preferisci un framework leggero, semplice da imparare e facile nello sviluppo.
Può essere inoltre la scelta vincente quando si vuole avere un framework che detta delle regole ed impone una linea guida ma allo stesso tempo si necessita di velocità di sviluppo e si ha a cuore la felicità dello sviluppatore!
Andrebbe prediletto se si punta a progetti medio-piccoli, sebbene venga utilizzato anche per progetti più grandi per i quali sarebbe forse preferibile Angular o React.

 

Per concludere davvero, non esiste il framework migliore, esiste il framework più adatto a te!  Scegli con cura:)

Daniel D'Angelo

NS12 è PMI Innovativa
Siamo iscritti al Registro delle Imprese nella sezione speciale comei PMI Innovativa continuando ad investire sull’innovazione progettando soluzioni SW innovative