Che cosa ha significato interrompere il supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.
Sono Steve Workman e sono Lead Engineer per Maersk.com. Maersk è il leader globale nella logistica integrata della catena di fornitura, che aiuta i clienti a spostare le merci in tutto il mondo per 118 anni, con prenotazioni online da oltre vent'anni. All'inizio di maggio 2022, @Maersk ha ufficialmente smesso di supportare Internet Explorer (IE) sui suoi sistemi rivolti ai clienti, dopo che Microsoft ha terminato formalmente il supporto di IE a giugno 2022. Questa è la fine di un'importante era del web e l'inizio di una nuova.
Ho iniziato a lavorare a Maersk nel 2018 e il mio primo progetto è stato quello di creare una nuova barra di navigazione globale. Doveva essere completamente testabile, facile da implementare e aggiornare a livello globale senza tempi di inattività, essere orientata ai dispositivi mobili, essere reattiva, supportare più brand, essere configurabile, localizzata in 11 lingue e supportare IE9.
Nel 2018, Windows 7 e il suo browser predefinito IE9, erano ancora molto popolari, con Windows 10 e IE11 che raggiungevano solo la massa critica all’inizio del 2020 (secondo le statistiche). Esaminando i nostri dati, abbiamo rilevato che una quantità significativa di scambi proviene da clienti che utilizzano IE9 o peggio ancora, IE11 in modalità di compatibilità. Questo traffico era notevolmente inclinato verso i mercati emergenti e in aree in cui la base 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 sarà possibile prenotare i contenitori e all'improvviso si verificherà un grosso problema causato dai browser precedenti.
Per risolvere questo problema, abbiamo adottato un miglioramento progressivo con il componente di navigazione e tutte le app web future. Lo renderemmo "funzionante", ma potrebbero esserci polyfill significativi e restrizioni per questo scopo. Ad esempio, IE non supporta l'API Fetch, ma sono presenti polyfill che tornano 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 sia stato possibile eseguire il polyfill di fetch.
Al momento di interrompere il supporto di IE9, quando rimanevamo solo una manciata di clienti, siamo riusciti a rimuovere semplicemente questo codice dalle nostre applicazioni, con il minimo sforzo e il massimo vantaggio per i nostri utenti che utilizzano browser moderni.
Mentre Maersk continuava la trasformazione digitale, abbiamo ricostruito molte parti del sito in micro-front-end basati su VueJS. Vue aveva molte funzionalità che l'hanno resa amichevole al futuro, con un'ottima configurazione preimpostata per l'agitazione avanzata degli alberi e l'ottimizzazione dei bundle, a una modalità moderna in cui vengono create due versioni dell'applicazione: una che utilizza la sintassi ES Module più recente per i browser evergreen e una per le applicazioni legacy che non comprendono i moduli ES6. Questa versione precedente viene pubblicata su browser come IE ed è spesso 100 kB più grande nel bundle polyfill compresso con gzip semplicemente per la quantità di funzionalità mancanti nel browser.
Abbiamo scoperto di poter utilizzare anche la maggior parte delle moderne tecniche di layout CSS, ad esempio la griglia CSS, grazie al fatto che Microsoft ha avviato le specifiche in IE10. Con l'aiuto di autoprefixer e di questo articolo sui trucchi per i CSS, che ci aiuteranno ad assegnare un nome alle diverse aree di una pagina, avevamo un sistema di layout leggero, adatto a qualsiasi progetto ed estremamente flessibile. Tuttavia, c'erano problemi di compatibilità la cui risoluzione richiedeva molto tempo.
Improvvisamente torniamo 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 per tutti e settimane di dolorosi tempi di sviluppo per ogni progetto. Confidando nel fatto che l'utilizzo di un browser moderno offre un'esperienza migliore ai nostri clienti, abbiamo allontanato i nostri utenti da IE quando hanno visitato il sito web. Abbiamo riscontrato che questa soluzione ha avuto successo in piccole quantità per i clienti attivi che avevano preso l'abitudine di aprire IE per le loro interazioni con noi. Questo messaggio era buono, ma non abbastanza per far funzionare la matematica.
Con la fine delle visite da parte di IE, Maersk ha deciso di seguire l'esempio di molte altre persone prima di loro e di interrompere il supporto ufficiale per IE, anche se le cifre indicano ancora che dovremmo sostenerlo. Perché ora?
In breve, la piattaforma web è passata e IE11 non è in grado di fare le cose che ci servono, anche con un piccolo esercito di polyfill. Prendiamo come esempio il componente di navigazione. Nel mondo moderno di una piattaforma web, si tratta di un elemento personalizzato con i suoi stili incapsulati basati sulle variabili CSS e sulle query del contenitore, in modo da controllare tutto all'interno di un unico componente. Senza questi componenti della piattaforma, lo stile di questi componenti può essere completamente cambiato dall'applicazione e gli stili possono passare in altri componenti o tornare all'applicazione. Esistono polyfill che ti consentono di emulare la maggior parte delle funzionalità qui, inclusi gli elementi personalizzati, ShadyCSS, ShadyDOM e l'elemento template.
In pratica, questi polyfill sono ideali per componenti isolati, ma quando si combinano più componenti in un'applicazione complessa, IE si arresta con decine di secondi di schermata bianca mentre il runtime JavaScript cerca di calcolare l'albero degli stili per i quaranta secondi. In breve, l'esperienza utente è stata gravemente compromessa per supportare il browser.
In passato, avevamo piccole interruzioni, ovvero i polyfill che aggiungevano mezzo secondo alla prima visualizzazione, ma non molto di più. La situazione era diversa e queste app erano diventate inutilizzabili. Polyfills può fare così tanto solo quando messo alla prova la complessità della moderna piattaforma web.
Sai cosa è successo da quando abbiamo interrotto il supporto di IE? Molto, molto poco. Non sono state registrate numerose richieste di assistenza clienti o feedback negativi. I nostri ingegneri sono più soddisfatti e le nostre applicazioni offrono un percorso di upgrade a Vue 3 (che non supporta IE11 in quanto l'oggetto Proxy non può essere polyfill) e pacchetti di dimensioni inferiori. Il supporto completo delle variabili CSS e dei caratteri variabili consente di creare temi più semplici per tutti i brand. Inoltre, la possibilità di utilizzare i token all'interno dei componenti a file singolo di Vue riduce la complessità cognitiva, migliorando l'esperienza degli sviluppatori.
Dal punto di vista del cliente, l'utilizzo di IE continua a diminuire lentamente. IE non è stato disattivato dal sito, ma a mano a mano che il miglioramento progressivo diventa un deterioramento controllato, le funzionalità e le applicazioni smetteranno di funzionare. I clienti trarranno vantaggio dai progressi della nostra tecnologia, grazie a un'esperienza più coerente sul sito, poiché le best practice, l'accessibilità e il design saranno integrati in un sistema di progettazione basato su Lit in evoluzione, con interoperabilità completa con qualsiasi framework esistente o futuro.
Sono entusiasta di vedere come le nuove funzionalità della piattaforma web possono essere utilizzate all'interno dell'azienda, dall'utilizzo della modalità Buio, che rende i sistemi imbarcazioni più facili da usare di notte, a Bluetooth web, 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 siamo liberi di stare al passo con la piattaforma web.
Immagine hero di Matt Botsford.