Che cosa ha significato il ritiro del supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.
Mi chiamo Steve Workman e sono Lead Engineer di 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 da 118 anni e da oltre vent'anni effettua prenotazioni online. All'inizio di maggio 2022, @Maersk ha ufficialmente smesso di supportare Internet Explorer (IE) sui suoi sistemi rivolti ai clienti, a seguito della mancata interruzione formale del supporto per IE per 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 inattività, 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 significativamente inclinato verso i mercati emergenti e in aree in cui la base clienti di Maersk cresceva rapidamente.
Se il menu di navigazione non funziona, è difficile trovare il pulsante di accesso. Se l'accesso non funziona, i contenitori non potranno prenotare i contenitori e improvvisamente si verifica un grave problema a causa dei browser precedenti.
Per risolvere il problema, abbiamo adottato un approccio di miglioramento progressivo con il componente di navigazione e tutte le future app web. 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, nei casi in cui rimanevano solo pochi clienti, eravamo in grado di eliminare semplicemente il codice dalle nostre applicazioni, con il minimo sforzo e il massimo vantaggio per i nostri utenti che utilizzano browser moderni.
Con la continuazione della trasformazione digitale di Maersk, abbiamo ricostruito molte parti del sito in micro-front-end basati su VueJS. Vue disponeva di molte funzionalità che l'hanno resa adatta per il futuro, con un'ottima configurazione preimpostata per l'analisi avanzata degli alberi e l'ottimizzazione dei bundle fino a una modalità moderna in cui vengono create due versioni dell'applicazione: una che utilizza la sintassi più recente dei moduli ES per i browser evergreen e una per le applicazioni legacy che non comprendono i moduli ES6. Questa versione legacy viene fornita su browser come IE e spesso è 100 KB più grande nel pacchetto polyfill compresso con gzip semplicemente dalla quantità di funzionalità che manca al browser.
Abbiamo scoperto che potevamo utilizzare anche la maggior parte delle moderne tecniche di layout CSS, come la griglia CSS, grazie al fatto che Microsoft ha avviato le specifiche con IE10. Con l'aiuto di autoprefixer e questo articolo sui trucchi CSS che ci ha aiutati a nominare aree diverse di una pagina, avevamo un sistema di layout leggero, adatto a qualsiasi progetto ed estremamente flessibile. Tuttavia, si sono verificati problemi di compatibilità che hanno richiesto molto tempo per essere risolti.
All'improvviso, torniamo alla fase di analisi costi-benefici, ma questa volta per qualsiasi versione di IE, e proprio come con IE9, c'è un compromesso tra il supporto di tutti e settimane di lunghi tempi di sviluppo per ogni progetto. Con la certezza che l'utilizzo di un browser moderno sia un'esperienza migliore per i nostri clienti, abbiamo allontanato i nostri utenti da IE quando visitavano il nostro 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 era buono, ma non abbastanza per far funzionare la matematica.
Con il ritardo delle visite da IE, Maersk ha deciso di seguire la guida di molti altri prima di loro e di porre fine al supporto ufficiale per IE, anche se i numeri indicano ancora che dovremmo supportarlo. Dunque, 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 modificato completamente 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à, inclusi gli 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 solo fin dove arriva la complessità della moderna piattaforma web.
Sai cosa è successo da quando abbiamo interrotto il supporto di IE? Molto, molto poco. Non c'è stato nessun ticket di assistenza clienti o feedback negativo. 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.
Sono entusiasta di vedere come le nuove funzionalità della piattaforma web possano essere utilizzate all'interno dell'azienda, dall'utilizzo della modalità Buio per rendere più semplice l'utilizzo dei sistemi navale di notte al Web Bluetooth, WebXR e PWA per consentire alle nostre app web di 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.