El fin de Internet Explorer

Qué significó el fin de la compatibilidad con Internet Explorer para los clientes y desarrolladores de Maersk.com

steveworkman
steveworkman

Soy Steve Workman y soy el ingeniero principal de Maersk.com. Maersk es el líder mundial en logística integrada de cadenas de suministro y ayuda a los clientes a transportar bienes por todo el mundo durante 118 años, con reservas en línea durante más de veinte años. A principios de mayo de 2022, @Maersk dejó de ser compatible con Internet Explorer (IE) en sus sistemas orientados a los clientes, ya 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 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 e IE11 solo alcanzaron una cantidad 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 estaba significativamente inclinado hacia los mercados emergentes y en áreas donde 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 esto, adoptamos una postura de mejora progresiva con el componente de navegación y todas las aplicaciones 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 el mínimo esfuerzo y el máximo beneficio para nuestros usuarios en navegadores modernos.

A medida que la transformación digital de Maersk continuó, reconstruimos muchas partes del sitio en los micro-front-ends potenciados 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 actualización continua 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 correctamente las diferentes áreas de una página, obtuvimos 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 utilizar un navegador moderno es una mejor experiencia para nuestros clientes, alejamos a los usuarios de IE cuando visitaban 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 desaparecieron, Maersk decidió seguir el ejemplo de muchos otros antes que ellos y finalizar la asistencia oficial de IE, aunque las cifras siguen indicando que deberíamos apoyarlo. Entonces, ¿por qué ahora?

Un sitio web con una barra de navegación horizontal.
Página principal de Maersk con el componente de navegación global.

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 moderno de plataforma web, este es un elemento personalizado, con sus propios estilos encapsulados, controlados por las variables de CSS y las consultas de contenedores, por lo que controla 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 interrupciones pequeñas: polyfills que podían agregar medio segundo a la primera pintura, 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 actualmente o en el futuro.

Me entusiasma ver cómo se pueden usar las nuevas funciones de la plataforma web dentro de la empresa, desde el modo oscuro para que los sistemas de embarcaciones sean más fáciles de usar por la noche, hasta Web Bluetooth, WebXR y AWP 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.