O que o fim do suporte ao Internet Explorer significou para os clientes e desenvolvedores da Maersk.com.
Sou Steve Workman, engenheiro-chefe da Maersk.com, e sou líder global em logística de cadeia de suprimentos integrada, ajudando clientes a mover produtos em todo o mundo por 118 anos, com reservas on-line há mais de 20 anos. No início de maio de 2022, a @Maersk deixou oficialmente de oferecer suporte ao Internet Explorer (IE) nos sistemas voltados ao cliente, depois da desativação formal do suporte ao IE em junho de 2022. Este é o fim de uma era importante da Web e o início de uma nova.
Entrei na Maersk em 2018 e meu primeiro projeto foi construir uma nova barra de navegação global. Ele precisava ser totalmente testável, fácil de implantar e atualizar globalmente sem inatividade, ser focado em dispositivos móveis, responsivo, oferecer suporte a várias marcas, ser configurável, ser localizado para 11 idiomas e oferecer suporte ao IE9.
Em 2018, o Windows 7 e o navegador padrão, o IE9, ainda eram muito usados. O Windows 10 e o IE11 só alcançavam uma massa crítica no início de 2020 (de acordo com o contador de estatísticas). Analisando nossos dados, descobrimos uma quantidade significativa de tráfego proveniente de clientes que usam o IE9 ou, pior, o IE11 no modo de compatibilidade. Esse tráfego apresentou uma tendência significativa para mercados emergentes e para áreas onde a base de clientes da Maersk estava crescendo rapidamente.
Se o menu de navegação não funcionar, será difícil encontrar o botão de login. Se o login não funcionar, eles não poderão reservar contêineres, e de repente você terá um grande problema causado pelos navegadores legados.
Para resolver isso, adotamos uma postura de aprimoramento progressivo com o componente de navegação e com todos os futuros aplicativos da Web. Nós fariamos isso "funcionar", mas pode haver polyfills e restrições significativos para isso. Por exemplo, o IE não é compatível com a API Fetch, mas há polyfills que voltam para o IE10 e incluímos para esses navegadores. Para o IE9, codificamos as chamadas XMLHttpRequest em um arquivo separado, que será carregado apenas nos casos em que o fetch não puder ser preenchido com polyfill.
Quando chegou a hora de abandonar o suporte ao IE9, quando apenas alguns clientes ainda restavam, nós pudemos simplesmente eliminar esse código de nossos aplicativos, com esforço mínimo e máximo benefício para nossos usuários de navegadores modernos.
À medida que a transformação digital da Maersk continuava, reconstruímos muitas partes do site com micro-front-ends com tecnologia VueJS. O Vue tinha muitos recursos que o tornaram compatível com o futuro, com uma ótima configuração predefinida para tree shaking avançado e otimização de pacotes, para um modo moderno em que duas versões do aplicativo são criadas: uma que usa a sintaxe mais recente do módulo ES para navegadores permanentes e outra para aplicativos legados que não entendem módulos ES6. Essa versão legada é disponibilizada para navegadores como o IE e costuma ter 100 KB maior em seu pacote de polyfill compactado com gzip devido à quantidade de recursos que o navegador não tem.
Descobrimos que também poderíamos usar a maioria das técnicas modernas de layout de CSS, como a grade CSS, graças à Microsoft ter iniciado essa especificação no IE10. Com a ajuda do autoprefixador e este artigo de CSS com truques para nos ajudar a nomear diferentes áreas de uma página, tínhamos um sistema de layout que é leve, adequado para qualquer projeto e é extremamente flexível. Ainda assim, havia problemas de compatibilidade que custavam muito tempo para serem corrigidos.
De repente, estamos de volta ao estágio de análise custo-benefício, mas para qualquer versão do IE dessa vez e, assim como no IE9, é uma troca entre apoiar todos e semanas de tempo doloroso desenvolvimento para cada projeto. Confiantes de que usar um navegador moderno é uma experiência melhor para nossos clientes, alertamos nossos usuários para abandonar o IE quando eles visitaram o site. Descobrimos que isso teve sucesso em pequenas quantidades para clientes ativos que tinham o hábito de abrir o IE para suas interações conosco. A mensagem era boa, mas não o suficiente para fazer o cálculo.
À medida que as visitas do IE diminuíram, Maersk decidiu seguir o exemplo de muitos outros antes deles e encerrar o suporte oficial ao IE, embora os números ainda digam que devemos apoiá-lo. Então, por que agora?
Simplificando, a plataforma da Web mudou e o IE11 não pode fazer as coisas que precisamos que faça, mesmo com um pequeno exército de polyfills. Considere o componente de navegação: em um mundo moderno de plataforma da Web, esse é um elemento personalizado, com seus próprios estilos encapsulados, orientados por variáveis CSS e consultas de contêiner, para que ele controle tudo em um componente. Sem essas partes da plataforma, o estilo dos componentes pode ser completamente alterado do aplicativo e os estilos podem vazar para outros componentes ou de volta para o aplicativo. É possível emular a maioria dos recursos com polyfills, incluindo elementos personalizados, ShadyCSS, ShadyDOM e modelo.
Na prática, esses polyfills funcionam muito bem para componentes isolados. No entanto, ao combinar vários componentes em um aplicativo complexo, o IE é interrompido com dezenas de segundos de tela branca enquanto o tempo de execução do JavaScript tenta calcular a árvore de estilo pela quarenta segundos. Em resumo, a experiência do usuário foi seriamente comprometida para permitir o uso do navegador.
No passado, tínhamos pequenas interrupções: polyfills que podiam adicionar meio segundo à primeira pintura, mas não muito mais. Esse processo era diferente, e esses apps se tornaram inutilizáveis. Os Polyfills não fazem muito quando desafiados com a complexidade da moderna plataforma da Web.
E sabe o que aconteceu desde que deixamos de oferecer suporte ao IE? Muito, muito pouco. Não temos muitos tíquetes de suporte ao cliente nem feedback negativo. Nossos engenheiros estão mais satisfeitos, e nossos aplicativos têm um caminho de upgrade para o Vue 3, que não é compatível com o IE11, já que o objeto Proxy não pode ser polyfille, além de pacotes menores. O suporte total a variáveis CSS e fontes variáveis permite uma aplicação simplificada de temas nas marcas. Além disso, a capacidade de usar os tokens nos componentes de arquivo único do Vue também reduz a complexidade cognitiva, proporcionando uma melhor experiência ao desenvolvedor.
Da perspectiva do cliente, o uso do IE continua diminuindo lentamente. O IE não foi desativado do site, mas conforme o aprimoramento progressivo se transforma em degradação suave, os recursos e aplicativos deixam de funcionar. Os clientes aproveitam os avanços da nossa tecnologia: uma experiência mais consistente no site, à medida que as práticas recomendadas, a acessibilidade e o design são integrados a um sistema de design em constante evolução baseado em Lit, com interoperabilidade total com qualquer framework atual ou no futuro.
Quero muito conferir como os novos recursos da plataforma da Web podem ser usados na empresa, desde o modo escuro para facilitar o uso à noite até Web Bluetooth, WebXR e PWAs para que nossos apps da Web possam interagir com o mundo físico em qualquer condição. Obrigado, Internet Explorer, por muitas coisas. Agora estamos à vontade para acompanhar a plataforma da web.
Imagem principal por Matt Botsford.