Un confronto tra React, Angular, Vue.js e Svelte
La vita del front-end developer è composta da momenti giornalieri dove ci si pente del framework scelto o in cui, leggendo un articolo su un blog, si sente parlare di come uno sia meglio dell'altro, e ovviamente, in quello successivo, troviamo l'antitesi con altrettanti punti a favore. Lo scopo di questo articolo, oltre al mostrare le principali caratteristiche dei 4 più importanti competitor sul mercato, è quello di risponde al "come fare": Come faccio a creare un'applicazione? Come creo una pagina? Come collego le varie sezioni/pagine? Non dilungandoci su argomenti come Virtual DOM si/no, prestazioni, peso, portabilità, che sono argomenti sì importanti, ma molto spesso marginali; facendo una similitudine è inutile utilizzare una moto super sportiva per fare un viaggio di 1000 chilometri, meglio optare per una turistica, allo stesso modo è sconveniente scegliere un framework solo per le dimensioni del pacchetto finale, se poi lo sviluppo risulta complesso, o non riusciamo a trovarci bene. Queste condizioni portano ad allungare i tempi di produzione e a innalzare i nostri livelli di stress, dovendo lavorare con qualcosa che non ci piace, per risparmiare qualche Kb.
Biografia dei framework
Tutte le tecnologie che abbiamo scelto di prendere in esame sono open-source: progetti iniziati da grandi società, gruppi di sviluppatori o singoli, che hanno poi scelto di rendere disponibile il loro lavoro per riuscire, tramite la community, a sostenerlo e migliorarlo nel corso degli anni. Concentrano i loro sforzi nel prendere il nostro codice, convertirlo in un bundle javascript ed eseguirlo all'interno del browser controllando in maniera continuativa l'effettiva sincronia tra il flusso che abbiamo programmato e gli elementi visualizzati.
Angular
È un framework creato da Google nel 2016, scritto utilizzando l'esperienza maturata nel corso del tempo da Angular.js, dal quale però non condivide nulla, tanto che la migrazione consigliata, da una versione all'altra, è la riscrittura completa dell'applicazione. Nei primi anni, per differenziare i due framework, veniva chiamato Angular 2, causando però molta confusione con il suo versionamento: Angular 2 v4, Angular 2 v5, e così via. È un framework molto strutturato basato su linguaggio Typescript. L'architettura è di tipo MVC (Model View Controller) con un sistema di data binding bidirezionale che permette l'aggiornamento automatico del modello al cambiamento della UI e viceversa. Un'applicazione è strutturata in più parti, ognuna con uno scopo preciso, troviamo componenti, servizi, direttive, moduli, routing, interceptor e così via.
Questa capillarità porta a una serie di vantaggi: lo sviluppatore può tenere sotto controllo ogni singola parte del progetto e al tempo stesso permettere ad Angular di produrre un compilato javascript funzionale, ad alte prestazioni creando un file che contenga lo stretto necessario. Tutte le categorizzazioni vanno però a incidere sui tempi di apprendimento: Angular è infatti, tra i framework scelti, quello con la curva di apprendimento più alta. Per iniziare e creare il primo progetto dobbiamo prima installare una command line interface: Angular CLI, la quale crea un boilerplate iniziale e aiuta lo sviluppatore durante l'aggiunta di librerie, compilazioni, linting, debugging. Ionic, utilizzando Angular come punto di partenza, ci permette di scrivere applicazioni cross-platform.
React
Creato da Facebook nel 2013, è propriamente una libreria che utilizza Javascript e JSX per modificare il DOM della pagina. Essendo una libreria, diversamente da un framework, il suo unico scopo è visualizzare del contenuto. Difatti non contiene alcun componente per la gestione delle route di navigazione o un client http, questi strumenti sono forniti da altre librerie. Queste caratteristiche consentono a React di avere una curva di apprendimento molto bassa: per creare un'applicazione non dobbiamo imbastire un progetto categorizzandone le varie parti, ma ci potrebbe bastare anche un unico file. Il non fornire alcuno strumento out-of-the-box dá al team di sviluppo la possibilità di creare il proprio puzzle di librerie. La scrittura in javascript, linguaggio noto a ogni web developer, non aggiunge quella complessità e tipizzazione proprie del Typescript - è possibile utilizzare Typescript anche in React (TSX), ma data l'ampia diffusione di librerie javascript, la convivenza dei due mondi risulta complicata, motivo per il quale la versione puramente javascript è ancora la più adoperata -.
I componenti si basano su un sistema di data binding mono direzionale dove la UI è soggetta al codice: un cambiamento della UI può avvenire solo al cambiamento del modello, e non viceversa, il che rende la gestione dello stato della pagina, rispetto ad Angular, leggermente più complesso. Restando in tema differenze, React utilizza un sistema di rendering dei componenti basato sul Virtual DOM: il codice che scriviamo non viene tradotto in javascript che permetterà la modifica del DOM della pagina, bensì verrà trascritto in modo tale che agirà su un DOM virtuale, le cui caratteristiche sono del tutto similari a quello reale, a parte la non esistenza di un'interfaccia; sarà poi il runtime di React che attraverso dei cicli terrà sincronizzati gli elementi del virtual DOM con il DOM reale.
Vue.js
Vue.js è nato dall'idea di un developer di Angular.js che voleva prendere quanto di buono vi era nel framework e renderlo più leggero, seguendo un po' la filosofia di React. Viene definito come un progressive framework, lo si può cioè utilizzare come un framework completo, oppure utilizzarne solo alcune parti come se fosse una libreria. È composto da una libreria core che gestisce solo il rendering su pagina, e un corollario di librerie di supporto che riescono a gestire tutte le necessità di una SPA. La modalità di scrittura ricorda molto Angular, così come il data binding e il template HTML, riesce però a creare un pacchetto finale molto più leggero e durante l'esecuzione alloca meno memoria, specialmente nelle piccole applicazioni. Utilizza un Virtual DOM, come React, e anche lui, benchè la maggior parte della community produca applicazioni in javascript, dá la possibilità di utilizzare il linguaggio Typescript. La curva di apprendimento risulta quindi molto facile: creare un'applicazione con template è questione di minuti. Essendo però l'ultimo arrivato in ordine temporale risente della quantità di librerie disponibili. Spesso, soprattutto in applicazioni complesse, lo sviluppatore si trova davanti alla necessità di creare la proprie librerie per soddisfare le richieste del cliente.
Svelte
Tra le nostra scelte è sicuramente il framework meno utilizzato ma al tempo stesso molto promettente se guardiamo le possibilità evolutive future. Creato da un designer del NY Times, Rich Harris, laureato in filosofia, estrapola alcune parti di React e Vue, inserendole in un framework da una sintassi semplice e di rapida comprensione. Svelte è definito come un compilatore, il cui focus è scrivere meno codice: la sintassi è molto stringata, secondo alcuni anche troppo, ma una normale form può arrivare a essere scritta con il 55% di righe in meno rispetto a React o Vue. Non utilizzando il Virtual DOM, il codice scritto in javascript viene compilato in azioni che vanno a modificare il DOM reale, creando un pacchetto applicativo finale molto ridotto, in quanto scompare la necessità di un runtime. Si porta molta attenzione al riutilizzo massimo dei componenti per ridurre le dimensioni del compilato. Data la bassa disponibilità di librerie, e il basso tasso di utilizzo in ambiente enterprise, gli sviluppatori di Svelte hanno momentaneamente orientato il loro interesse verso i neofiti; differendo di poco dall'HTML/CSS/JS risulta di facile comprensione, inoltre la documentazione offre interessanti spunti e boilerplate da cui partire poter creare la nostra prima applicazione.
Il grafico seguente mostra il numero di download negli ultimi 5 anni da npm per ogni framework [fonte [npmtrends])].
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire i dati con Azure Cosmos DB Data Explorer
Triggerare una pipeline su un altro repository di Azure DevOps
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Eseguire i worklow di GitHub su runner potenziati
Sfruttare al massimo i topic space di Event Grid MQTT
Creare gruppi di client per Event Grid MQTT
Estrarre dati randomici da una lista di oggetti in C#
Come migrare da una form non tipizzata a una form tipizzata in Angular
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database