È un movimento, un approccio allo sviluppo web che enfatizza
la semplicità, l'efficienza e l'accessibilità
Riducendo al minimo il superfluo per creare prodotti digitali più leggeri, veloci e
sostenibili
Si ispira ai principi del Lean Manufacturing e del Lean Software Development
Quante spesso ci ritroviamo a pensare frasi come...
E ora con il SEO? Troppa roba per una cosa così semplice! Tutto questo sbattimento... per una landing page? Una libreria da 500kb per formattare una data?
Thomas Fuchs
Is there a conference for web developers that specifically caters to Lean Web (don’t
use JS if not necessary etc.)? Or in other words, are there maintainable long-term apps and sites that
don’t use the latest temporary hype ? I’d love to see talks about
how to ditch frameworks, do stuff with just HTML, CSS & vanilla JS, server-side generation etc
Chris Ferdinandi
Over the last couple of years, front end development has gotten a
lot more complicated. Preprocessors, module loaders, package managers, ES6, command line tools,
single page apps, CSS-in-JS, Angular, React, Vue, Cosmic (I made that last one up, but
it sounds legit, right?). It’s exhausting. It makes building for the web harder. It
makes the sites and apps we build slower and more fragile. It often makes the web worse.
Philip WaltonYou open a web page and click on something, but nothing happens! You click on something else, nope, nothing!
You start clicking everywhere, just to get *some* feedback that your phone isn't broken...
then suddenly a bunch of stuff all happens at the same time
and now you're on a completely different page and you have no idea how you got there...
Addy Osmani
Building interactive sites can involve sending JavaScript to your users. Often, too much of it.
Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and
nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we
send to devices, because it can delay interactivity in large ways.
Chris Coyier
There are quite a few things in the world of web design and development that have gotten… easy. It
might be time to take a look at how you’re approaching some of the building blocks of your website because
evolutions in browser technology and tooling have made many things easier and better.
VanillaJS
Eric Wastl (the man behind Advent of Code)
Il termine è un derivato dei concetti del
Lean Production che nel 1988 è stato descritto da
John Krafcik nella sua tesi di laurea "Triumph of
the lean production system" al MIT.
Ma non è stata un'invenzione americana, fra il 1948 e il 1975, un giovane ingegnere giapponese
Taiichi Ohno, definì questo sistema di produzione industriale, oggi conosciuto come TPS.
Il
TPS, o Toyota Production System, è basato sui
principi della Lean Production o
Produzione
Snella, ed ha fatto la fortuna di Toyota
trasformando il marchio in uno dei maggiori colossi dell'Automotive.
Il TPS è un sistema di produzione che si basa su due pilastri fondamentali:
#1 - Jidoka/Kaizen, approccio basato sul
miglioramento continuo e a piccoli passi, finalizzato all'eliminazione del Muda - gli sprechi
#2 - Just-in-Time, approccio finalizzato a
produrre solo quello che serve quando serve,
organizzato in Kanban, con un continuo
e granulare monitoraggio del mercato
Ma cosa dici? JIT e Kanban? Automotive?
Si è così JIT e Kanban non sono concetti che abbiamo inventato noi dell'industria informatica.
Questo sistema ha superato i limiti del sistema di produzione di massa "basato sull'offerta" in
favore di un sistema "basato sulla domanda".
Il sistema di produzione di massa,
sviluppato da Henry Ford e Alfred Sloan, è
applicato ancora oggi dalla quasi totalità
delle aziende occidentali, contribuendo
ad una pesantissima carbon footprint.
Quindi cos'è il Lean Web?
È una proposta: un cambio di paradigma culturale nello sviluppo del web...
...o forse giusto un po' di consigli in merito.
Princìpi del Lean Web
Riduzione del peso dei prodotti digitali
Ottimizzazione delle performance
Accessibilità e inclusività
Sostenibilità digitale
Perché il Lean Web
è importante oggi?
Sulla mia macchina funziona!
Abbiamo tutta questa capacità di calcolo... che senso ha preoccuparsi delle performance?
Il mio smartphone potrebbe mandare l'Apollo 11 sulla Luna e nel frattempo risolvere equazioni differenziali
per non annoiarsi
La crescente complessità delle applicazioni moderne e l’impatto ambientale dello
sviluppo web sono fattori chiave.
Secondo uno studio della Royal Society di fine 2020 (fonte
AGI.it) le tecnologie digitali contribuiscono ~6% delle emissioni globali
L'Impatto della Complessità
La complessità degli strumenti moderni spesso introduce costi nascosti.
Debugging infinito
Manutenzione evolutiva
Curve di apprendimento
Knowledge Transfer
Single Page Apps (SPA)
Le SPA cercano di migliorare le performance caricando tutto in una singola pagina HTML.
Solo il contenuto che necessita viene aggiornato.
Possibilità di transizioni fluide tra le pagine.
Minore ricaricamento delle risorse.
Ricreare il browser in JS?
Le SPA rompono molte funzionalità native del browser che vengono poi ricostruite in JS.
Gestione della navigazione e aggiornamento dell'URL.
Supporto ai pulsanti avanti/indietro.
Gestione del focus e del titolo del documento.
Fragilità
Il frontend moderno è fragile e dipende eccessivamente da JavaScript.
Il "white screen of death" quando JS fallisce.
CDN e connessioni instabili possono bloccare l'app.
Ad blocker e firewall possono interrompere il caricamento.
JavaScript è il punto debole
HTML e CSS sono "forgiving", JS invece no.
Un errore di battitura in HTML viene ignorato.
Un errore in CSS viene saltato.
Un errore in JS può rompere l'intera applicazione.
Il "mito" del Virtual DOM
Il Virtual DOM sicuramente rappresenta un'utile strategia per
ottimizzare gli aggiornamenti dell'interfaccia in applicazioni complesse
In molti casi questo approccio introduce un overhead non necessario in contesti dove la manipolazione
diretta del DOM è già sufficientemente performante
Se gli aggiornamenti sono minimi, se il sistema è configurato per un rendering diretto efficiente,
affidarsi al Virtual DOM potrebbe risultare più pesante che vantaggioso.
Come sempre, la risposta è Dipende!
Tutto bello...
a questo punto direte:
Le regole del Lean Web
#1 - Non parlate mai del Lean Web #2 - Non DOVETE parlare mai del Lean Web #3 - ...
...scherzavo 🤣!
#1 - Minimalismo
Minimizzare l'uso di sovrastrutture visive ed architetturali, seguendo sempre
il paradigma
HTML 1st, CSS 2nd e JS 3rd
Apprendere, combinare e sfruttare al meglio
API native e metodi delle core web technologies
è più semplice e performante rispetto
all'uso di framework e librerie esterne
Creare applicazioni inclusive significa
garantire un'esperienza fluida per tutti:
per chi ha disabilità, o una bassa
connessione, o un device poco performante
Ogni byte ha un costo ambientale!
Cerchiamo di ridurre il consumo energetico
di nostri prodotti ottimizzando risorse e
riducendo la complessità, è un dovere etico
e una necessità per il futuro del web
#5 - Iterazione Continua
Il miglioramento è un processo senza fine:
monitoriamo, raccogliamo feedback
e ottimizziamo continuamente per
offrire il meglio agli utenti, riducendo
iterativamente sprechi e inefficienze
Esempi di aziende che utilizzano il Lean Web?
GitHub
A fine 2018 ha rimosso vecchie dipendenze
(ad esempio jQuery e altri componenti
UI) in favore di soluzioni nativamente
integrate ha migliorato sensibilmente
performance e manutenibilità
Nel 2018, rimuovendo React dal caricamento
frontend iniziale e riscrivendo il suo core
in VanillaJS, ha semplificato l’architettura e ridotto drasticamente i tempi di
caricamento e di gestione delle risorse
NOTA: Time-to-Interactive ridotto del 50%, anche se alcune parti sono ancora in React e caricate in modalità lazy
Fonte:
Addy Osmani @ medium.com
MeetSpace
MeetSpace ha sviluppato un'app di messaggistica
interamente in VanillaJS, evidenziando come
la semplicità possa agevolare l’innovazione
Airbnb ha integrato i principi della lean
production per ottimizzare il processo di
prenotazione e gestione delle locazioni,
rendendo l'esperienza utente più fluida
Continuiamo ad esplorare e sperimentare
nuove tecniche e strumenti, allo scopo
di creare prodotti digitali sempre più
leggeri e performanti, per TUTTI!.
linkedin.com/in/pixu1980
github.com/pixu1980
codepen.io/pixu1980
youtube.com/@devdojo_it
twitch.tv/devdojo_it
@devdojo_it
