Che cosa ha significato il ritiro del supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.
Sono Steve Workman e sono l'ingegnere capo di Maersk.com. Maersk è il leader mondiale nella logistica integrata della catena di approvvigionamento e aiuta i clienti a spostare le merci in tutto il mondo da 118 anni, con prenotazioni online da oltre 20 anni. All'inizio di maggio 2022, @Maersk ha interrotto ufficialmente il supporto di Internet Explorer (IE) sui propri sistemi rivolti ai clienti, in seguito al ritiro formale del supporto di IE da parte di Microsoft a giugno 2022. È la fine di un'era importante del web e l'inizio di una nuova.
Ho iniziato a lavorare in Maersk nel 2018 e il mio primo progetto è stato creare una nuova barra di navigazione globale. Doveva essere completamente verificabile, facile da implementare e aggiornare a livello globale senza tempi di riposo, mobile-first, responsive, supportare più brand, essere configurabile, localizzato in 11 lingue e supportare IE9.
Nel 2018, Windows 7 e il suo browser predefinito IE9 erano ancora molto apprezzati, mentre Windows 10 e IE11 hanno raggiunto la massa critica solo all'inizio del 2020 (secondo il contatore delle statistiche). Esaminando i nostri dati, abbiamo rilevato una quantità significativa di scambi provenienti da clienti che utilizzano IE9 o, peggio, IE11 in modalità di compatibilità. Questo traffico era orientato in modo significativo verso i mercati emergenti e verso aree in cui la base di clienti di Maersk stava crescendo rapidamente.
Se il menu di navigazione non funziona, è difficile trovare il pulsante di accesso. Se l'accesso non funziona, non possono prenotare i container e improvvisamente hai un grosso problema, causato dai browser precedenti.
Per risolvere il problema, abbiamo adottato un approccio di miglioramento progressivo con il componente di navigazione e tutte le app web future. Possiamo fare in modo che "funzioni", ma potrebbero essere necessari polyfill e limitazioni significativi. Ad esempio, IE non supporta l'API Fetch, ma esistono polyfill che risalgono a IE10 e che includiamo per questi browser. Per IE9, abbiamo codificato le chiamate XMLHttpRequest in un file separato, da caricare solo nei casi in cui non fosse possibile eseguire il polyfill di fetch.
Quando è arrivato il momento di ritirare il supporto di IE9, quando rimanevano solo pochi clienti, abbiamo potuto semplicemente rimuovere questo codice dalle nostre applicazioni, con il minimo sforzo e il massimo vantaggio per i nostri utenti su browser moderni.
Con la continuazione della trasformazione digitale di Maersk, abbiamo ricostruito molte parti del sito in micro-front-end basati su VueJS. Vue aveva molte funzionalità che lo rendevano adatto al futuro, con una configurazione preimpostata ottimale per l'ottimizzazione avanzata di tree-shaking e bundle, fino a una modalità moderna in cui vengono create due versioni dell'applicazione: una che utilizza la sintassi del modulo ES più recente per i browser evergreen e una per le applicazioni precedenti che non comprendono i moduli ES6. Questa versione precedente viene pubblicata in browser come IE ed è spesso più grande di 100 KB nel bundle di polyfill compresso con gzip semplicemente per la quantità di funzionalità mancanti nel browser.
Abbiamo scoperto che potevamo utilizzare anche la maggior parte delle tecniche di layout CSS moderne, come la griglia CSS, grazie al fatto che Microsoft aveva iniziato a sviluppare la specifica fin da IE10. Con l'aiuto di autoprefixer e di questo articolo di CSS Tricks che ci ha aiutato a diventare molto bravi a dare un nome alle diverse aree di una pagina, abbiamo creato un sistema di layout leggero, adatto a qualsiasi progetto ed estremamente flessibile. Tuttavia, ci sono stati problemi di compatibilità che hanno richiesto molto tempo per essere risolti.
Improvvisamente siamo tornati alla fase di analisi costi-benefici, ma questa volta per qualsiasi versione di IE e, proprio come con IE9, si tratta di un compromesso tra il supporto di tutti e settimane di faticosi tempi di sviluppo per ogni progetto. Convinti che l'utilizzo di un browser moderno sia un'esperienza migliore per i nostri clienti, abbiamo indotto i nostri utenti ad abbandonare IE quando visitavano il sito web. Abbiamo riscontrato che questo approccio ha avuto un buon esito per un numero ridotto di clienti attivi che avevano preso l'abitudine di aprire IE per le interazioni con noi. Questo messaggio è stato buono, ma non abbastanza per fare in modo che la matematica funzioni.
Con il calo delle visite da IE, Maersk ha deciso di seguire l'esempio di molti altri prima di loro e di interrompere il supporto ufficiale di IE, anche se i numeri indicano ancora che dovremmo supportarlo. Perché ora?
In parole povere, la piattaforma web è andata avanti e IE11 non può fare ciò che ci serve, nemmeno con un piccolo esercito di polyfill. Prendiamo il componente di navigazione: in una piattaforma web moderna si tratta di un elemento personalizzato, con stili incapsulati, basato su variabili CSS e query del contenitore, in modo da controllare tutto in un unico componente. Senza questi componenti della piattaforma, lo stile di questi componenti può essere completamente modificato dall'applicazione e gli stili possono essere trasferiti ad altri componenti o all'applicazione. Esistono polyfill che ti consentono di emulare la maggior parte delle funzionalità, tra cui elementi personalizzati, ShadyCSS, ShadyDOM e l'elemento template.
In pratica, questi polyfill sono ottimi per i componenti isolati, ma quando combini più componenti in un'applicazione complessa, IE si blocca con decine di secondi di schermo bianco mentre il runtime JavaScript tenta di calcolare l'albero di stili per la quarantesima volta. In breve, l'esperienza utente è stata gravemente compromessa per supportare il browser.
In passato, si verificavano piccole interruzioni, ovvero polyfill che potevano aggiungere mezzo secondo al primo rendering, ma non molto di più. Questa volta è stato diverso e queste app non sono più state utilizzabili. I polyfill possono fare molto, ma non possono risolvere tutti i problemi della complessità della moderna piattaforma web.
E sai cosa è successo da quando abbiamo interrotto il supporto di IE? Molto, molto poco. Non c'è stata un'ondata di ticket di assistenza clienti o feedback negativi. I nostri ingegneri sono più soddisfatti e le nostre applicazioni hanno un percorso di upgrade a Vue 3 (che non supporta IE11 perché l'oggetto Proxy non può essere sottoposto a polyfilling) e dimensioni dei bundle più piccole. Il supporto completo delle variabili CSS e dei caratteri variabili consente di creare temi più semplici per più brand e la possibilità di utilizzare i token all'interno dei componenti a file singolo di Vue riduce anche la complessità cognitiva, migliorando l'esperienza dello sviluppatore.
Dal punto di vista del cliente, l'utilizzo di IE continua a diminuire lentamente. IE non è stato disattivato sul sito, ma man mano che il miglioramento progressivo si trasforma in un ritiro graduale, le funzionalità e le applicazioni non funzioneranno più. I clienti trarranno vantaggio dai progressi della nostra tecnologia, usufruendo di un'esperienza più coerente sul sito, in quanto le best practice, l'accessibilità e il design sono integrati in un sistema di design basato su Lit in continua evoluzione, con piena interoperabilità con qualsiasi framework esistente o futuro.
Non vedo l'ora di scoprire come le nuove funzionalità della piattaforma web possono essere utilizzate all'interno dell'azienda, dall'utilizzo della modalità oscura per semplificare l'utilizzo dei sistemi delle navi di notte, a Web Bluetooth, WebXR e PWA in modo che le nostre app web possano interagire con il mondo fisico che ci circonda in qualsiasi condizione. Grazie, Internet Explorer, per molte cose. Ora possiamo stare al passo con la piattaforma web.