การหยุดรองรับ Internet Explorer ส่งผลต่อลูกค้าและนักพัฒนาซอฟต์แวร์ที่ Maersk.com อย่างไร
ผมชื่อ Steve Workman เป็นหัวหน้าวิศวกรของ Maersk.com โดย Maersk เป็นผู้นำระดับโลกด้านโลจิสติกส์ซัพพลายเชนแบบรวมที่ช่วยให้ลูกค้าขนส่งสินค้าทั่วโลกมาเป็นเวลา 118 ปี และให้บริการจองออนไลน์มานานกว่า 20 ปี เมื่อต้นเดือนพฤษภาคม 2022 @Maersk ได้หยุดรองรับ Internet Explorer (IE) ในระบบที่แสดงต่อลูกค้าอย่างเป็นทางการแล้ว หลังจากที่ Microsoft หยุดรองรับ IE อย่างเป็นทางการในเดือนมิถุนายน 2022 นี่เป็นจุดสิ้นสุดของยุคที่สำคัญของเว็บ และจุดเริ่มต้นของยุคใหม่
ฉันร่วมงานกับ Maersk ในปี 2018 และโปรเจ็กต์แรกคือการสร้างแถบนำทางทั่วโลกแบบใหม่ แพลตฟอร์มต้องทดสอบได้อย่างเต็มที่ ติดตั้งใช้งานและอัปเดตทั่วโลกได้ง่ายโดยไม่หยุดชะงัก เน้นอุปกรณ์เคลื่อนที่เป็นหลัก ตอบสนองได้ดี รองรับหลายแบรนด์ กำหนดค่าได้ แปลเป็น 11 ภาษา… และรองรับ IE9
ในปี 2018 Windows 7 และเบราว์เซอร์เริ่มต้น IE9 ยังคงได้รับความนิยมอย่างมาก ขณะที่ Windows 10 และ IE11 เพิ่งได้รับความนิยมสูงสุดในช่วงต้นปี 2020 (ตามเครื่องมือนับสถิติ) เมื่อตรวจสอบข้อมูล เราพบว่ามีการซื้อขายจำนวนมากที่มาจากลูกค้าที่ใช้ IE9 หรือแย่กว่านั้นคือ IE11 ในโหมดความเข้ากันได้ การเข้าชมนี้มุ่งเน้นไปที่ตลาดเกิดใหม่และพื้นที่ที่ฐานลูกค้าของ Maersk เติบโตอย่างรวดเร็ว
หากเมนูการนำทางไม่ทำงาน คุณอาจหาปุ่มเข้าสู่ระบบไม่เจอ หากการเข้าสู่ระบบไม่ทำงาน ลูกค้าจะจองคอนเทนเนอร์ไม่ได้ และคุณก็เกิดปัญหาใหญ่ขึ้นโดยฉับพลัน ซึ่งเกิดจากเบราว์เซอร์รุ่นเดิม
เราแก้ปัญหานี้ด้วยการปรับปรุงแบบค่อยเป็นค่อยไปกับคอมโพเนนต์การนําทางและเว็บแอปทั้งหมดในอนาคต เราจะทำให้ "ใช้งานได้" แต่อาจต้องใช้ polyfill และข้อจำกัดที่สำคัญในการทำเช่นนั้น เช่น IE ไม่รองรับ Fetch API แต่เรามี polyfill ที่ย้อนกลับไปใช้กับ IE10 ซึ่งรวมไว้สำหรับเบราว์เซอร์เหล่านั้น สําหรับ IE9 เราได้เขียนโค้ดการเรียก XMLHttpRequest ในไฟล์แยกต่างหาก เพื่อที่จะโหลดเฉพาะในกรณีที่ไม่สามารถใช้ fetch กับโพลีไฟล์ได้
เมื่อถึงเวลาหยุดรองรับ IE9 ซึ่งมีลูกค้าเพียงไม่กี่รายเหลืออยู่ เราก็สามารถยกเลิกการใช้โค้ดนี้จากแอปพลิเคชันได้โดยง่าย โดยใช้ความพยายามเพียงเล็กน้อยและมอบประโยชน์สูงสุดให้แก่ผู้ใช้ในเบราว์เซอร์สมัยใหม่
เมื่อ Maersk เดินหน้าการเปลี่ยนแปลงสู่ระบบดิจิทัลอย่างต่อเนื่อง เราจึงสร้างส่วนต่างๆ ของเว็บไซต์ขึ้นมาใหม่ใน Micro-Front End ที่ขับเคลื่อนโดย VueJS Vue มีฟีเจอร์มากมายที่รองรับการใช้งานในอนาคต รวมถึงการกำหนดค่าที่กำหนดล่วงหน้าที่ยอดเยี่ยมสำหรับการแยกไฟล์ขยะขั้นสูงและการเพิ่มประสิทธิภาพ Bundle ไปจนถึงโหมดสมัยใหม่ที่สร้างแอปพลิเคชัน 2 เวอร์ชัน ได้แก่ เวอร์ชันที่ใช้ไวยากรณ์โมดูล ES เวอร์ชันล่าสุดสำหรับเบราว์เซอร์ที่ใช้งานได้ทุกรุ่น และเวอร์ชันสำหรับแอปพลิเคชันเดิมที่ไม่เข้าใจโมดูล ES6 เวอร์ชันเดิมนี้จะแสดงในเบราว์เซอร์ เช่น IE และมักจะมีขนาดใหญ่กว่า 100 KB ในแพ็กเกจ polyfill ที่บีบอัดด้วย Gzip เพียงเพราะจำนวนฟีเจอร์ที่เบราว์เซอร์ไม่มี
เราพบว่าเรายังใช้เทคนิคการจัดวาง CSS สมัยใหม่ส่วนใหญ่ได้อีกด้วย เช่น CSS Grid เนื่องจาก Microsoft ได้เริ่มกำหนดข้อกำหนดตั้งแต่สมัย IE10 เราได้ระบบเลย์เอาต์ที่เบา เหมาะสำหรับโปรเจ็กต์ทุกประเภท และมีความยืดหยุ่นสูงด้วยความช่วยเหลือจาก autoprefixer และบทความ CSS Tricks นี้ ซึ่งช่วยให้เราตั้งชื่อส่วนต่างๆ ของหน้าเว็บได้อย่างยอดเยี่ยม แต่ยังคงมีปัญหาด้านความเข้ากันได้ที่ใช้เวลาแก้ไขนาน
ทันใดนั้นเราก็กลับมาที่ระยะการวิเคราะห์ต้นทุน-ประโยชน์ แต่ครั้งนี้สำหรับ IE ทุกเวอร์ชัน และเช่นเดียวกับ IE9 เราต้องเลือกระหว่างการรองรับทุกคนกับเวลาในการพัฒนาที่ยุ่งยากหลายสัปดาห์สำหรับแต่ละโปรเจ็กต์ เรามั่นใจว่าการใช้เบราว์เซอร์สมัยใหม่จะให้ประสบการณ์การใช้งานที่ดีกว่าแก่ลูกค้า เราจึงกระตุ้นให้ผู้ใช้เลิกใช้ IE เมื่อเข้าชมเว็บไซต์ เราพบว่าวิธีนี้ประสบความสำเร็จเพียงเล็กน้อยสำหรับลูกค้าที่ใช้งานอยู่ซึ่งติดนิสัยเปิด IE เพื่อโต้ตอบกับเรา ข้อความนี้ดี แต่ยังไม่เพียงพอที่จะคำนวณ
เมื่อการเข้าชมจาก IE ลดลง Maersk จึงตัดสินใจเดินตามรอยของหลายบริษัทก่อนหน้าและหยุดการสนับสนุน IE อย่างเป็นทางการ แม้ว่าตัวเลขจะยังคงบอกว่าเราควรสนับสนุนก็ตาม เหตุใดจึงต้องเปิดตัวตอนนี้
กล่าวอย่างง่ายคือ แพลตฟอร์มเว็บได้พัฒนาไปไกลแล้ว และ IE11 ไม่สามารถทําสิ่งที่เราต้องการได้ แม้ว่าจะมี polyfill จำนวนมากก็ตาม ยกตัวอย่างเช่น คอมโพเนนต์การนําทาง ในแพลตฟอร์มเว็บสมัยใหม่ คอมโพเนนต์นี้เป็นองค์ประกอบที่กําหนดเองซึ่งมีสไตล์ที่รวมอยู่ในตัว ขับเคลื่อนโดยตัวแปร CSS และการค้นหาคอนเทนเนอร์ จึงควบคุมทุกอย่างได้ในคอมโพเนนต์เดียว หากไม่มีแพลตฟอร์มส่วนนี้ สไตล์ของคอมโพเนนต์เหล่านี้จะเปลี่ยนจากแอปพลิเคชันโดยสิ้นเชิง และสไตล์อาจรั่วไปยังคอมโพเนนต์อื่นๆ หรือกลับไปที่แอปพลิเคชัน มี polyfill ที่จะให้คุณจําลองฟีเจอร์ส่วนใหญ่ได้ที่นี่ ซึ่งรวมถึงองค์ประกอบที่กําหนดเอง, ShadyCSS, ShadyDOM และองค์ประกอบ template
ในทางปฏิบัติ โพลีฟิลเหล่านี้ทำงานได้ดีกับคอมโพเนนต์แบบแยกต่างหาก แต่เมื่อรวมคอมโพเนนต์หลายรายการในแอปพลิเคชันที่ซับซ้อน IE จะทำงานช้าลงจนหยุดชะงักโดยมีหน้าจอสีขาวปรากฏขึ้นเป็นเวลาหลายสิบวินาทีขณะที่รันไทม์ JavaScript พยายามคํานวณต้นไม้สไตล์เป็นครั้งที่ 42 กล่าวโดยย่อคือ ประสบการณ์ของผู้ใช้ถูกลดทอนลงอย่างมากเพื่อรองรับเบราว์เซอร์
ที่ผ่านมา เรามีการหยุดชะงักเล็กน้อยจาก polyfill ที่อาจเพิ่มเวลา First Paint ขึ้นครึ่งวินาที แต่ก็ไม่ได้มากไปกว่านั้น แต่ครั้งนี้แตกต่างออกไป แอปเหล่านี้จึงใช้งานไม่ได้ แต่จะทำงานได้เพียงเท่าที่จำเป็นเมื่อต้องเผชิญกับความซับซ้อนของแพลตฟอร์มเว็บสมัยใหม่
และคุณทราบไหมว่าเกิดอะไรขึ้นนับตั้งแต่ที่เราหยุดรองรับ IE น้อยมาก ไม่มีคำขอแจ้งปัญหาจากฝ่ายสนับสนุนลูกค้าหรือความคิดเห็นเชิงลบจำนวนมาก วิศวกรของเรามีความสุขมากขึ้นและแอปพลิเคชันของเรามีเส้นทางการอัปเกรดเป็น Vue 3 (ซึ่งไม่รองรับ IE11 เนื่องจากออบเจ็กต์พร็อกซีไม่สามารถใช้การทดแทนได้) และมีขนาดแพ็กเกจที่เล็กลง การรองรับตัวแปร CSS และแบบอักษรแบบผันแปรอย่างเต็มรูปแบบช่วยให้ธีมสำหรับแบรนด์ต่างๆ ง่ายขึ้น และความสามารถในการใช้โทเค็นภายในคอมโพเนนต์ไฟล์เดี่ยวของ Vue ยังลดความซับซ้อนในการรับรู้อีกด้วย ซึ่งทำให้นักพัฒนาซอฟต์แวร์ได้รับประสบการณ์การใช้งานที่ดีขึ้น
จากมุมมองของลูกค้า การใช้งาน IE ลดลงอย่างต่อเนื่อง ไม่ได้มีการปิด IE จากเว็บไซต์ แต่เนื่องจากการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอนจะเปลี่ยนเป็นการลดระดับอย่างราบรื่น ฟีเจอร์และแอปพลิเคชันต่างๆ จึงจะหยุดทํางาน ลูกค้าจะได้รับประโยชน์จากความก้าวหน้าทางเทคโนโลยีของเรา ซึ่งก็คือได้รับประสบการณ์การใช้งานเว็บไซต์ที่สอดคล้องกันมากขึ้น เนื่องจากแนวทางปฏิบัติแนะนำ การช่วยเหลือพิเศษ และการออกแบบได้รับการผสานรวมไว้ในระบบการออกแบบที่อิงตาม Lit ที่พัฒนาอย่างต่อเนื่อง ซึ่งสามารถทำงานร่วมกันได้อย่างเต็มที่กับเฟรมเวิร์กที่มีอยู่ในปัจจุบันหรือในอนาคต
เราตื่นเต้นที่จะได้เห็นวิธีใช้ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บภายในบริษัท ตั้งแต่การใช้โหมดมืดเพื่อให้ระบบเรือใช้งานได้ง่ายขึ้นในเวลากลางคืน ไปจนถึง Web Bluetooth, WebXR และ PWA เพื่อให้เว็บแอปของเราโต้ตอบกับโลกรอบตัวเราในทุกสภาพ ขอขอบคุณ Internet Explorer ที่ให้การสนับสนุนเรามาตลอด ตอนนี้เราพร้อมที่จะพัฒนาแพลตฟอร์มเว็บให้ทันยุคสมัยแล้ว