Arti penghentian dukungan untuk Internet Explorer bagi pelanggan dan developer di Maersk.com.
Saya Steve Workman dan saya adalah Lead Engineer untuk Maersk.com. Maersk adalah pemimpin global dalam logistik rantai pasokan terintegrasi, yang membantu pelanggan mengangkut barang di seluruh dunia selama 118 tahun, dengan pemesanan online selama lebih dari dua puluh tahun. Pada awal Mei 2022, @Maersk secara resmi berhenti mendukung Internet Explorer (IE) di sistem yang ditujukan untuk pelanggan, setelah Microsoft mengakhiri dukungan secara resmi 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 baru. Aplikasi tersebut harus dapat sepenuhnya diuji, mudah di-deploy dan diupdate secara global tanpa periode nonaktif, mengutamakan perangkat seluler, responsif, mendukung berbagai 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 sejumlah besar perdagangan yang berasal dari pelanggan yang menggunakan IE9, atau lebih buruk lagi, IE11 dalam mode kompatibilitas. Traffic ini secara signifikan lebih banyak berasal dari pasar berkembang dan di area tempat basis pelanggan Maersk tumbuh dengan cepat.
Jika menu navigasi tidak berfungsi, akan sulit menemukan tombol login. Jika login tidak berfungsi, mereka 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 dengan 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, yang hanya akan dimuat jika fetch tidak dapat diisi ulang.
Saat tiba waktunya untuk menghentikan dukungan IE9, saat hanya ada segelintir pelanggan yang tersisa, kami dapat menghapus kode ini dari aplikasi dengan mudah, dengan upaya minimal dan manfaat maksimal bagi pengguna kami di browser modern.
Seiring transformasi digital Maersk yang terus berlanjut, kami membangun ulang banyak bagian situs di frontend mikro yang didukung VueJS. Vue memiliki banyak fitur yang membuatnya cocok untuk masa mendatang, dengan konfigurasi preset yang bagus untuk pengoptimalan paket dan tree-shaking lanjutan, hingga mode modern tempat dua versi aplikasi dibuat—satu yang menggunakan sintaksis ES Module terbaru untuk browser evergreen, dan satu lagi untuk aplikasi lama yang tidak memahami modul ES6. Versi lama ini disajikan ke browser seperti IE dan sering kali berukuran 100KB lebih besar dalam paket polyfill yang di-gzip, hanya dari jumlah fitur yang tidak ada pada browser.
Kami mendapati bahwa kami juga bisa menggunakan sebagian besar teknik tata letak CSS modern seperti kisi-kisi CSS berkat Microsoft yang telah memulai cara spesifikasi pada IE10. Dengan bantuan autoprefixer, dan artikel CSS Tricks ini untuk membantu kita menjadi sangat mahir dalam memberi nama berbagai area halaman, kita memiliki sistem tata letak yang ringan, cocok untuk project apa pun, dan sangat fleksibel. Namun, ada masalah kompatibilitas yang memerlukan banyak waktu untuk diperbaiki.
Tiba-tiba kita kembali ke tahap analisis biaya-manfaat, tetapi kali ini untuk semua versi IE, dan seperti halnya IE9, ini adalah kompromi antara mendukung semua orang, dan waktu pengembangan yang melelahkan selama berminggu-minggu untuk setiap project. Yakin bahwa menggunakan browser modern akan memberikan pengalaman yang lebih baik bagi pelanggan, kami mendorong pengguna untuk tidak menggunakan IE saat mereka mengunjungi situs. Kami mendapati bahwa hal ini berhasil dalam jumlah kecil untuk pelanggan aktif yang terbiasa membuka IE untuk berinteraksi dengan kami. Pesan ini bagus, tetapi tidak cukup untuk membuat matematika berfungsi.
Seiring kunjungan dari IE menurun, Maersk memutuskan untuk mengikuti jejak banyak perusahaan lain sebelum mereka dan mengakhiri dukungan resmi untuk IE, meskipun angkanya masih menunjukkan bahwa kami harus mendukungnya. Jadi, mengapa sekarang?
Singkatnya, platform web telah berkembang, dan IE11 tidak dapat melakukan hal-hal yang kita perlukan, bahkan dengan sekumpulan kecil polyfill. Ambil komponen navigasi—di dunia platform web modern, ini adalah elemen kustom, dengan gaya yang dienkapsulasi sendiri, yang didorong oleh variabel CSS dan kueri penampung sehingga mengontrol semuanya dalam satu komponen. Tanpa bagian platform ini, gaya komponen ini dapat diubah sepenuhnya dari aplikasi, dan gaya dapat 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 baik untuk komponen terisolasi—tetapi saat menggabungkan beberapa komponen dalam aplikasi yang kompleks, IE berhenti berfungsi dengan layar putih selama puluhan detik saat runtime JavaScript mencoba menghitung hierarki gaya untuk keempat puluh detik. Singkatnya, pengalaman pengguna sangat terganggu untuk mendukung browser.
Sebelumnya, kami mengalami gangguan kecil—polyfill yang mungkin menambahkan setengah detik ke proses rendering pertama, tetapi tidak lebih dari itu. Hal ini berbeda, dan aplikasi ini menjadi tidak dapat digunakan. Polyfill hanya dapat melakukan banyak hal saat dihadapkan dengan kompleksitas platform web modern.
Dan tahukah Anda apa yang terjadi sejak kami menghentikan dukungan IE? Sangat, sangat sedikit. Tidak ada banyak tiket dukungan pelanggan, atau masukan negatif. Engineer kami lebih bahagia dan aplikasi kami memiliki jalur upgrade ke Vue 3 (yang tidak mendukung IE11 karena objek Proxy tidak dapat diisi ulang) dan ukuran paket yang lebih kecil. Dukungan penuh untuk variabel CSS dan font variabel memungkinkan tema yang lebih sederhana di seluruh merek, dan kemampuan untuk menggunakan token dalam komponen file tunggal Vue juga mengurangi kompleksitas kognitif, sehingga memberikan pengalaman developer yang lebih baik.
Dari perspektif pelanggan, penggunaan IE terus menurun secara perlahan. IE belum dinonaktifkan dari situs, tetapi seiring peningkatan progresif berubah 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 senang melihat bagaimana fitur platform web baru dapat digunakan dalam perusahaan—mulai dari memanfaatkan mode gelap agar sistem kapal lebih mudah digunakan pada malam hari, hingga Web Bluetooth, WebXR, dan PWA sehingga aplikasi web kami dapat berinteraksi dengan dunia fisik di sekitar kita dalam kondisi apa pun. Terima kasih, Internet Explorer, atas banyak hal; sekarang kami bebas untuk mengejar ketinggalan dengan platform web.