Circa 15 anni fa lavoravo in un'azienda in cui creavamo app per agenti di viaggio, lavoratori aeroportuali e compagnie aeree. Abbiamo anche creato il nostro framework interno per i componenti dell'interfaccia utente e le funzionalità delle app a pagina singola. Avevamo componenti per tutto: campi, pulsanti, schede, intervalli, tabelle dati, menu, datepicker, selezioni e selezioni multiple. Avevamo anche una componente div. Il nostro componente div era eccezionale tra l'altro, ci permetteva di ottenere angoli arrotondati su tutti i browser, il che, che ci crediate o no, non era una cosa facile da fare in quel momento.
Il nostro lavoro ha avuto luogo in un momento della nostra storia in cui JS, Ajax e l'HTML dinamico erano visti come una rivoluzione che ci ha portato nel futuro. All'improvviso, potevamo aggiornare una pagina in modo dinamico, ottenere dati da un server ed evitare di dover navigare verso altre pagine, che veniva considerata lenta e faceva lampeggiare un grande rettangolo bianco sullo schermo tra le due pagine. C'era una frase, resa popolare da Jeff Atwood (il fondatore di StackOverflow), che diceva: “Qualsiasi applicazione che può essere scritta in JavaScript prima o poi verrà scritta in JavaScript.”— Jeff Atwood
Per noi in quel momento, sembrava una sfida andare a creare davvero quelle app. Sembrava un'approvazione totale per fare tutto con JS. Quindi abbiamo fatto tutto con JS e non ci siamo presi il tempo di ricercare altri modi di fare le cose. Non sentivamo davvero l’incentivo ad apprendere adeguatamente cosa potevano fare HTML e CSS. Non percepivamo davvero il Web come una piattaforma di app in evoluzione nella sua interezza. Per lo più lo vedevamo come qualcosa su cui dovevamo lavorare, soprattutto quando si trattava del supporto del browser. Potremmo semplicemente utilizzare più JS per portare a termine le cose. Prendermi del tempo per saperne di più su come funzionava il web e cosa era disponibile sulla piattaforma mi avrebbe aiutato? Certo, probabilmente avrei potuto eliminare un sacco di codice che non era veramente necessario. Ma, all’epoca, forse non così tanto. Vedete, le differenze tra i browser allora erano piuttosto significative. Era un periodo in cui Internet Explorer era ancora il browser dominante, con Firefox al secondo posto, ma iniziava a perdere quote di mercato a causa della rapida popolarità di Chrome. Sebbene Chrome e Firefox fossero abbastanza bravi nel concordare gli standard web, gli ambienti in cui venivano eseguite le nostre app ci hanno costretto a supportare IE6 per molto tempo. Anche quando ci è stato permesso di supportare IE8, abbiamo dovuto fare i conti con molte differenze tra i browser. Non solo, ma il web dell'epoca non aveva molte funzionalità integrate direttamente nella piattaforma.
Avanti veloce fino ad oggi. Le cose sono cambiate enormemente. Non solo disponiamo di queste funzionalità come mai prima d’ora, ma è anche aumentata la velocità con cui diventano disponibili. Vorrei quindi porre nuovamente la domanda: prendersi il tempo per saperne di più su come funziona il web e cosa è disponibile sulla piattaforma ti aiuterebbe oggi? Assolutamente sì. Imparare a comprendere e utilizzare la piattaforma web oggi ti offre un enorme vantaggio rispetto ad altri sviluppatori. Che tu lavori su prestazioni, accessibilità, reattività, tutti insieme o semplicemente sulle funzionalità dell'interfaccia utente, se vuoi farlo come ingegnere responsabile, conoscere gli strumenti a tua disposizione ti aiuta a raggiungere i tuoi obiettivi più velocemente e meglio. Alcune cose per le quali potresti non aver più bisogno di una biblioteca Sapendo cosa supportano i browser oggi, la domanda, quindi, è: cosa possiamo abbandonare? Abbiamo bisogno di un componente div per ottenere angoli arrotondati nel 2025? Naturalmente no. La proprietà border-radius è supportata da tutti i browser attualmente utilizzati da più di 15 anni. E presto arriverà anche la forma degli angoli, per angoli ancora più elaborati. Diamo un'occhiata alle funzionalità relativamente recenti che sono ora disponibili in tutti i principali browser e che puoi utilizzare per sostituire le dipendenze esistenti nella tua base di codice. Il punto non è abbandonare immediatamente tutte le tue amate librerie e riscrivere la tua base di codice. Come per tutto il resto, dovrai prima prendere in considerazione il supporto del browser e decidere in base ad altri fattori specifici del tuo progetto. Le seguenti funzionalità sono implementate nei tre motori browser principali (Chromium, WebKit e Gecko), ma potresti avere requisiti di supporto del browser diversi che ti impediscono di utilizzarli immediatamente. Ora è ancora un buon momento per conoscere queste funzionalità e magari pianificare di utilizzarle prima o poi. Popover e dialoghi L'API Popover, l'elemento HTML
Certo, probabilmente anche la velocità della tua connessione Internet è aumentata, ma non è così per tutti. E non tutti hanno le stesse capacità del dispositivo. Invece, inserire codice di terze parti per le cose che puoi fare con la piattaforma significa molto probabilmente spedire più codice e quindi raggiungere meno clienti di quanto faresti normalmente. Sul Web, prestazioni di caricamento scadenti portano a tassi di abbandono elevati e danneggiano la reputazione del marchio. Esecuzione di meno codice sui dispositivi Inoltre, il codice che invii sui dispositivi dei tuoi clienti probabilmente viene eseguito più velocemente se utilizza meno astrazioni JavaScript sulla piattaforma. Probabilmente è anche più reattivo e più accessibile per impostazione predefinita. Tutto ciò porta a clienti sempre più felici. Controlla il blog annuale sul divario di performance disuguaglianza del mio collega Alex Russell, che mostra che i dispositivi premium sono in gran parte assenti dai mercati con miliardi di utenti a causa della disuguaglianza di ricchezza. E questo divario non fa che aumentare nel tempo.
Layout in muratura incorporato Una funzionalità della piattaforma web che arriverà presto e di cui sono molto entusiasta è CSS Masonry.
Vorrei iniziare spiegando cos'è la Massoneria. Cos'è la Massoneria La muratura è un tipo di layout reso popolare da Pinterest anni fa. Crea tracce di contenuto indipendenti all'interno delle quali gli elementi si raggruppano il più vicino possibile all'inizio della traccia.
Molte persone vedono la Massoneria come un'ottima opzione per portfolio e gallerie fotografiche, cosa che certamente può fare. Ma Masonry è più flessibile di quello che vedi su Pinterest e non si limita solo ai layout a cascata. In un layout in muratura:
Le tracce possono essere colonne o righe:
Le tracce di contenuto non devono avere tutte la stessa dimensione:
Gli elementi possono estendersi su più tracce:
Gli oggetti possono essere posizionati su tracce specifiche; non devono sempre seguire l’algoritmo di posizionamento automatico:
Demo Ecco alcune semplici demo che ho realizzato utilizzando l'imminente implementazione di CSS Masonry in Chromium. Una demo della galleria fotografica, che mostra come gli elementi (il titolo in questo caso) possono estendersi su più tracce:
Un'altra gallery fotografica che mostra piste di diverse dimensioni:
Il layout di un sito di notizie con alcune tracce più larghe di altre e alcuni elementi che coprono l'intera larghezza del layout:
Una bacheca kanban che mostra che gli oggetti possono essere posizionati su binari specifici:
Nota: ille demo precedenti sono state realizzate con una versione di Chromium che non è ancora disponibile per la maggior parte degli utenti web, perché CSS Masonry sta appena iniziando a essere implementato nei browser. Tuttavia, gli sviluppatori web utilizzano con piacere le librerie per creare layout Masonry già da anni. Siti che utilizzano la muratura oggi In effetti, la massoneria è piuttosto comune oggi sul web. Ecco alcuni esempi che ho trovato oltre a Pinterest:
E qualche altro esempio, meno ovvio:
Quindi, come sono stati creati questi layout? Soluzioni alternative Un trucco che ho visto usare è invece usare un layout Flexbox, cambiando la sua direzione in colonna e impostandolo per andare a capo. In questo modo puoi posizionare elementi di diversa altezza in più colonne indipendenti, dando l'impressione di una disposizione in muratura:
Esistono, tuttavia, due limitazioni con questa soluzione alternativa:
L'ordine degli elementi è diverso da quello che sarebbe con un vero layout in Massoneria. Con Flexbox, gli elementi riempiono prima la prima colonna e, quando è piena, passano alla colonna successiva. Con la Massoneria, gli oggetti si impilano in qualunque traccia (o colonna in questo caso) abbia più spazio disponibile. Ma anche, e forse ancora più importante, questa soluzione alternativa richiede l'impostazione di un'altezza fissa per il contenitore Flexbox; altrimenti non si verificherebbe alcun avvolgimento.
Biblioteche in muratura di terze parti Per i casi più avanzati, gli sviluppatori hanno utilizzato le librerie. La libreria più conosciuta e popolare per questo si chiama semplicemente Masonry e viene scaricata circa 200.000 volte a settimana secondo NPM. Squarespace fornisce anche un componente di layout che esegue il rendering di un layout in muratura, per un'alternativa senza codice, e molti siti lo utilizzano. Entrambe queste opzioni utilizzano il codice JavaScript per posizionare gli elementi nel layout. Muratura incorporata Sono davvero entusiasta che la Massoneria stia ora iniziando ad apparire nei browser come funzionalità CSS incorporata. Col tempo, sarai in grado di utilizzare Masonry proprio come fai con Grid o Flexbox, cioè senza bisogno di soluzioni alternative o codice di terze parti. Il mio team in Microsoft ha implementato il supporto Masonry integrato nel progetto open source Chromium, su cui si basano Edge, Chrome e molti altri browser. Mozilla è stato in realtà il primo fornitore di browser a proporre un'implementazione sperimentale di Masonry nel 2020. E anche Apple è stata molto interessata a realizzare questo nuovo layout web primitivo. Anche il lavoro per standardizzare la funzionalità sta andando avanti, con un accordo all'interno del gruppo di lavoro CSS sulla direzione generale e persino su un nuovo tipo di visualizzazione: grid-lane. Se vuoi saperne di più sulla Massoneria e tenere traccia dei progressi, consulta la mia pagina delle risorse sulla Massoneria CSS. Col tempo, quando la Massoneria diventerà una funzionalità di base, proprio come Grid o Flexbox, saremo in grado di usarla semplicemente e trarre vantaggio da:
Migliori prestazioni, Migliore reattività, Facilità d'uso e codice più semplice.
Diamo uno sguardo più da vicino a questi. Prestazioni migliori Creare il tuo sistema di layout simile a quello di Masonry o utilizzare invece una libreria di terze parti significa che dovrai eseguire il codice JavaScript per posizionare gli elementi sullo schermo. Ciò significa anche che questo codice bloccherà il rendering. In effetti, o non apparirà nulla, oppure le cose non saranno nei posti giusti o nelle dimensioni giuste, finché il codice JavaScript non sarà eseguito. Il layout in muratura viene spesso utilizzato per la parte principale di una pagina Web, il che significa che il codice farebbe apparire il contenuto principale più tardi di quanto avrebbe potuto altrimenti, degradando la metrica LCP, o Largest Contentful Paint, che gioca un ruolo importante nelle prestazioni percepite e nell'ottimizzazione dei motori di ricerca. Ho testato la libreria Masonry JS con un layout semplice e simulando una connessione 4G lenta in DevTools. La libreria non è molto grande (24KB, 7,8KB gzippata), ma ci sono voluti 600 ms per caricarsi nelle mie condizioni di test. Ecco una registrazione delle prestazioni che mostra il lungo tempo di caricamento di 600 ms per la libreria Masonry e che non si è verificata alcuna altra attività di rendering mentre ciò accadeva:
Inoltre, dopo il tempo di caricamento iniziale, lo script scaricato doveva essere analizzato, compilato e quindi eseguito. Tutto ciò, come accennato prima, bloccava la visualizzazione della pagina. Con un'implementazione Masonry integrata nel browser, non avremo uno script da caricare ed eseguire. Il motore del browser farà semplicemente il suo dovere durante la fase iniziale di rendering della pagina. Migliore reattività In modo simile al primo caricamento di una pagina, il ridimensionamento della finestra del browser porta a eseguire nuovamente il rendering del layout in quella pagina. A questo punto, però, se la pagina utilizza la libreria Masonry JS, non è necessario caricare nuovamente lo script, perché è giàQui. Tuttavia, il codice che sposta gli elementi nei posti giusti deve essere eseguito. Ora questa particolare libreria sembra essere piuttosto veloce nel farlo quando la pagina viene caricata. Tuttavia, anima gli elementi quando devono essere spostati in una posizione diversa durante il ridimensionamento della finestra, e questo fa una grande differenza. Naturalmente, gli utenti non dedicano tempo a ridimensionare le finestre del browser tanto quanto noi sviluppatori. Ma questa esperienza di ridimensionamento animato può essere piuttosto fastidiosa e aumenta il tempo percepito necessario affinché la pagina si adatti alle nuove dimensioni. Facilità d'uso e codice più semplice Quanto sia facile utilizzare una funzionalità web e quanto semplice sia l'aspetto del codice sono fattori importanti che possono fare una grande differenza per il tuo team. Naturalmente, non possono mai essere importanti quanto l’esperienza dell’utente finale, ma l’esperienza dello sviluppatore influisce sulla manutenibilità. L'utilizzo di una funzionalità web integrata comporta importanti vantaggi su questo fronte:
Gli sviluppatori che già conoscono HTML, CSS e JS molto probabilmente saranno in grado di utilizzare facilmente questa funzionalità perché è stata progettata per integrarsi bene ed essere coerente con il resto della piattaforma web. Non vi è alcun rischio che vengano introdotte modifiche sostanziali nel modo in cui viene utilizzata la funzionalità. Il rischio che questa funzionalità diventi deprecata o non mantenuta è quasi pari a zero.
Nel caso di Masonry integrato, poiché è un layout primitivo, lo usi da CSS, proprio come Grid o Flexbox, senza JS coinvolto. Inoltre, altre proprietà CSS relative al layout, come gap, funzionano come ti aspetteresti. Non ci sono trucchi o soluzioni alternative da conoscere e le cose che impari sono documentate su MDN. Per la libreria Masonry JS, l'inizializzazione è un po' complessa: richiede un attributo dati con una sintassi specifica, insieme a elementi HTML nascosti per impostare le dimensioni della colonna e del gap. Inoltre, se desideri estendere le colonne, devi includere tu stesso la dimensione dello spazio per evitare problemi:
Confrontiamo questo con come apparirebbe un'implementazione in muratura integrata:
Codice più semplice e compatto che può utilizzare solo cose come gap e dove l'estensione delle tracce viene eseguita con span 2, proprio come nella griglia, e non richiede di calcolare la larghezza corretta che include la dimensione del gap. Come sapere cosa è disponibile e quando sarà disponibile? Nel complesso, la domanda non è se dovresti usare la Masonry integrata su una libreria JS, ma piuttosto quando. La libreria Masonry JS è straordinaria e da molti anni colma una lacuna nella piattaforma web, soddisfacendo molti sviluppatori e utenti. Ovviamente presenta alcuni inconvenienti se lo confronti con un'implementazione integrata in Massoneria, ma questi non sono importanti se tale implementazione non è pronta. È facile per me elencare queste nuove interessanti funzionalità della piattaforma web perché lavoro presso un fornitore di browser e quindi tendo a sapere cosa accadrà. Ma gli sviluppatori spesso condividono, sondaggio dopo sondaggio, che tenere traccia delle novità è difficile. Rimanere informati è difficile e comunque le aziende non sempre danno priorità all’apprendimento. Per aiutarti, ecco alcune risorse che forniscono aggiornamenti in modo semplice e compatto in modo da poter ottenere rapidamente le informazioni di cui hai bisogno:
La piattaforma Web presenta il sito Explorer: Potresti essere interessato alla pagina delle note di rilascio. E, se ti piacciono gli RSS, controlla il feed delle note sulla versione, nonché i feed di base Appena disponibili e Ampiamente disponibili.
La reteDashboard dello stato della piattaforma: Potrebbero piacerti le sue varie pagine dell'anno di riferimento.
Pagina della roadmap sullo stato della piattaforma Chrome.
Se hai un po’ più di tempo, potrebbero interessarti anche le note di rilascio dei fornitori di browser:
Cromo Bordo Firefox Safari
Per ulteriori risorse, consulta il mio Cheatsheet sulla navigazione nella piattaforma Web. La mia cosa non è ancora stata implementata Questo è l’altro lato del problema. Anche se trovi il tempo, l’energia e i modi per tenere traccia, c’è ancora frustrazione nel far sentire la tua voce e nell’implementare le tue funzionalità preferite. Forse stai aspettando da anni che un bug specifico venga risolto o che una funzionalità specifica venga inclusa in un browser dove ancora manca. Quello che dirò è che i fornitori di browser ascoltano. Faccio parte di diversi team interorganizzativi in cui discutiamo continuamente dei segnali e del feedback degli sviluppatori. Esaminiamo molte diverse fonti di feedback, sia interne a ciascun fornitore di browser che esterne/pubbliche su forum, progetti open source, blog e sondaggi. Inoltre, cerchiamo sempre di creare modi migliori per consentire agli sviluppatori di condividere le loro esigenze specifiche e i casi d'uso. Quindi, se puoi, chiedi di più ai fornitori di browser e fai pressione su di noi per implementare le funzionalità di cui hai bisogno. Capisco che ci vuole tempo e può anche essere intimidatorio (per non parlare dell'elevata barriera all'ingresso), ma funziona anche. Ecco alcuni modi in cui puoi far sentire la tua voce (o quella della tua azienda): Partecipa ai sondaggi annuali sullo stato di JS, sullo stato di CSS e sullo stato di HTML. Svolgono un ruolo importante nel modo in cui i fornitori di browser danno priorità al proprio lavoro. Se hai bisogno di un'API specifica basata su standard da implementare in modo coerente tra i browser, valuta la possibilità di inviare una proposta alla successiva iterazione del progetto Interop. Richiede più tempo, ma considera come Shopify e RUMvision hanno condiviso le loro liste dei desideri per Interop 2026. Informazioni dettagliate come queste possono essere molto utili per i fornitori di browser per stabilire le priorità. Per collegamenti più utili per influenzare i fornitori di browser, consulta il mio Cheatsheet sulla navigazione nella piattaforma Web. Conclusione Per concludere, spero che questo articolo ti abbia lasciato alcune cose su cui riflettere:
Entusiasmo per Masonry e altre imminenti funzionalità web. Alcune funzionalità web che potresti voler iniziare a utilizzare. Alcuni pezzi di codice personalizzato o di terze parti che potresti essere in grado di rimuovere a favore delle funzionalità integrate. Alcuni modi per tenere traccia di ciò che sta arrivando e influenzare i fornitori di browser.
Ancora più importante, spero di averti convinto dei vantaggi derivanti dall’utilizzo della piattaforma web al massimo delle sue potenzialità.
