הפסקת התמיכה ב-Internet Explorer עבור הלקוחות והמפתחים ב-Maersk.com.
קוראים לי סטיב וורקמן ואני מהנדס ראשי ב-Maersk.com. חברת Maersk היא המובילה הגלובלית בתחום הלוגיסטיקה המשולבת של שרשרת האספקה, ומסייעת ללקוחות להעביר סחורות ברחבי העולם כבר 118 שנים, עם הזמנות אונליין במשך יותר מעשרים שנה. בתחילת מאי 2022, @Maersk הפסיקה באופן רשמי את התמיכה ב-Internet Explorer (IE) במערכות שלה שנחשפות ללקוחות, בעקבות הפסקת התמיכה הרשמית של מיקרוסופט ב-IE ביוני 2022. זהו סוף של עידן חשוב באינטרנט, וההתחלה של עידן חדש.
הצטרפתי ל-Maersk בשנת 2018, והפרויקט הראשון שלי היה פיתוח סרגל ניווט גלובלי חדש. המערכת הייתה צריכה להיות ניתנת לבדיקה מלאה, קל לפרוס אותה ולעדכן אותה ברחבי העולם ללא זמן השבתה, להיות מבוססת-ניידים, תומכת במספר מותגים, ניתנת להתאמה אישית, מותאמת לשוק המקומי ב-11 שפות… וגם תומכת ב-IE9.
ב-2018, Windows 7 ודפדפן ברירת המחדל שלה IE9 עדיין היו פופולריים מאוד, ו-Windows 10 ו-IE11 הגיעו למסה קריטית רק בתחילת 2020 (לפי מונה הנתונים הסטטיסטיים). לאחר בדיקת הנתונים שלנו, גילינו שנפח מסחר משמעותי מגיע מלקוחות המשתמשים ב-IE9, או גרוע יותר, ב-IE11 במצב תאימות. התנועה הזו הייתה ממוקדת בעיקר בשווקים מתפתחים ובאזורים שבהם בסיס הלקוחות של Maersk גדל במהירות.
אם תפריט הניווט לא פועל, קשה למצוא את לחצן ההתחברות. אם ההתחברות לא תפעל, הם לא יוכלו להזמין קונטיינרים, ופתאום תהיה לכם בעיה גדולה שנגרמה על ידי דפדפנים מדור קודם.
כדי לפתור את הבעיה, החלטנו לשפר את רכיב הניווט ואת כל אפליקציות האינטרנט העתידיות באופן הדרגתי. אנחנו נעשה את זה, אבל יכול להיות שיהיו הגבלות משמעותיות ו-polyfills שצריך להוסיף כדי לעשות זאת. לדוגמה, דפדפן IE לא תומך ב-API של Fetch, אבל יש polyfills שאנחנו כוללים בדפדפנים האלה, שאפשר להשתמש בהם כבר מ-IE10. עבור IE9, קודדנו קריאות XMLHttpRequest בקובץ נפרד, כדי שניתן יהיה לטעון אותו רק במקרים שבהם לא ניתן היה לבצע מילוי פוליגוני של fetch.
כשהגיע הזמן להפסיק את התמיכה ב-IE9, כשנותרו רק קומץ לקוחות, הצלחנו פשוט להסיר את הקוד הזה מהאפליקציות שלנו, עם מאמץ מינימלי והטבה מקסימלית למשתמשים שלנו בדפדפנים מודרניים.
עם המשך הטרנספורמציה הדיגיטלית של מרסק, בנינו מחדש חלקים רבים באתר בממשקים קדמיים-קדמיים של VueJS שמופעלים על ידי VueJS. ל-Vue היו הרבה תכונות שהפכו אותו לידידותי לעתיד, עם תצורה מוגדרת מראש של אופטימיזציה מתקדמת לרעידות עצים ואופטימיזציה של חבילות, למצב מודרני שבו שתי גרסאות של האפליקציה נבנו – גרסה אחת שמשתמשת בתחביר ES Module העדכני לדפדפנים לטווח ארוך, ואחת לאפליקציות מדור קודם שלא מבינים מודולים של ES6. הגרסה הקודמת הזו מוצגת בדפדפנים כמו IE, ולעיתים קרובות חבילת ה-polyfill הזו גדולה ב-100KB בגרסה הזו בגלל כמות התכונות שחסרות בדפדפן.
גילינו שאנחנו יכולים להשתמש גם ברוב שיטות הפריסה המודרניות של CSS, כמו CSS grid, בזכות Microsoft שהתחילה את המפרט עוד ב-IE10. בעזרת autoprefixer ומאמר על טריקים של CSS, שיעזרו לנו לתת שמות לאזורים שונים בדף, הייתה לנו מערכת פריסה קלה, מתאימה לכל פרויקט וגמישה במיוחד. עם זאת, היו בעיות תאימות שהפתרון שלהן לקח הרבה זמן.
פתאום אנחנו חוזרים לשלב של ניתוח העלות-תועלת, אבל עבור כל גרסה של IE הפעם, ובדיוק כמו עם IE9, זה התפשרות בין התמיכה בכולם לבין מספר שבועות של זמן פיתוח כואב עבור כל פרויקט. אנחנו בטוחים שהשימוש בדפדפן מודרני מספק חוויה טובה יותר ללקוחות שלנו, ולכן דחפנו את המשתמשים שלנו להפסיק להשתמש ב-IE כשהם ביקרו באתר. מצאנו שהשיטה הזו יעילה במידה מסוימת אצל לקוחות פעילים שהתרגלו לפתוח את IE כדי לבצע אינטראקציות איתנו. ההודעה הזו הייתה טובה, אבל לא מספיקה כדי שהחשבון יתאים.
כשהביקורים מאירלנד פסקו, Maersk החליטה לעקוב אחר המסלול של רבים אחרים לפניהם ולהפסיק את התמיכה הרשמית ב-IE, למרות שהמספרים עדיין אומרים שאנחנו צריכים לתמוך בה. אז למה עכשיו?
במילים פשוטות, פלטפורמת האינטרנט התקדמה, ו-IE11 לא יכול לבצע את הפעולות שאנחנו צריכים לבצע, גם עם צבא קטן של polyfills. ניקח לדוגמה את רכיב הניווט: בעולם מודרני של פלטפורמת אינטרנט, זהו רכיב מותאם אישית בעל סגנונות מקיפים משלו, המונעים על ידי משתני CSS ושאילתות קונטיינר, כך שהוא שולט בכל האלמנטים ברכיב אחד. בלי החלקים האלה בפלטפורמה, אפשר לשנות לחלוטין את הסגנון של הרכיבים האלה מהאפליקציה, והסגנונות יכולים לדלוף לרכיבים אחרים או חזרה לאפליקציה. יש polyfills שמאפשרים לחקות את רוב התכונות שמפורטות כאן, כולל רכיבים מותאמים אישית, ShadyCSS, ShadyDOM והאלמנט template.
בפועל, הפוליפילים האלה עובדים מצוין ברכיבים מבודדים – אבל כשמשלבים כמה רכיבים באפליקציה מורכבת, הדפדפן IE נעצר לחלוטין ומוצג מסך לבן למשך עשרות שניות בזמן שזמן הריצה של JavaScript מנסה לחשב את עץ הסגנונות בפעם הארבעים ושתיים. בקיצור, חוויית המשתמש נפגעה קשות כדי לתמוך בדפדפן.
בעבר היו לנו הפסקות קצרות – פוליפילים שעשויים להוסיף חצי שנייה לציור הראשון, אבל לא הרבה יותר. הפעולה הזו הייתה שונה ולא ניתן היה להשתמש באפליקציות האלה. תוספי Polyfill יכולים לעשות הרבה דברים רק כשצריך להתמודד עם המורכבות של פלטפורמת האינטרנט המודרנית.
ואתם יודעים מה קרה מאז שסיימנו את התמיכה ב-IE? מעט מאוד. לא נרשמה הרבה פניות לתמיכת לקוחות או משוב שלילי. מהנדסי התוכנה שלנו מרוצים יותר והאפליקציות שלנו כוללות נתיב שדרוג ל-Vue 3 (שלא תומך ב-IE11 כי לא ניתן למלא את אובייקט ה-Proxy) וחבילות קטנות יותר. תמיכה מלאה במשתני CSS ובגופנים משתנים מאפשרת ליצור עיצוב מותג פשוט יותר במותגים שונים. בנוסף, היכולת להשתמש באסימונים ברכיבי הקובץ היחיד של Vue מפחיתה את המורכבות הקוגניטיבית ומספקת חוויית פיתוח טובה יותר.
מנקודת המבט של הלקוחות, השימוש ב-IE ממשיך לרדת לאט. IE לא הושבת מהאתר, אבל ככל ששיפור הדרגתי הופך לירידה חיננית, תכונות ואפליקציות יפסיקו לפעול. הלקוחות שלנו ייהנו מהשיפורים בטכנולוגיה שלנו – הם יקבלו חוויה עקבית יותר מהאתר, כי שיטות מומלצות, נגישות ועיצוב מוטמעים במערכת עיצוב מתפתחת שמבוססת על Lit, עם יכולת פעולה הדדית מלאה עם כל מסגרת קיימת או עתידית.
אני שמח לראות איך אפשר להשתמש בתכונות החדשות של פלטפורמת האינטרנט – החל משימוש במצב כהה כך שיהיה קל יותר להשתמש במערכות לכלי שיט בלילה, ועד Bluetooth באינטרנט, WebXR ופלטפורמות PWA כדי שאפליקציות האינטרנט שלנו יוכלו לקיים אינטראקציה עם העולם הפיזי שסביבנו בכל תנאי. תודה, Internet Explorer, על הרבה דברים. עכשיו אנחנו יכולים להתעדכן בפלטפורמת האינטרנט.