Apa arti dukungan akhir untuk Internet Explorer bagi pelanggan dan pengembang di Maersk.com.
Saya Steve Workman, Lead Engineer untuk Maersk.com. Maersk adalah pemimpin global dalam logistik supply chain terintegrasi, yang membantu pelanggan memindahkan barang ke seluruh dunia selama 118 tahun, dengan pemesanan online selama lebih dari dua puluh tahun. Pada awal Mei 2022, @Maersk secara resmi menghentikan dukungan untuk Internet Explorer (IE) pada sistem yang digunakan pelanggannya, dari belakang Microsoft secara resmi mengakhiri dukungan untuk IE pada Juni 2022. Ini adalah akhir dari era penting web dan awal dari era baru.
Saya bergabung dengan Maersk pada tahun 2018, dan project pertama saya adalah membuat menu navigasi global yang baru. Software ini harus dapat diuji sepenuhnya, mudah di-deploy, dan diupdate secara global tanpa periode nonaktif, menjadi mobile-first, responsif, mendukung banyak merek, dapat dikonfigurasi, dilokalkan ke dalam 11 bahasa... dan mendukung IE9.
Pada tahun 2018, Windows 7, dan browser defaultnya IE9, masih sangat populer, dengan Windows 10 dan IE11 hanya mencapai massa kritis pada awal 2020 (menurut penghitung statistik). Berdasarkan data kami, kami menemukan data perdagangan yang signifikan berasal dari pelanggan yang menggunakan IE9, atau lebih buruk lagi, IE11 dalam mode kompatibilitas. Traffic ini secara signifikan mengarah ke pasar negara berkembang dan di area tempat basis pelanggan Maersk berkembang pesat.
Jika menu navigasi tidak berfungsi, tombol login akan sulit ditemukan. Jika login tidak berfungsi, pengguna tidak dapat memesan penampung, dan tiba-tiba Anda mengalami masalah besar yang disebabkan oleh browser lama.
Untuk mengatasi hal ini, kami mengambil sikap progressive enhancement terhadap komponen navigasi dan semua aplikasi web mendatang. Kami akan membuatnya "berfungsi" tetapi mungkin ada polyfill dan pembatasan yang signifikan untuk melakukannya—misalnya, IE tidak mendukung Fetch API, tetapi ada polyfill yang kembali ke IE10 yang kami sertakan untuk browser tersebut. Untuk IE9, kami membuat kode panggilan XMLHttpRequest dalam file terpisah, agar hanya dimuat jika fetch tidak dapat di-polyfill.
Ketika tiba waktunya untuk menghentikan dukungan IE9, ketika hanya beberapa pelanggan yang tersisa, kami dapat menghapus kode ini dari aplikasi kami, dengan sedikit usaha dan manfaat maksimum bagi pengguna kami di browser modern.
Seiring dengan berlanjutnya transformasi digital Maersk, kami membangun kembali banyak bagian situs tersebut menggunakan front-end mikro yang didukung VueJS. Vue memiliki banyak fitur yang membuatnya cocok untuk masa mendatang, dengan konfigurasi preset yang bagus untuk tree shaking dan pengoptimalan paket lanjutan, ke mode modern yang membuat dua versi aplikasi, yaitu versi yang menggunakan sintaksis Modul ES terbaru untuk browser evergreen dan satu lagi untuk aplikasi lama yang tidak memahami modul ES6. Versi lawas ini disajikan ke browser seperti IE dan biasanya berukuran 100 KB lebih besar dalam paket polyfill yang di-gzip, hanya dari jumlah fitur yang tidak dimiliki browser.
Kami mendapati bahwa kami juga dapat menggunakan sebagian besar teknik tata letak CSS modern seperti petak CSS, berkat Microsoft yang telah memulai spesifikasinya di IE10. Dengan bantuan autoprefixer, dan artikel Trik CSS ini untuk membantu kami benar-benar pandai menamai berbagai area halaman, kami memiliki sistem tata letak yang ringan, cocok untuk project apa pun, dan sangat fleksibel. Namun, ada masalah kompatibilitas yang membutuhkan waktu lama untuk memperbaikinya.
Tiba-tiba kami kembali pada tahap analisis biaya-manfaat, tetapi untuk versi IE apa pun saat ini, dan seperti halnya IE9, ini adalah kompromi antara mendukung semua orang, dan berminggu-minggu waktu pengembangan yang menyakitkan untuk setiap proyek. Meyakinkan bahwa menggunakan browser modern merupakan pengalaman yang lebih baik bagi pelanggan, kami mendorong pengguna untuk beralih dari IE ketika mereka mengunjungi situs. Kami mendapati bahwa hal ini berhasil dalam jumlah kecil bagi pelanggan aktif yang sudah terbiasa membuka IE untuk interaksi mereka dengan kami. Pesan ini bagus, tetapi tidak cukup untuk membuat perhitungan yang tepat.
Seiring berkurangnya kunjungan dari IE, Maersk memutuskan untuk mengikuti petunjuk dari banyak lainnya sebelum mereka dan mengakhiri dukungan resmi untuk IE, meskipun angka tetap menunjukkan bahwa kami harus mendukungnya. Jadi, mengapa harus dilakukan sekarang?
Sederhananya, platform web telah pindah, dan IE11 tidak dapat melakukan hal-hal yang perlu kita lakukan, bahkan dengan sejumlah kecil polyfill. Ambil komponen navigasi—di dunia platform web modern, ini adalah elemen khusus, dengan gaya terenkapsulasinya sendiri, yang didorong oleh variabel CSS dan kueri container sehingga ia mengontrol semuanya dalam satu komponen. Tanpa bagian platform ini, gaya komponen ini bisa diubah sepenuhnya dari aplikasi, dan gaya bisa bocor ke komponen lain atau kembali ke aplikasi. Ada polyfill yang memungkinkan Anda mengemulasi sebagian besar fitur di sini, termasuk elemen kustom, ShadyCSS, ShadyDOM, dan elemen template.
Dalam praktiknya, polyfill ini berfungsi dengan sangat baik untuk komponen terisolasi—tetapi ketika menggabungkan beberapa komponen dalam aplikasi yang kompleks, IE dihentikan dengan puluhan detik layar putih sementara runtime JavaScript mencoba menghitung hierarki gaya selama empat puluh detik. Singkatnya, pengalaman pengguna sangat terganggu untuk mendukung browser.
Sebelumnya, kita memiliki gangguan kecil—polyfill yang mungkin menambahkan setengah detik ke first paint, tetapi tidak lebih dari itu. Hal ini berbeda, dan aplikasi ini menjadi tidak dapat digunakan. Polyfill hanya dapat melakukan banyak hal ketika ditantang dengan kompleksitas platform web modern.
Dan Anda tahu apa yang terjadi sejak kami menghentikan dukungan IE? Sangat, sangat sedikit. Tidak ada longsoran tiket dukungan pelanggan atau umpan balik negatif. Engineer kami lebih puas dan aplikasi kami memiliki jalur upgrade ke Vue 3 (yang tidak mendukung IE11 karena objek Proxy tidak dapat di-polyfill) dan ukuran paket yang lebih kecil. Dukungan penuh untuk variabel CSS dan font variabel memungkinkan penerapan tema yang lebih sederhana di seluruh brand, dan kemampuan untuk menggunakan token dalam komponen file tunggal Vue juga mengurangi kompleksitas kognitif, sehingga memberikan pengalaman developer yang lebih baik.
Dari sudut pandang pelanggan, penggunaan IE terus menurun secara perlahan. IE belum dinonaktifkan dari situs, tetapi seiring dengan perubahan progresif menjadi degradasi halus, fitur dan aplikasi akan berhenti berfungsi. Pelanggan akan mendapatkan manfaat dari kemajuan teknologi kami—mendapatkan pengalaman yang lebih konsisten dari situs karena praktik terbaik, aksesibilitas, dan desain diintegrasikan ke dalam sistem desain berbasis Lit yang terus berkembang, dengan interoperabilitas penuh ke framework apa pun yang ada saat ini, atau di masa mendatang.
Saya tidak sabar untuk melihat bagaimana fitur platform web baru dapat digunakan di dalam perusahaan—mulai dari penggunaan mode gelap sehingga sistem moda transportasi laut lebih mudah digunakan di malam hari, hingga Bluetooth Web, WebXR, dan PWA sehingga aplikasi web dapat berinteraksi dengan dunia fisik di sekitar kita dalam kondisi apa pun. Terima kasih, Internet Explorer, untuk banyak hal; sekarang kita bebas untuk mengikuti platform web.
Banner besar oleh Matt Botsford.