Qué significó el fin de la compatibilidad con Internet Explorer para los clientes y desarrolladores de Maersk.com
Soy Steve Workman, ingeniero principal de Maersk.com. Maersk es líder mundial en logística de cadena de suministro integrada y ayuda a los clientes a transportar bienes por todo el mundo desde hace 118 años, con reservas en línea desde hace más de veinte años. A principios de mayo de 2022, @Maersk dejó de admitir oficialmente Internet Explorer (IE) en sus sistemas para clientes, después de que Microsoft finalizara formalmente la compatibilidad con IE en junio de 2022. Este es el final de una era importante de la Web y el comienzo de una nueva.
Me uní a Maersk en 2018 y mi primer proyecto fue crear una nueva barra de navegación global. Debía ser completamente testable, fácil de implementar y actualizar a nivel global sin tiempo de inactividad, priorizar los dispositivos móviles, ser responsivo, admitir varias marcas, ser configurable, estar localizado a 11 idiomas… y admitir IE9.
En 2018, Windows 7 y su navegador predeterminado IE9 aún eran muy populares, y Windows 10 y IE11 solo alcanzaron la masa crítica a principios de 2020 (según el contador de estadísticas). Cuando analizamos nuestros datos, encontramos una cantidad significativa de transacciones provenientes de clientes que usan IE9 o, peor aún, IE11 en modo de compatibilidad. Este tráfico se orientaba de manera significativa a los mercados emergentes y a las áreas en las que la base de clientes de Maersk crecía rápidamente.
Si el menú de navegación no funciona, es difícil encontrar el botón de acceso. Si el acceso no funciona, no podrán reservar contenedores y, de repente, tendrás un gran problema causado por los navegadores heredados.
Para resolver este problema, adoptamos una postura de mejora progresiva con el componente de navegación y todas las apps web futuras. Podríamos hacer que "funcione", pero es posible que haya polyfills y restricciones importantes para hacerlo. Por ejemplo, IE no admite la API de Fetch, pero hay polyfills que se remontan a IE10 que incluimos para esos navegadores. Para IE9, codificamos las llamadas XMLHttpRequest en un archivo independiente para que se carguen solo en los casos en que fetch no se pueda reemplazar.
Cuando llegó el momento de dejar de admitir IE9, cuando solo quedaban unos pocos clientes, pudimos simplemente quitar este código de nuestras aplicaciones, con un esfuerzo mínimo y el máximo beneficio para nuestros usuarios en navegadores modernos.
A medida que avanzaba la transformación digital de Maersk, reconstruimos muchas partes del sitio en micro-frontends impulsados por VueJS. Vue tenía muchas funciones que lo hacían compatible con el futuro, con una excelente configuración predeterminada para la optimización avanzada de paquetes y el uso de árboles, hasta un modo moderno en el que se compilan dos versiones de la aplicación: una que usa la sintaxis de módulo ES más reciente para navegadores de uso general y otra para aplicaciones heredadas que no comprenden los módulos ES6. Esta versión heredada se entrega a navegadores como IE y, a menudo, es 100 KB más grande en su paquete de polyfilla con GZIP solo por la cantidad de funciones que le faltan al navegador.
Descubrimos que también podíamos usar la mayoría de las técnicas de diseño de CSS modernas, como la cuadrícula de CSS, gracias a que Microsoft comenzó la especificación en IE10. Con la ayuda de autoprefixer y este artículo de CSS Tricks para ayudarnos a nombrar muy bien las diferentes áreas de una página, teníamos un sistema de diseño ligero, adecuado para cualquier proyecto y extremadamente flexible. Sin embargo, hubo problemas de compatibilidad que costaron mucho tiempo solucionar.
De repente, volvemos a la etapa de análisis de costo-beneficio, pero esta vez para cualquier versión de IE. Al igual que con IE9, es una compensación entre admitir a todos y semanas de tiempo de desarrollo doloroso para cada proyecto. Con la seguridad de que usar un navegador moderno es una mejor experiencia para nuestros clientes, les sugerimos a los usuarios que abandonaran IE cuando visitaron el sitio web. Descubrimos que esto tuvo éxito en pequeñas cantidades para los clientes activos que tenían el hábito de abrir IE para interactuar con nosotros. Este mensaje fue bueno, pero no lo suficiente como para que funcionen las matemáticas.
A medida que las visitas de IE disminuyeron, Maersk decidió seguir el ejemplo de muchos otros antes que ellos y finalizar la asistencia oficial para IE, a pesar de que las cifras aún indican que deberíamos brindarla. Entonces, ¿por qué ahora?
En pocas palabras, la plataforma web avanzó, y IE11 no puede hacer lo que necesitamos, incluso con un pequeño ejército de polyfills. Tomemos el componente de navegación. En un mundo de plataformas web modernas, este es un elemento personalizado, con sus propios estilos encapsulados, impulsado por variables de CSS y consultas de contenedor para que controle todo en un componente. Sin estos elementos de la plataforma, el estilo de estos componentes se puede cambiar por completo desde la aplicación, y los estilos pueden filtrarse a otros componentes o volver 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 con decenas de segundos de pantalla en blanco mientras el entorno de ejecución de JavaScript intenta calcular el árbol de estilos por cuarta vez. En resumen, la experiencia del usuario se vio seriamente comprometida para admitir el navegador.
En el pasado, teníamos pequeñas interrupciones: polyfills que podían agregar medio segundo al primer procesamiento de imagen, pero no mucho más. Esto era diferente, y estas apps se volvieron inutilizables. Los rellenos solo pueden hacer mucho cuando se enfrentan a la complejidad de la plataforma web moderna.
¿Sabes qué sucedió desde que dejamos de admitir IE? Muy, muy poco. No hubo una avalancha de tickets de asistencia al cliente ni comentarios negativos. Nuestros ingenieros están más contentos y nuestras aplicaciones tienen una ruta de actualización a Vue 3 (que no es compatible con IE11, ya que el objeto Proxy no se puede reemplazar) y tamaños de paquetes más pequeños. La compatibilidad total con las variables CSS y las fuentes variables permite crear temas más simples en todas las marcas, y la capacidad de usar los tokens dentro de los componentes de un solo archivo de Vue también reduce la complejidad cognitiva, lo que brinda una mejor experiencia para 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 degradación elegante, las funciones y las aplicaciones dejarán de funcionar. Los clientes se beneficiarán de los avances en nuestra tecnología, ya que obtendrán una experiencia más coherente en el sitio a medida que las prácticas recomendadas, la accesibilidad y el diseño se integren en un sistema de diseño basado en Lit en evolución, con interoperabilidad total con cualquier framework que exista ahora o en el futuro.
Me entusiasma ver cómo se pueden usar las nuevas funciones de la plataforma web en la empresa, desde el uso del modo oscuro para que los sistemas de los buques sean más fáciles de usar por la noche hasta Web Bluetooth, WebXR y PWAs para que nuestras aplicaciones web puedan interactuar con el mundo físico que nos rodea en cualquier condición. Gracias, Internet Explorer, por muchas cosas. Ahora podemos ponernos al día con la plataforma web.