O fim do Internet Explorer

O que o suporte final ao Internet Explorer significou para os clientes e desenvolvedores da Maersk.com?

steveworkman
steveworkman

Meu nome é Steve Workman, e sou engenheiro-chefe da Maersk.com. A Maersk é líder global em logística integrada da cadeia de suprimentos, ajudando os clientes a movimentar mercadorias pelo mundo há 118 anos, com reservas on-line há mais de 20 anos. No início de maio de 2022, a @Maersk oficialmente deixou de oferecer suporte ao Internet Explorer (IE) nos sistemas voltados ao cliente, após a Microsoft encerrar oficialmente o suporte ao IE em junho de 2022. Esse é 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 criar uma nova barra de navegação global. Ele precisava ser totalmente testável, fácil de implantar e atualizar globalmente sem tempo de inatividade, ser prioritário para dispositivos móveis, responsivo, oferecer suporte a várias marcas, ser configurável, localizado em 11 idiomas… e oferecer suporte ao IE9.

Em 2018, o Windows 7 e o navegador padrão, o IE9, ainda eram muito populares, e o Windows 10 e o IE11 só alcançaram massa crítica no início de 2020 (de acordo com o contador de estatísticas). Analisando nossos dados, encontramos uma quantidade significativa de comércio vindo de clientes que usam o IE9 ou, pior ainda, o IE11 no modo de compatibilidade. Esse tráfego foi significativamente inclinado para mercados emergentes e em áreas em que 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 por navegadores legados.

Para resolver isso, adotamos uma postura de aprimoramento progressivo com o componente de navegação e todos os futuros aplicativos da Web. Faríamos "funcionar", mas pode haver polyfills e restrições significativos para fazer isso. Por exemplo, o IE não é compatível com a API Fetch, mas há polyfills que voltam ao IE10 que incluímos para esses navegadores. Para o IE9, codificamos as chamadas XMLHttpRequest em um arquivo separado, para serem carregadas apenas nos casos em que fetch não pudesse ser preenchida.

Quando chegou a hora de abandonar o suporte ao IE9, quando apenas alguns clientes ainda usavam o navegador, conseguimos simplesmente remover esse código dos nossos aplicativos, com o mínimo de esforço e o máximo de benefícios para nossos usuários em navegadores modernos.

À medida que a transformação digital da Maersk continuou, reconstruímos muitas partes do site com microfront-ends com tecnologia VueJS. O Vue tinha muitos recursos que o tornavam amigável para o futuro, com uma ótima configuração predefinida para otimização avançada de pacotes e de desempacotamento, além de 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 evergreen e outra para aplicativos legados que não entendem módulos ES6. Essa versão legada é veiculada para navegadores como o IE e costuma ser 100 KB maior em seu pacote de polyfill compactado com gzip pela quantidade de recursos que o navegador não tem.

Descobrimos que também poderíamos usar a maioria das técnicas modernas de layout CSS, como a grade CSS, graças à Microsoft, que começou a especificação no IE10. Com a ajuda do autoprefixer e este artigo do CSS Tricks para nos ajudar a nomear diferentes áreas de uma página, criamos um sistema de layout leve, adequado para qualquer projeto e extremamente flexível. Ainda assim, houve problemas de compatibilidade que custaram muito tempo para corrigir.

De repente, voltamos à fase de análise de custo-benefício, mas para qualquer versão do IE desta vez, e, assim como no IE9, é uma compensação entre oferecer suporte a todos e semanas de tempo de desenvolvimento doloroso para cada projeto. Confiando que usar um navegador moderno é uma experiência melhor para nossos clientes, pedimos que eles não usassem o IE quando acessassem o site. Descobrimos que isso foi bem-sucedido em pequenas quantidades para clientes ativos que tinham o hábito de abrir o IE para interagir com a gente. Essa mensagem foi boa, mas não foi suficiente para fazer a matemática funcionar.

À medida que as visitas do IE diminuíram, a Maersk decidiu seguir o exemplo de muitos outros antes deles e acabar com o suporte oficial ao IE, embora os números ainda digam que devemos apoiá-lo. Por que agora?

Um site com uma barra de navegação horizontal.
Página inicial da Maersk com o componente de navegação global.

Simplificando, a plataforma da Web mudou, e o IE11 não pode fazer o que precisamos, mesmo com um pequeno exército de polyfills. Considere o componente de navegação: em um mundo moderno de plataformas da Web, ele é um elemento personalizado, com seus próprios estilos encapsulados, impulsionado por variáveis CSS e consultas de contêiner para que controle tudo em um componente. Sem essas partes da plataforma, o estilo desses componentes pode ser completamente alterado pelo aplicativo, e os estilos podem vazar para outros componentes ou voltar para o aplicativo. Com os polyfills, é possível emular a maioria dos recursos apresentados aqui, incluindo elementos personalizados, ShadyCSS, ShadyDOM e o elemento template.

Na prática, esses polyfills funcionam muito bem para componentes isolados, mas, ao combinar vários componentes em um aplicativo complexo, o IE para com dezenas de segundos de tela branca enquanto o runtime do JavaScript tenta calcular a árvore de estilo pela 40ª vez. Em resumo, a experiência do usuário foi gravemente comprometida para oferecer suporte ao navegador.

No passado, tínhamos pequenas interrupções, como polyfills que podiam adicionar meio segundo à first paint, mas não muito mais. Isso era diferente, e esses apps se tornaram inutilizáveis. Os polipreenchimentos só podem fazer muito quando desafiados pela complexidade da plataforma da Web moderna.

Sabe o que aconteceu desde que paramos de oferecer suporte ao IE? Muito, muito pouco. Não houve uma avalanche de tíquetes de suporte ao cliente ou feedback negativo. Nossos engenheiros estão mais felizes, e nossos aplicativos têm um caminho de upgrade para o Vue 3 (que não oferece suporte ao IE11, porque o objeto Proxy não pode ser preenchido) e tamanhos de pacote menores. O suporte total a variáveis CSS e fontes variáveis permite uma aplicação mais simples em todas as marcas, e a capacidade de usar os tokens nos componentes de arquivo único do Vue também reduz a complexidade cognitiva, melhorando a experiência do desenvolvedor.

Do ponto de vista do cliente, o uso do IE continua diminuindo lentamente. O IE não foi desativado no site, mas, à medida que o aprimoramento progressivo se transforma em degradação suave, os recursos e aplicativos param de funcionar. Os clientes vão se beneficiar dos avanços da nossa tecnologia, tendo uma experiência mais consistente no site, já que as práticas recomendadas, a acessibilidade e o design são incorporados a um sistema de design baseado no Lit em evolução, com interoperabilidade total com qualquer framework atual ou futuro.

Estou animado para ver como os novos recursos da plataforma da Web podem ser usados na empresa, desde o uso do modo escuro para que os sistemas de embarcações sejam mais fáceis de usar à noite, até o Bluetooth da Web, o WebXR e os PWAs para que nossos apps da Web possam interagir com o mundo físico ao nosso redor em qualquer condição. Agradecemos, Internet Explorer, por tudo. Agora podemos nos atualizar sobre a plataforma da Web.