jQuery vs VueJS: generazioni a confronto

In questo secondo articolo della rubrica Framework Challenge lasciamo momentaneamente in disparte il linguaggio back-end PHP, e ci concentriamo sul lato front-end, in particolare sul linguaggio Javascript.

Ricordo che il "vs" del titolo indica un confronto amichevole tra ottimi prodotti, il cui scopo è quello di evidenziare gli aspetti vantaggiosi ed i punti forti di entrambi.

Nell'ultimo decennio sono stati creati innumerevoli framework che hanno aiutato milioni di sviluppatori (sia front-end che back-end) grazie all'estensione delle funzionalità di base offerte da Javascript, che, sebbene siano nativamente potenti, sono anche dipendenti largamente dal client in uso.

Uno dei maggiori vantaggi che derivano dall'utilizzo di un framework Javascript rispetto al Javascript nativo è infatti lo sgravo dei controlli di tutte le funzionalità cross-browser possibili ed immaginabili, come le differenti proprietà con i rispettivi valori CSS, le proprietà globali dell'oggetto window e dell'oggetto document, le sintassi DOM, gli oggetti "avanzati" (come quelli utili per effettuare richieste asincrone al server) e molto altro ancora.

In questo contesto, in particolare Internet Explorer è stato la "bestia nera" per eccellenza che ha dato molto da sudare agli autori di applicazioni Javascript, data la sua alta percentuale di sintassi proprietarie che contrastavano con gli standard.

Fortunatamente per noi, team di sviluppatori esperti si sono messi al lavoro per offrire prodotti open source di alta qualità utili alla realizzazione di ogni genere di applicazione front-end che è stato possibile concepire in base alle tecnologie a disposizione.

jQuery

Tra i nomi delle librerie Javascript più note che rientrano nella prima generazione di framework, troviamo Prototype, che segnò un ottimo trend di utilizzo all'epoca del suo debutto, coadiuvato dalla sua libreria di effetti chiamata Scriptaculous; MooTools, framework con struttura molto simile, ma che con l'andare del tempo è diventato sempre più completo e modulare; ExtJs, che offre ottimi controlli GUI, temi completi, toolkit e un sistema a classi; Dojo, framework nutrito di ogni funzionalità, ed infine jQuery.

jQuery è stato per molto tempo il framework Javascript più utilizzato in assoluto. Molti sviluppatori hanno preferito utilizzare sistemi maggiormente orientati ad una struttura Object-Oriented, ma un numero ancora maggiore si è fatto rapire dalla facilità di utilizzo di jQuery e soprattutto dalla sua immediatezza nella scrittura di codice. "Write less, do more" è infatti lo slogan originale del framework, che indica in modo preciso lo scopo dello stesso: scrivere il meno codice possibile per ottenere il massimo risultato: controlli compatibili in ogni browser, device e sistema operativo, innestati in un sistema di oggetti procedurali a catena.

Ad esempio, per impostare un evento quando l'utente clicca con il tasto sinistro del mouse su ogni div presente nella pagina, e far si che un elemento contenitore dall'id 'result' mostri il valore della proprietà CSS background-color del div in questione, basterà scrivere:

Potenza e semplicità, dunque.

Vue.js

Vue.js fa parte della collezione di framework, tra cui i famosissimi Angular.js, Angular2, React.js, Ember.js e Meteor.js di seconda generazione. Invece che basarsi principalmente sulla lettura e sulla manipolazione del Document Object Model, i framework Javascript di seconda generazione si focalizzano sul data binding.

Leggendo la pagina HTML, che avrà incorporati tag 'custom', il framework Javascript di seconda generazione permette infatti di interpretare questi tag come direttive che legano input, output ed operazioni di vario genere ad un modello che è costituito da variabili e strutture Javascript. I valori di questi dati, oltre a poter essere impostati manualmente e staticamente all'interno del template HTML, possono anche essere dinamicamente recuperati e generati tramite apposite risorse, quali ad esempio JSON.

Per questo motivo, tali framework sono molto simili ad una struttura MVC autentica, ribattezzata in qualche caso come MVW (Model View Whatever).

Vue.js è un prodotto di spicco nella seconda generazione, dominata in larga parte da Angular.

Realizzato da Evan You, sviluppatore di Google e grande utilizzatore di Angular, Vue.js offre ottime funzionalità quali il doppio data binding, il rendering server-side, una CLI, il supporto a JSX, e si pone come solida base per la realizzazione di SPA (single page applications), essendo uno dei framework Javascript più veloci, se non il più veloce in circolazione.

Non può dunque esserci un reale paragone tra i 2 componenti presi in considerazione, perché appartenenti a 2 generazioni di prodotti molto diverse tra loro che si avvalgono di modelli altrettanto differenti. Ciò che è fondamentale invece, è saper utilizzare entrambe le funzionalità utili nello sviluppo di un'applicazione web moderna.