Il Web dinamico: le Web App per il business dai plugin ai framework [evoluzione + vantaggi]

L’evoluzione delle Web App per il business e delle relative funzionalità che forniscono, passa anche attraverso il miglioramento tecnico dei framework che consentono di realizzarle. Angular, React e Vue sono tre moderne librerie attualmente a disposizione dei team di sviluppo, in grado di fornire soluzioni e vantaggi specifici a seconda della tipologia di progetto su cui si sta lavorando.

Le Web App sviluppate per il business sono evolute molto rispetto al passato: testi, immagini ed elementi multimediali (nonché il modo in cui l’utente interagisce con essi) hanno subito un radicale cambiamento nel corso degli anni, oltre che un costante adattamento nell’ottica di una migliore user experience e della fruibilità da dispositivi mobili. Il linguaggio di markup dell’ultimo millennio e di conseguenza Web App e siti sviluppati mediante esso, hanno dovuto fare ricorso a  diversi plug-in proprietari per poter soddisfare le esigenze di sviluppatori, publisher e utenti i quali, questi ultimi, sono passati dall’essere dei destinatari passivi delle informazioni all’avere aspettative sempre maggiori in merito al livello di interazione con le funzionalità, ormai sempre più vicine a quelle messe a disposizione delle App desktop.

Questo ha portato una forte spinta propulsiva al linguaggio di markup, portando ad HTML5, ovvero il più recente linguaggio standard per la strutturazione di pagine Web, che viene sfruttato dai browser per visualizzare e interagire con esse. Pubblicato come “Recommendation” dalla W3C (organizzazione internazionale per lo sviluppo delle potenzialità del World Wide Web) a ottobre 2014, è stato progettato per offrire esperienze utente migliori e più veloci all’interno delle Web App, grazie all’introduzione di importanti novità quali ad esempio:

• Struttura di elementi più semplice
• Elementi standard per oggetti multimediali, che in precedenza richiedevano plug-in dedicati
• Sviluppo “unico”, che rende fruibile una Web App indipendentemente dal sistema operativo e dal dispositivo in uso, senza installazioni locali, riducendo i costi di sviluppo
• Supporto per la memorizzazione locale di grandi moli di dati, per lavorare anche in assenza di connessione
• Integrazione di funzionalità di localizzazione
• Funzionalità grafiche

Con l’evoluzione del Web e delle tecnologie alla sua base, alcune di queste tra le meno recenti sono diventate obsolete. Browser quali Internet Explorer hanno a lungo utilizzato ActiveX per estendere le potenzialità di un’applicazione e plugin quali Silverlight o Flash per colmare le lacune in termini di funzionalità multimediali.

Questi framework sono stati utilizzati per incorporare all’interno delle Web App contenuti grafici avanzati, effetti sofisticati ed elementi multimediali, oltre che per estendere le possibilità di streaming dei video, arricchendo così la user experience degli utilizzatori.

Al momento della loro introduzione, tali framework avevano ottenuto un ottimo successo. Nel giro di qualche anno, però, è diventato subito evidente come non riuscissero a tenere il passo della rapida evoluzione dei software sul mercato, cominciando a mostrare i primi problemi, quali bug, vulnerabilità di sicurezza o incompatibilità con quanto il mercato stesso richiedeva.

Con l’avvicinarsi della fine del periodo in cui i fornitori hanno garantito il supporto, gli sviluppatori dei browser più recenti hanno iniziato a escludere queste tecnologie, sostituendole con altre più moderne e sicure. La mancanza di tale supporto comporta infatti la fine degli aggiornamenti di sicurezza, il che può esporre le Web App a notevoli rischi e vulnerabilità. Google Chrome è stato il primo browser a cessare di supportarle, seguito da Mozilla Firefox, mentre Microsoft Edge non li supporta fin dalla nascita.

Negli ultimi anni, gli sviluppatori di Web App sono stati quindi incoraggiati a migrare i contenuti realizzati su Silverlight e Flash sui nuovi formati open source.

In anni più recenti è cresciuta a livello esponenziale la complessità delle Web App per il business, così come il loro numero, rendendo necessario mettere in campo gli strumenti adeguati per consentire ai programmatori di poter realizzare tali applicazioni con approcci sempre più innovativi.

Angular, sviluppato da Google e rilasciato nel 2010, è un framework open source JavaScript che consente agli sviluppatori di superare anche le sfide più difficili del processo di sviluppo di una Web App per il business, offrendo al contempo un’integrazione facile con codice e moduli applicativi HTML. In particolare, offre la possibilità di sincronizzazione con moduli che semplificano molto il processo di sviluppo di una soluzione, migliorando sia le prestazioni, sia le attività di test, in accordo con la metodologia DOM (Document Object Model, ovvero lo standard ufficiale del W3C per la rappresentazione dei documenti strutturati come modello orientato agli oggetti).

Angular usa HTML di base per la costruzione efficiente di Web App e può essere considerato un’ottima opzione per la creazione di applicazioni responsive e dinamiche.

React, sviluppato nel 2013 da Facebook e usato ampiamente in tutti i prodotti dell’azienda americana (Facebook, WhatsApp, Instagram), è una libreria che ha ottenuto un’ampia diffusione, grazie anche alla popolarità ottenuta all’interno delle comunità di sviluppatori.

React è rapido, sicuro, flessibile, scalabile e consente di costruire pagine di Web App estremamente dinamiche e responsive, fornendo un’eccezionale esperienza all’utente finale e grande libertà allo sviluppatore che le realizza.

Vue è il framework di più recente implementazione, realizzato nel 2014. Nonostante non abbia un colosso del software alle sue spalle, recentemente sta ottenendo sempre più popolarità, grazie alle community di sviluppatori che ne promuovono l’utilizzo.

Può essere considerato come un framework “progressivo” in quanto, a differenza degli altri, è stato progettato fin dalla base per essere utilizzato in maniera incrementale. Ciò significa che non mette a disposizione tutte le funzionalità di altre librerie, ma consente una facile integrazione con i componenti di altre o con altri progetti.

Ognuno di questi framework è “component based”, con Angular che può essere definito come completo e React/Vue come delle collezioni di librerie dall’ampia flessibilità di uso.

Il fattore comune a tutti i tre framework è la loro distribuzione gratuita con licenza MIT, ovvero quella per il software libero creata dal Massachusetts Institute of Technology.

Curva di apprendimento

Angular è il più completo e maturo dei tre framework, ha un grande supporto da parte delle community e può essere considerato come un pacchetto “completo”. A discapito di ciò, l’apprendimento dei concetti necessari per sviluppare è abbastanza ostico, il che lo rende la scelta ideale soprattutto per le grandi aziende, le quali sono dotate di team di sviluppo ampi e già avvezzi all’uso del linguaggio di programmazione TypeScript di Microsoft.

React è abbastanza maturo, ha un gran numero di contributori e sostenitori e una diffusione sempre maggiore. Al momento sembra essere la scelta migliore per chi si sta avvicinando la prima volta ai framework JavaScript per front-end, quali startup, piccole aziende e, più in generale, chi necessita di una certa flessibilità nello sviluppo, la quale viene garantita dalla sua semplice capacità di integrazione con altri framework.

Vue è il più recente dei tre, non ha nessuna grande azienda che lo supporta e ha iniziato solo di recente a guadagnare quote di mercato, soprattutto in Cina. Può essere considerato il giusto compromesso tra semplicità e flessibilità e, nonostante la sua crescita esponenziale, il suo futuro è ancora tutto da decifrare.

Supporto

Angular e React hanno un piano definito per il LTS (Long Term Support) e, inoltre, mettono a disposizione tutta la documentazione necessaria per migrare da una versione a un’altra. A differenza di Angular, che è un framework completo, React fa uso di diverse librerie indipendenti, il che si traduce in una maggiore complessità, dovendo effettuare vari aggiornamenti su ogni singola libreria.

Vue, invece, non ha al momento un LTS; ciò che lo distingue è l’upgrade molto semplice del framework.

Prestazioni

In generale, le prestazioni dei tre framework si avvicinano molto.

Grazie alla sua struttura MVC (Model-View-Controller), in grado di separare la logica di presentazione dei dati dalla logica di business, Angular può suddividere le attività in blocchi logici, riducendo così il tempo di caricamento iniziale della pagina di una Web App. Tale modello consente inoltre di separare le problematiche, avendo la componente di visualizzazione presente direttamente sul client e riducendo quindi le query in background. Infine, la comunicazione asincrona implica minori chiamate al server.

Con un file compresso di poco superiore ai 40 KB, React si è presto fatto apprezzare per la sua rapidità e le molteplici funzionalità, quali l’utilizzo di un DOM virtuale (che ri-renderizza solo i nodi necessari) e del SSR (rendering lato server), minimizzando il caricamento di risorse lato utente.

Anche Vue è incredibilmente veloce, grazie a un file compresso inferiore ai 20 KB. Inoltre, è semplice da imparare, rendendosi appetibile sia dai principianti, sia dagli sviluppatori più esperti, si integra facilmente, consentendo di iniziare a lavorare sui progetti rapidamente e, infine, mette a disposizione documentazione molto dettagliata per gli utenti.

Migrazioni

Angular ha un piano di aggiornamento semestrale, mentre un periodo equivalente viene lasciato alle API principali prima di essere deprecate, in modo di dare agli utilizzatori un tempo pari a due cicli di rilascio per effettuare eventuali cambiamenti ai loro progetti.

Per quanto riguarda React, Facebook ha dichiarato che la stabilità è uno dei fattori chiave del framework, in quanto è utilizzato nelle Web App di diverse multinazionali del settore IT. Gli aggiornamenti di versione sono in genere molto semplici, agevolati anche da script dedicati che semplificano la migrazione.

Per Vue, le API rimangono quasi del tutto le stesse da una versione all’altra. Il framework, inoltre, mette a disposizione uno strumento che consente di verificare la necessità di aggiornamenti su una Web App.