מה המשמעות של סיום התמיכה ב-Internet Explorer עבור הלקוחות והמפתחים ב-Maersk.com.
קוראים לי סטיב וורקמן ואני מהנדס ראשי ב-Maersk.com. חברת Maersk היא המובילה הגלובלית בתחום הלוגיסטיקה המשולבת של שרשרת האספקה. החברה עוזרת ללקוחות להעביר סחורות ברחבי העולם כבר 118 שנים, ומאפשרת לבצע הזמנות אונליין כבר יותר מ-20 שנה. בתחילת מאי 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, כשנותרו רק קומץ לקוחות, הצלחנו פשוט להסיר את הקוד הזה מהאפליקציות שלנו, עם מאמץ מינימלי והטבה מקסימלית למשתמשים שלנו בדפדפנים מודרניים.
במסגרת המעבר של Maersk לדיגיטל, שינינו חלקים רבים באתר באמצעות ממשקי קצה קטנים (micro-front-end) מבוססי VueJS. ל-Vue יש הרבה תכונות שמאפשרות לו להתאים את עצמו לעתיד, עם הגדרה מוגדרת מראש מצוינת לטיהור קוד מתקדם ולביצוע אופטימיזציה של חבילות, ועד מצב מודרני שבו נוצרות שתי גרסאות של האפליקציה – אחת שמשתמשת בסינטקס העדכני ביותר של מודולים של ES לדפדפנים פופולריים, ואחת לאפליקציות מדור קודם שלא מבינות מודולים של ES6. הגרסה הקודמת הזו מוצגת בדפדפנים כמו IE, ולרוב חבילת ה-polyfill הזו גדולה ב-100KB בגרסה הזו בגלל כמות התכונות שחסרות בדפדפן.
גילינו שאנחנו יכולים להשתמש גם ברוב שיטות הפריסה המודרניות של CSS, כמו CSS grid, בזכות Microsoft שהתחילה את המפרט עוד ב-IE10. בעזרת autoprefixer והמאמר הזה ב-CSS Tricks, שיעזרו לכם לתת שמות טובים לאזורים שונים בדף, יצרנו מערכת פריסה קלה, מתאימה לכל פרויקט וגמישה מאוד. עם זאת, היו בעיות תאימות שהפתרון שלהן לקח הרבה זמן.
פתאום אנחנו חוזרים לשלב של ניתוח העלות-תועלת, אבל הפעם לגבי כל גרסה של IE. בדיוק כמו ב-IE9, מדובר במאזן בין תמיכה לכולם לבין שבועות של פיתוח מכאיב בכל פרויקט. אנחנו בטוחים שהשימוש בדפדפן מודרני מספק חוויה טובה יותר ללקוחות שלנו, ולכן הנחינו את המשתמשים שלנו להפסיק להשתמש ב-IE כשהם ביקרו באתר. מצאנו שהשיטה הזו יעילה במידה מסוימת אצל לקוחות פעילים שהתרגלו לפתוח את IE כדי ליצור איתנו אינטראקציה. ההודעה הזו הייתה טובה, אבל לא מספיקה כדי שהחשבון יתאים.
מכיוון שמספר הביקורים מ-IE ירד, ב-Maersk החליטו ללכת בעקבות רבים אחרים לפניהם ולסיים את התמיכה הרשמית ב-IE, למרות שהמספרים עדיין מראים שאנחנו צריכים לתמוך בו. אז למה כדאי להגדיר המרות משופרות עכשיו?
במילים פשוטות, פלטפורמת האינטרנט התקדמה, ו-IE11 לא יכול לבצע את הפעולות שאנחנו צריכים לבצע, גם עם צבא קטן של polyfills. ניקח לדוגמה את רכיב הניווט – בעולם של פלטפורמות אינטרנט מודרניות, זהו רכיב מותאם אישית עם סגנונות בקופסה משלו, שמופעל על ידי משתני CSS ושאילתות של קונטיינרים, כך שהוא שולט בכל דבר ברכיב אחד. בלי החלקים האלה בפלטפורמה, אפשר לשנות לחלוטין את הסגנון של הרכיבים האלה מהאפליקציה, והסגנונות יכולים לדלוף לרכיבים אחרים או חזרה לאפליקציה. יש polyfills שמאפשרים לחקות את רוב התכונות האלה, כולל אלמנטים מותאמים אישית, ShadyCSS, ShadyDOM והאלמנט template.
בפועל, הפוליפילים האלה עובדים מצוין ברכיבים מבודדים – אבל כשמשלבים כמה רכיבים באפליקציה מורכבת, הדפדפן IE נעצר לחלוטין, והמסך נשאר לבן במשך עשרות שניות בזמן שזמן הריצה של JavaScript מנסה לחשב את עץ הסגנונות בפעם הארבעים ושתיים. בקיצור, חוויית המשתמש נפגעה קשות כדי לתמוך בדפדפן.
בעבר היו לנו הפסקות קצרות – פוליפילים שעשויים להוסיף חצי שנייה לציור הראשון, אבל לא הרבה יותר. הפעם זה היה שונה, והאפליקציות האלה הפכו לבלתי ניתנות לשימוש. כשמתמודדים עם המורכבות של פלטפורמת האינטרנט המודרנית, אפשר לעשות רק כל כך הרבה עם פוליפילים.
ואתם יודעים מה קרה מאז שהפסקנו את התמיכה ב-IE? מעט מאוד. לא הייתה זרימה אדירה של כרטיסי תמיכת לקוחות או משוב שלילי. המהנדסים שלנו מרוצים יותר, לאפליקציות שלנו יש נתיב שדרוג ל-Vue 3 (לא תומך ב-IE11 כי לא ניתן למלא את אובייקט ה-Proxy) וגודל החבילות קטן יותר. תמיכה מלאה במשתני CSS ובגופנים משתנים מאפשרת ליצור עיצוב פשוט יותר למותגים שונים, והיכולת להשתמש באסימונים ברכיבים של קובץ יחיד ב-Vue מפחיתה גם את המורכבות הקוגניטיבית, וכך משפרת את חוויית הפיתוח.
מנקודת המבט של הלקוחות, השימוש ב-IE ממשיך לרדת לאט. הדפדפן Internet Explorer לא מושבת באתר, אבל ככל שהשיפור המתמשך יהפוך לנסיגה הדרגתית, תכונות ואפליקציות יפסיקו לפעול. הלקוחות ייהנו מהשיפורים בטכנולוגיה שלנו – הם יקבלו חוויה עקבית יותר מהאתר, כי שיטות מומלצות, נגישות ועיצוב מוטמעים במערכת עיצוב מתפתחת שמבוססת על Lit, עם יכולת פעולה הדדית מלאה עם כל מסגרת קיימת או עתידית.
אני שמח לראות איך אפשר להשתמש בתכונות החדשות של פלטפורמת האינטרנט בחברה – החל משימוש במצב כהה כדי שיהיה קל יותר להשתמש במערכות של כלי השיט בלילה, ועד ל-Web Bluetooth, ל-WebXR ול-PWAs, כדי שאפליקציות האינטרנט שלנו יוכלו לקיים אינטראקציה עם העולם הפיזי שסביבנו בכל תנאי. תודה, Internet Explorer, על הרבה דברים. עכשיו אנחנו יכולים להתעדכן בפלטפורמת האינטרנט.