Framework - eco.space

Usare un framework come Bootstrap o React quando non è necessario è uno degli errori più comuni nel web design. Il risultato è il cosiddetto bloatware: codice in eccesso che appesantisce il sito senza aggiungere nulla di utile. Spesso si tratta di funzionalità che non verranno mai utilizzate, ma che il browser è costretto a caricare comunque ad ogni visita. Prima di affidarsi a un framework vale sempre la pena chiedersi se è davvero indispensabile. Per progetti semplici, spesso bastano HTML, CSS e un po’ di JavaScript vanilla per ottenere tutto ciò di cui si ha bisogno, senza inutili sovrastrutture. A volte però un framework è inevitabile, soprattutto su progetti più complessi. In questi casi la scelta giusta è puntare su soluzioni modulari, che permettono di importare solo i componenti di cui si ha davvero bisogno. Niente fronzoli, niente peso inutile. Meno codice significa meno dati da trasferire, meno elaborazione e un sito più leggero e veloce per tutti.

Tool

next.js

Vanilla.js

Impatto

●︎ ●︎ ●︎ ○︎ ○︎

Difficoltà

●︎ ●︎ ○︎ ○︎ ○︎

ESEMPIO PRATICO

Di seguito è riportato un esempio pratico di come utilizzare Vanilla JS, che essendo codice nativo non richiede alcuna installazione:

// 1. Nascondere un elemento HTML
document.getElementById('mio-messaggio').style.display = 'none';

// 2. Aggiungere una classe CSS a un bottone
document.querySelector('.bottone-menu').classList.add('attivo');

// 3. Ascoltare un click
document.getElementById('invia').addEventListener('click', function() {
    console.log('Codice eseguito senza sovrastrutture!');
});

Risultati

Nella maggior parte dei progetti si utilizza appena l'1% del codice offerto da un framework, costringendo il browser a caricare inutilmente il restante 99%. Attualmente la struttura di questo sito si appoggia a Bootstrap 5, ma è già in corso un lavoro di riscrittura per convertirlo interamente in codice nativo, eliminando del tutto l'uso di framework esterni.