El fin de la compatibilidad con Internet Explorer para los clientes y desarrolladores de Maersk.com
Me llamo Steve Workman y soy el ingeniero líder de Maersk.com. Maersk es el líder mundial en logística integrada de la cadena de suministro, ayudando a los clientes a trasladar productos por el mundo durante 118 años, con reservas en línea durante más de 20 años. A principios de mayo de 2022, @Maersk dejó de ser compatible con Internet Explorer (IE) en sus sistemas para clientes, gracias a que Microsoft dio de baja formalmente la compatibilidad con IE en junio de 2022. Este es el fin de una era importante de la Web y el comienzo de una nueva.
Me uní a Maersk en 2018 y mi primer proyecto fue construir una nueva barra de navegación global. Tenía que ser totalmente comprobable, fácil de implementar y actualizar en todo el mundo, sin tiempo de inactividad, tener prioridad para los dispositivos móviles, responsivo, ser compatible con varias marcas, ser configurable, localizarse a 11 idiomas... y ser compatible con IE9.
En 2018, Windows 7 y su navegador predeterminado, IE9, siguen siendo muy populares, y Windows 10 e IE11 solo alcanzaron masa crítica a principios de 2020 (según el contador de estadísticas). Al analizar nuestros datos, detectamos que una gran cantidad de transacciones provienen de clientes que usan IE9 o, peor aún, IE11 en modo de compatibilidad. Este tráfico se inclinaba significativamente hacia los mercados emergentes y en las áreas donde la base de clientes de Maersk crecía rápidamente.
Si el menú de navegación no funciona, será difícil encontrar el botón de acceso. Si el acceso no funciona, significa que no podrán reservar contenedores y, de repente, tendrás un gran problema causado por navegadores heredados.
Para solucionar este problema, adoptamos una postura de mejora progresiva con el componente de navegación y todas las apps web futuras. Lo haríamos "funcionar", pero puede haber polyfills importantes y restricciones para hacerlo. Por ejemplo, IE no admite la API de Fetch, pero hay polyfills que regresan a IE10 que incluimos para esos navegadores. Para IE9, codificamos las llamadas a XMLHttpRequest en un archivo separado, de modo que se cargaran solo en los casos en los que no se podía aplicar polyfills a fetch.
Cuando llegó el momento de dar de baja la compatibilidad con IE9, cuando solo quedaban algunos clientes, simplemente pudimos retirar este código de nuestras aplicaciones, con un esfuerzo mínimo y el máximo beneficio para nuestros usuarios de navegadores modernos.
A medida que la transformación digital de Maersk continuó, reconstruimos muchas partes del sitio en micro-front-ends potenciados por VueJS. Vue tenía muchas funciones que facilitaron su uso en el futuro, con una excelente configuración preestablecida para la eliminación avanzada de código y la optimización de paquetes, a un modo moderno en el que se compilan dos versiones de la aplicación: una que usa la sintaxis más reciente del módulo ES para navegadores perdurables y otra para aplicaciones heredadas que no comprenden los módulos ES6. Esta versión heredada se publica en navegadores como IE y suele ser 100 KB más grande en su paquete de polyfills comprimidos en gzip debido a la cantidad de funciones que le faltan al navegador.
Descubrimos que también podíamos usar la mayoría de las técnicas modernas de diseño de CSS, como la cuadrícula de CSS, gracias a que Microsoft comenzó las especificaciones en IE10. Con la ayuda de autoprefixer y este artículo de trucos de CSS (que nos ayuda a dar muchos nombres a las diferentes áreas de una página), teníamos un sistema de diseño ligero, adecuado para cualquier proyecto y extremadamente flexible. Aun así, hubo problemas de compatibilidad que costó mucho tiempo solucionarlos.
De pronto, estamos de vuelta en la etapa de análisis costo-beneficio, pero esta vez para cualquier versión de IE, y al igual que con IE9, se trata de un equilibrio entre ayudar a todos y semanas de arduo tiempo de desarrollo para cada proyecto. Con la confianza de que utilizar un navegador moderno es una mejor experiencia para nuestros clientes, los quitamos de IE a los usuarios cuando visitaban el sitio web. Descubrimos que esta estrategia resultó exitosa en pequeñas cantidades para los clientes activos que habían adquirido el hábito de abrir IE para sus interacciones con nosotros. Este mensaje fue bueno, pero no lo suficiente como para que las matemáticas funcionaran.
A medida que las visitas de IE disminuyeron, Maersk decidió seguir el ejemplo de muchas otras personas antes que ellas y finalizar el apoyo oficial para IE, aunque las cifras aún indican que deberíamos apoyarlo. Entonces, ¿por qué ahora?
En pocas palabras, la plataforma web cambió de posición y IE11 no puede hacer lo que necesitamos, ni siquiera con un pequeño ejército de polyfills. Tomemos como ejemplo el componente de navegación: en un mundo moderno de plataforma web, es un elemento personalizado, con sus propios estilos encapsulados, impulsados por variables de CSS y consultas de contenedores, por lo que controla todo en un solo componente. Sin estas piezas de la plataforma, el estilo de esos componentes se puede cambiar por completo desde la aplicación, y los estilos pueden filtrarse a otros componentes o de vuelta a la aplicación. Hay polyfills que te permitirán emular la mayoría de las funciones aquí, incluidos los elementos personalizados, ShadyCSS, ShadyDOM y el elemento template.
En la práctica, estos polyfills funcionan muy bien para componentes aislados, pero cuando se combinan varios componentes en una aplicación compleja, IE se detiene por decenas de segundos de pantalla blanca mientras el tiempo de ejecución de JavaScript intenta calcular el árbol de estilo por cuarenta segundos. Es decir, la experiencia del usuario se vio gravemente comprometida para admitir el navegador.
En el pasado, teníamos pequeñas interrupciones: polyfills que podían agregar medio segundo a la primera pintura, pero no mucho más. Era diferente, y las apps se volvieron inutilizables. Los Polyfills no son tan útiles cuando se enfrentan a la complejidad de la plataforma web moderna.
¿Sabes qué sucedió desde que eliminamos la compatibilidad con IE? Muy, muy poco. No hubo una avalancha de tickets de soporte al cliente ni comentarios negativos. Nuestros ingenieros están más satisfechos, y nuestras aplicaciones tienen una ruta de actualización a Vue 3 (que no es compatible con IE11, ya que el objeto proxy no puede tener polyfills) y tamaños de paquetes más pequeños. La compatibilidad total con las variables CSS y las fuentes variables permite aplicar temas más simples entre marcas, y la capacidad de usar los tokens en los componentes de archivo único de Vue también reduce la complejidad cognitiva, lo que brinda una mejor experiencia a los desarrolladores.
Desde la perspectiva del cliente, el uso de IE sigue disminuyendo lentamente. IE no se cerró del sitio, pero a medida que la mejora progresiva se convierta en una degradación elegante, las funciones y aplicaciones dejarán de funcionar. Los clientes se beneficiarán de los avances de nuestra tecnología, es decir, disfrutarán de una experiencia más coherente en el sitio a medida que se incorporen las prácticas recomendadas, la accesibilidad y el diseño en un sistema de diseño en evolución basado en Lit, con interoperabilidad completa con cualquier framework actual o futuro.
Me entusiasma ver cómo pueden usarse las nuevas funciones de la plataforma web en la empresa, desde el modo oscuro para que los sistemas embarcables sean más fáciles de usar por la noche, hasta Bluetooth web, WebXR y AWP para que nuestras aplicaciones web puedan interactuar con el mundo físico que nos rodea en cualquier circunstancia. Gracias, Internet Explorer, para muchas cosas; ahora podemos ponernos al día con la plataforma web.
Hero image de Matt Botsford.