การหยุดรองรับ 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 ไม่สามารถทำสิ่งต่างๆ ที่เราจำเป็นต้องใช้ แม้จะมีโพลีฟิลล์เล็กๆ จำนวนมากก็ตาม ยกตัวอย่างเช่น คอมโพเนนต์การนําทาง ในแพลตฟอร์มเว็บสมัยใหม่ คอมโพเนนต์นี้เป็นองค์ประกอบที่กําหนดเองซึ่งมีสไตล์ที่รวมอยู่ในตัว ขับเคลื่อนโดยตัวแปร CSS และการค้นหาคอนเทนเนอร์ จึงควบคุมทุกอย่างได้ในคอมโพเนนต์เดียว หากไม่มีแพลตฟอร์มส่วนนี้ สไตล์ของคอมโพเนนต์เหล่านี้จะเปลี่ยนจากแอปพลิเคชันโดยสิ้นเชิง และสไตล์อาจรั่วไปยังคอมโพเนนต์อื่นๆ หรือกลับไปที่แอปพลิเคชัน มี polyfill ที่จะให้คุณจําลองฟีเจอร์ส่วนใหญ่ได้ที่นี่ ซึ่งรวมถึงองค์ประกอบที่กําหนดเอง, ShadyCSS, ShadyDOM และองค์ประกอบ template
ในทางปฏิบัติ โพลีฟิลเหล่านี้ทำงานได้ดีกับคอมโพเนนต์แบบแยกต่างหาก แต่เมื่อรวมคอมโพเนนต์หลายรายการในแอปพลิเคชันที่ซับซ้อน IE จะทำงานช้าลงจนหยุดชะงักโดยมีหน้าจอสีขาวปรากฏขึ้นหลายสิบวินาทีขณะที่รันไทม์ JavaScript พยายามคํานวณต้นไม้สไตล์เป็นครั้งที่ 42 กล่าวโดยสรุปคือ ประสบการณ์ของผู้ใช้ถูกบุกรุกอย่างหนักเพื่อให้รองรับเบราว์เซอร์
ในอดีต เราพบสิ่งรบกวนเล็กๆ น้อยๆ เช่น โพลีฟิลที่อาจเพิ่มครึ่งวินาทีในการวาดภาพครั้งแรก แต่ไม่เพิ่มขึ้นมากนัก การดำเนินการนี้แตกต่างออกไป และทำให้แอปเหล่านี้ใช้งานไม่ได้ แต่จะทำงานได้เพียงเท่าที่จำเป็นเมื่อต้องเผชิญกับความซับซ้อนของแพลตฟอร์มเว็บสมัยใหม่
และคุณทราบไหมว่าเกิดอะไรขึ้นนับตั้งแต่ที่เราหยุดรองรับ IE น้อยมาก ไม่มีคำขอแจ้งปัญหาจากฝ่ายสนับสนุนลูกค้าหรือความคิดเห็นเชิงลบจำนวนมาก วิศวกรของเรามีความสุขมากขึ้นและแอปพลิเคชันของเรามีเส้นทางการอัปเกรดไปยัง Vue 3 (ซึ่งไม่รองรับ IE11 เนื่องจากออบเจ็กต์พร็อกซีไม่สามารถทำ Polyfill ได้) และ Bundle ที่มีขนาดเล็ก การรองรับตัวแปร CSS และแบบอักษรแบบผันแปรอย่างเต็มรูปแบบช่วยให้ธีมสำหรับแบรนด์ต่างๆ ง่ายขึ้น และความสามารถในการใช้โทเค็นภายในคอมโพเนนต์ไฟล์เดี่ยวของ Vue ยังลดความซับซ้อนในการรับรู้อีกด้วย ซึ่งทำให้นักพัฒนาซอฟต์แวร์ได้รับประสบการณ์การใช้งานที่ดีขึ้น
จากมุมมองของลูกค้า การใช้งาน IE ยังคงลดลงอย่างช้าๆ ไม่ได้มีการปิด IE จากเว็บไซต์ แต่เนื่องจากการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอนจะเปลี่ยนเป็นการลดระดับอย่างราบรื่น ฟีเจอร์และแอปพลิเคชันต่างๆ จึงจะหยุดทํางาน ลูกค้าจะได้รับประโยชน์จากเทคโนโลยีที่ก้าวหน้าของเรา ซึ่งจะช่วยให้ได้รับประสบการณ์การใช้งานเว็บไซต์ที่สอดคล้องกันมากขึ้น เนื่องจากแนวทางปฏิบัติแนะนำ การช่วยเหลือพิเศษ และการออกแบบได้รับการผสานรวมไว้ในระบบการออกแบบที่ใช้ Lit ซึ่งพัฒนาอย่างต่อเนื่อง และสามารถทำงานร่วมกันได้อย่างเต็มที่กับเฟรมเวิร์กที่มีอยู่ในปัจจุบันหรือในอนาคต
เราตื่นเต้นที่จะได้เห็นวิธีใช้ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บภายในบริษัท ตั้งแต่การใช้โหมดมืดเพื่อให้ระบบเรือใช้งานได้ง่ายขึ้นในเวลากลางคืน ไปจนถึง Web Bluetooth, WebXR และ PWA เพื่อให้เว็บแอปของเราโต้ตอบกับโลกรอบตัวเราในทุกสภาพ ขอขอบคุณ Internet Explorer ที่ให้การสนับสนุนเรามาตลอด ตอนนี้เราพร้อมที่จะพัฒนาแพลตฟอร์มเว็บให้ทันยุคสมัยแล้ว