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