Nel panorama dello sviluppo web il termine Lean emerge come una filosofia chiave per creare applicazioni più leggere, veloci e sostenibili.
Ma cosa significa realmente Lean Web? E perché dovrebbe interessare ogni sviluppatore, designer e azienda che opera nella nostra industry?
Cos’è il Lean Web?
Il Lean Web non è solo un insieme di tecniche o best practice; è un vero e proprio approccio culturale allo sviluppo web.
Derivato dai principi della Lean Manufacturing e del Lean Software Development, il Lean Web si concentra sull’eliminazione degli sprechi, sull’ottimizzazione delle risorse e sul miglioramento continuo delle performance.
In termini pratici, si traduce in:
- Riduzione del peso delle pagine: Meno dipendenze esterne, immagini ottimizzate e codice pulito.
- Ottimizzazione delle performance: Caricamenti più rapidi e tempi di risposta ridotti.
- Accessibilità e inclusività: Esperienze utente fruibili da tutti, indipendentemente dal dispositivo o dalla connessione.
- Sostenibilità digitale: Minore impatto ambientale grazie a un uso più efficiente delle risorse.
La prima volta in cui il termine “lean” associato al termine “web”, secondo le mie ricerche fu nel novembre del 2017, Thomas Fuchs ha twittato: “Is there a conference for web developers that specifically caters to “Lean Web” (don’t use JS if not necessary etc.)?”
Questa domanda ha catalizzato l’attenzione della community, portando molti a riflettere sulla necessità di sviluppare in modo più essenziale e mirato. (Sfortunatamente il thread su X è stato ormai cancellato ma Long Live the Lean Web è un blog post in merito che ne testimonia l’esistenza.)
Perché il Lean Web è Importante Oggi
Viviamo in un’epoca in cui le applicazioni web sono diventate sempre più complesse, spesso sovraccaricate da framework pesanti, librerie non necessarie e asset non ottimizzati. Questo non solo penalizza l’esperienza utente, ma contribuisce anche a un consumo energetico maggiore, aumentando la carbon footprint del digitale.
Secondo uno studio di Website Carbon, la nostra industry contribuisce a circa il 3.7% delle emissioni globali di CO₂, una percentuale superiore a quella dell’industria aeronautica. Ridurre il peso delle nostre applicazioni e ottimizzare il loro funzionamento può avere un impatto significativo non solo sull’efficienza, ma anche sull’ambiente.
I Principi Fondamentali del Lean Web
Adozione della Piattaforma
Piuttosto che utilizzare dipendenze o librerie, sfruttiamo i metodi nativi di JavaScript e le API del browser integrate gratuitamente ogni volta che puoi. Operazioni che un tempo erano complesse, come DOM traversing e manipulation, ora sono molto più semplici e performanti. Questo approccio riduce la dipendenza da framework esterni e migliora le performance complessive delle applicazioni.
Minimalismo
Nell’industria è comune ricorrere a strumenti multiuso, ma spesso ciò di cui abbiamo realmente bisogno sono strumenti piccoli e mirati che fanno una sola cosa bene. Evitare l’uso eccessivo di librerie e framework quando non necessari permette di mantenere il codice pulito e facilmente manutenibile. Vanilla JavaScript, HTML e CSS sono spesso molto più che sufficienti per molte applicazioni, a patto di essere utilizzati con criterio.
Il Web è di Tutti
Anche se è preferibile utilizzare le funzionalità native del browser, non tutte sono disponibili su ogni dispositivo o browser. Le librerie e i framework hanno standardizzato i comportamenti tra i browser, ma è fondamentale bilanciare questa comodità con l’efficienza e l’inclusività. Creare applicazioni accessibili significa garantire che tutti gli utenti, indipendentemente dal dispositivo o dalla connessione, possano fruirne facilmente.
Performance by Design
Le performance non sono un’aggiunta successiva, ma devono essere integrate fin dall’inizio del processo di sviluppo. Tecniche come il lazy loading, la minimizzazione del codice e l’uso di CDN aiutano a distribuire contenuti più velocemente. Un’applicazione leggera è anche più accessibile: garantire che i contenuti siano fruibili anche su dispositivi a bassa potenza o con connessioni lente significa creare un web più inclusivo.
Sostenibilità
Ogni byte conta. Ottimizzare le immagini, ridurre le richieste HTTP e scegliere hosting alimentati da energie rinnovabili sono passi concreti verso un web più verde. Ridurre il peso delle applicazioni non solo migliora l’esperienza utente, ma contribuisce anche a diminuire l’impatto ambientale del nostro lavoro, promuovendo una sostenibilità digitale a lungo termine.
Iterazione
Il Lean Web promuove il miglioramento continuo. Monitorare costantemente le performance e raccogliere feedback dagli utenti permette di adattare e ottimizzare l’applicazione nel tempo. Questo approccio iterativo non solo migliora la qualità del prodotto finale, ma consente anche di rispondere rapidamente alle esigenze in evoluzione degli utenti e del mercato.
Il costo di JavaScript
JavaScript è la parte più “costosa” dello stack tecnologico in termini di performance.
Addy Osmani (uno degli engineer di Google più famosi al mondo e che non ha di certo bisogno di presentazioni) ha scritto un articolo illuminante su questo tema intitolato The Cost of JavaScript, sottolineando: “Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.“
Tematica poi ripresa da Chris Ferdinandi in The Cost of Javascript in 2023.
Questa dipendenza eccessiva dal JavaScript ha portato a movimenti come “1 Less JPG”, che promuovono la riduzione delle risorse superflue.
Il Mito del Virtual DOM
I framework più popolari come React e Vue utilizzano il Virtual DOM, una rappresentazione basata su JavaScript dell’interfaccia utente reale che aiuta a determinare quali parti devono essere aggiornate quando i dati cambiano. Mentre questo può essere vantaggioso per dataset molto grandi, in molte applicazioni più semplici l’overhead introdotto da questi strumenti supera i benefici.
Inoltre, è fondamentale ricordare che il frontend è intrinsecamente diverso dal backend. Nel backend, si ha il controllo completo dell’ambiente di esecuzione, delle risorse e delle infrastrutture. Nel frontend, invece, ci si scontra con dispositivi di capacità variabile, utenti con competenze tecniche diverse e reti di qualità disomogenea. Cercare di applicare le stesse best practice del backend al frontend spesso porta a soluzioni inutilmente complesse e inefficaci.
L’Impatto della Complessità
La complessità degli strumenti moderni spesso introduce costi nascosti. Di seguito citazioni di alcune delle migliori menti del web, che hanno contribuito al concetto di Lean Web.
Zach Leatherman: “Which has a better First Meaningful Paint time?
1. a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets
2. a client rendered React site with exactly one tweet on it
Spoiler: Lighthouse reports 8.5MB of HTML wins by about 200ms.” (un risultato sorprendente che dimostra quanto le soluzioni più semplici possano essere più performanti)
Kyle Shevlin: “My workflow today: 15 minutes of writing code that works and does what I want. 2 hours of trying to appease the static type gods.”
Brad Frost: “That depressing realization that the thing you’re slogging through in a modern JS framework could have taken you 10 minutes in jQuery.”
Nicole Dominguez: “Ah Webpack, JavaScript — turning a 1 hour project setup into an 8 hour affair.”
Vecchio non Significa Obsoleto
Le tecniche e le tecnologie più vecchie non diventano meno valide solo perché ne emergono di nuove.
Spesso, gli approcci più datati sono più semplici e affidabili. Ad esempio, le biciclette sono ancora un ottimo mezzo di trasporto, nonostante l’esistenza delle automobili. Sono più facili da mantenere, non necessitano di carburante e possono raggiungere luoghi inaccessibili alle auto.
Lo stesso vale per gli strumenti e le tecniche di sviluppo. Non significa che non si debbano mai usare nuovi strumenti, ma è importante essere selettivi su cosa si utilizza e perché.
Il beneficio supera il costo, sia per noi che per i nostri utenti?
Lean Web e Accessibilità: Un Binomio Vincente
Il Lean Web non è solo una questione di performance, ma anche di inclusività. Un’applicazione leggera e veloce è accessibile a un pubblico più ampio, inclusi coloro che utilizzano tecnologie assistive o vivono in aree con infrastrutture di rete limitate.
Un’ottima risorsa per migliorare l’accessibilità è The A11y Project, che offre modelli di design accessibili e una checklist per valutare l’inclusività dei progetti. Anche le A11y Nutrition Cards di Dave Rupert forniscono panoramiche rapide sui comportamenti da adottare per componenti JavaScript-driven.
Imparare a dire di “NO“
Costruire esperienze inclusive spesso significa saper dire “no”:
- No ai colleghi che propongono soluzioni che compromettono la funzionalità per alcuni utenti
- No ai clienti che chiedono funzionalità dannose per l’utente finale
- No ai dirigenti che impongono caratteristiche inutili o dannose
Essere professionisti del web significa anche avere il coraggio di opporsi quando necessario, personalmente lo faccio da anni, anche contro i miei stessi interessi, ma questo non significa che la battaglia sia sbagliata (anche se questo significa sentirsi un po’ Don Chisciotte a volte).
Aziende che Utilizzano i Principi del Lean Web
Molti si chiedono se esistano aziende che adottano concretamente i principi del Lean Web.
SPOILER: La risposta è sì!
Esistono molte organizzazioni che costruiscono applicazioni seguendo i principi del Lean Web, di seguito alcune di queste:
- GitHub: Alla fine del 2018, GitHub ha rimosso jQuery dalla loro applicazione, preferendo metodi nativi del browser e componenti web personalizzati. Keith Cirkel, uno degli sviluppatori coinvolti, ha condiviso che uno dei loro motti interni è: “Build websites like it’s 2005.”
- Netflix: Sempre nel 2018, Netflix ha eliminato React dal caricamento frontend predefinito, utilizzando Vanilla JS per il codice lato client. Questo ha ridotto il Load Time e il Time-to-Interactive del 50%.
- MeetSpace: Un’app di messaggistica video costruita interamente in Vanilla JS per garantire un’esperienza rapida e leggera. Il fondatore, Nick Gauthier, ha dichiarato: “Using this approach, we were able to create an incredibly fast and light web application that is also less work to maintain over time.”
- Airbnb: Ha implementato pratiche di ottimizzazione delle performance, riducendo il peso delle pagine e migliorando l’esperienza utente attraverso l’uso efficiente di risorse e il lazy loading delle immagini.
Verso un Futuro più Sostenibile
Adottare il Lean Web non significa solo costruire applicazioni migliori, ma anche contribuire a un futuro digitale più sostenibile. Ogni byte risparmiato riduce il consumo energetico e l’impatto ambientale del nostro lavoro. In un mondo in cui il digitale è sempre più centrale, fare scelte consapevoli nello sviluppo delle nostre applicazioni è una responsabilità che non possiamo ignorare.
Il Lean Web rappresenta un ritorno alle origini dello sviluppo, quando semplicità e funzionalità erano al centro del processo creativo. Ma non si tratta di nostalgia: è un approccio moderno e necessario per affrontare le sfide del presente e del futuro.
In un ecosistema digitale sempre più affollato e complesso, il Lean Web ci ricorda che meno è spesso meglio. E che, con le giuste scelte, possiamo creare applicazioni più performanti, accessibili e sostenibili.
🗣️ 𝗘 𝘃𝗼𝗶?
- Avete già implementato principi Lean nei vostri progetti?
- Quali sono le sfide maggiori che incontrate nell’ottimizzare le vostre applicazioni?
- Pensate che la sostenibilità digitale diventerà un criterio fondamentale nello sviluppo futuro?
Condividete le vostre esperienze nei commenti: il futuro del web potrebbe essere più leggero e sostenibile, grazie anche al vostro contributo!
Un abbraccio,
Il vostro amichevole UI/UX Engineer di Quartiere
