I pilastri dello sviluppo web: perché i 3 classici oggi sono diventati 4

Se anche voi, come me, amate scrivere codice e vederne immediatamente il risultato in un’interfaccia grafica come la scheda di un browser, non potete fare a meno di imparare i pilastri dello sviluppo web. La scuola tradizionale ci dice che sono 3, ma a mio avviso oggi sono diventati 4. E ci arriveremo presto.

1. HTML: Lo scheletro del web

L’HTML è il codice che crea il contenuto puro del sito: titoli, paragrafi, immagini, icone e bottoni sono tutti definiti qui. In tempi recenti è andata molto di moda l’abitudine di creare l’intero HTML direttamente tramite JavaScript. Con questo approccio, il server invia al browser una pagina HTML quasi vuota e i contenuti vengono generati sul client in un secondo momento.

Il vantaggio? Le pagine diventano completamente dinamiche: basta un clic su un bottone per cambiare i contenuti a schermo recuperando i dati da un database in tempo reale. Lo svantaggio, però, è pesante. Il sito si appesantisce, i tempi di caricamento si allungano, i dispositivi mobili più datati fanno fatica a elaborare la pagina e la SEO viene compromessa.

Questa esigenza è nata con l’avvento dei siti web dinamici. Google è stata la prima a lanciare un framework dedicato nel 2010 con Angular, seguita nel 2013 da Facebook con React (una libreria nata proprio per agevolare l’interazione con il DOM). Successivamente sono arrivati Vue (creato da Evan You nel 2014) e Svelte (sviluppato da Rich Harris nel 2016).

Ben presto ci si è accorti che stavamo gravando troppo sul browser dell’utente (il lato client). Per alleggerirlo sono nati i meta-framework come Next.js (per React) e Nuxt (per Vue) nel 2016, seguiti da SvelteKit nel 2020, progettati per spostare parte del lavoro sul server. Nel 2021, infine, è arrivato Astro con una filosofia diametralmente opposta: inviare zero JavaScript di default ed erogare solo quello strettamente necessario per le componenti interattive. È la famosa architettura a “isole”: un mare statico su cui galleggiano componenti dinamiche. Il risultato? Prestazioni al vertice e una SEO eccezionale.

2. CSS: L’abito che fa il monaco

Il CSS è il codice che si occupa della veste grafica: formattazione dei testi, gestione delle immagini, colori, bordi, ombreggiature e distanze. Sebbene sia possibile inserire il codice CSS dentro un tag <style> nell’head della pagina, le buone norme consigliano di scriverlo in un file separato e collegarlo tramite un tag <link>.

Anche attorno al CSS sono nati diversi framework per snellire lo sviluppo: i più famosi sono Bootstrap (2011) e Tailwind (2017). Personalmente, trovo che questi strumenti sporchino non poco il codice HTML, poiché costringono a inserire decine di classi precostruite direttamente nei tag. Ecco perché alla fine preferisco sempre il CSS vanilla, puro e pulito.

3. JavaScript: Il motore del comportamento

Se l’HTML è lo scheletro e il CSS è il vestito, JavaScript (JS) è il sistema nervoso. Permette di gestire tutti i comportamenti dinamici: clicchi su un cuore e il contatore dei like aumenta di uno, premi un bottone e invii i dati di un modulo, apri o chiudi un menu a tendina.

A differenza di HTML (che è un linguaggio di markup) e CSS (che è un insieme di proprietà e valori), JavaScript è un vero e proprio linguaggio di programmazione, nonché l’unico capace di girare nativamente dentro i browser. Nella sua storia ci sono tre date fondamentali:

• 1995: La nascita a opera di Brendan Eich.
• 2009: L’intuizione di Ryan Dahl, che ha estratto il motore V8 da Google Chrome inserendolo in un programma in C++, dando vita a Node.js e permettendo a JS di girare anche all’esterno dei browser (lato server).
• 2015: Il rilascio di ES6 (ECMAScript 2015), il vero punto di svolta che ha modernizzato il linguaggio dopo anni di stagnazione.

4. TypeScript: Il quarto pilastro moderno

Ed ecco il quarto elemento che, secondo me, è ormai fondamentale: TypeScript (TS), ovvero JavaScript dotato di “tipi”.

Tutto il codice scritto in JS funziona all’interno di un file .ts, ma non vale il contrario. TypeScript non è strettamente indispensabile per mettere online un sito (anche perché i browser non lo capiscono e leggono solo i tre linguaggi storici), ma offre una DX (Developer Experience) decisamente superiore. Anche se richiede di scrivere qualche riga di codice in più all’inizio, permette di intercettare i bug e gli errori logici immediatamente durante la scrittura, prima ancora di avviare l’applicazione. Viene compilato e tradotto in JavaScript standard in modo del tutto automatico dagli strumenti moderni, garantendo zero lavoro extra in fase di rilascio.

Imparare a padroneggiare questi strumenti non solo vi permetterà di costruire qualsiasi cosa vediate nella vostra mente, ma vi darà le basi per comprendere l’intera evoluzione tecnologica del web moderno.