Frontend senza framework: fin dove regge, e il segnale preciso che non basta più

1// Il segnale che il vanilla non basta più. NON è il numero di pagine:2// è la sincronizzazione manuale dello stesso dato in più punti.3​4// ✗ Tre punti da aggiornare a mano, e il quarto che si aggiungerà domani.5function aggiungiAlCarrello(articolo) {6  carrello.push(articolo);7​8  document.querySelector('#conteggio').textContent = carrello.length;9  document.querySelector('#totale').textContent = formatta(somma(carrello));10  document.querySelector('#riepilogo').innerHTML = righe(carrello);11  document.querySelector('#vai-alla-cassa').disabled = carrello.length === 0;12  // ...e in rimuoviDalCarrello() ne dimenticherete uno13}14​15// Quando questo schema compare in cinque funzioni diverse, state16// reimplementando la reattività di un framework — peggio, senza test,17// e a mano. È il momento di smettere.

1// La via di mezzo che copre moltissimi casi: una funzione di render2// unica, chiamata dopo OGNI modifica dello stato. Non è React, ma3// elimina proprio la classe di bug del blocco precedente.4let stato = { carrello: [], filtro: '', caricamento: false };5​6function aggiorna(modifiche) {7  stato = { ...stato, ...modifiche };8  render();9}10​11function render() {12  const n = stato.carrello.length;13  $('#conteggio').textContent = String(n);14  $('#totale').textContent = formatta(somma(stato.carrello));15  $('#vai-alla-cassa').disabled = n === 0;16  $('#riepilogo').replaceChildren(...stato.carrello.map(riga));17}18​19// Ogni azione tocca SOLO lo stato. Non c'è modo di dimenticare un20// aggiornamento, perché non ci sono aggiornamenti sparsi da ricordare.21aggiungi = (a) => aggiorna({ carrello: [...stato.carrello, a] });

1// Comporre HTML senza framework, senza aprire una falla XSS.2// ✗ innerHTML con dati non fidati: se il nome contiene <img onerror=...>3//   avete appena eseguito codice di qualcun altro nella vostra pagina.4el.innerHTML = `<li>${prodotto.nome}</li>`;5​6// ✓ 1. textContent per il testo: non interpreta nulla, mai.7const li = document.createElement('li');8li.textContent = prodotto.nome;9​10// ✓ 2. <template> per strutture ripetute: il markup resta nell'HTML,11//      dove si legge, e si clona invece di ricostruirlo a stringhe.12const t = document.querySelector('#riga-prodotto');13function riga(p) {14  const n = t.content.cloneNode(true);15  n.querySelector('.nome').textContent = p.nome;16  n.querySelector('.prezzo').textContent = formatta(p.prezzo);17  n.querySelector('a').href = '/prodotti/' + encodeURIComponent(p.slug);18  return n;19}

1// Delega degli eventi: un solo ascoltatore per tutta la lista, invece2// di uno per riga. Funziona anche per gli elementi aggiunti dopo,3// e non lascia ascoltatori orfani quando il DOM viene ricostruito.4document.querySelector('#lista').addEventListener('click', (e) => {5  const bottone = e.target.closest('[data-azione]');6  if (!bottone) return;7​8  const { azione, id } = bottone.dataset;9  if (azione === 'aggiungi') aggiungi(id);10  if (azione === 'rimuovi') rimuovi(id);11});12​13// Con mille righe: 1 ascoltatore invece di 1000. E la ricostruzione14// della lista non richiede di riattaccare niente.

1// vite.config.js — configurazione per un sito multi-pagina,2// che è il caso in cui il vanilla rende di più.3import { defineConfig } from 'vite';4import { resolve } from 'path';5​6export default defineConfig({7  build: {8    rollupOptions: {9      // Un punto di ingresso per pagina: chi apre /contatti non10      // scarica il JavaScript del blog. È lo "code splitting" che11      // nei framework richiede configurazione, e qui è la struttura.12      input: {13        home:     resolve(__dirname, 'index.html'),14        blog:     resolve(__dirname, 'blog/index.html'),15        contatti: resolve(__dirname, 'contatti/index.html')16      }17    },18    target: 'es2020',19    cssCodeSplit: true20  }21});