O que o fim do suporte ao Internet Explorer significou para os clientes e desenvolvedores da Maersk.com.
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 IE9 ainda eram muito populares, e o Windows 10 e o IE11 só alcançaram a massa crítica no início de 2020 (de acordo com o contador de estatísticas). Analisando nossos dados, encontramos uma quantidade significativa de transações 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 melhoria progressiva com o componente de navegação e todos os apps da Web futuros. Ele "funcionaria", mas pode haver polyfills e restrições significativas para fazer isso. Por exemplo, o IE não oferece suporte à API Fetch, mas há polyfills que remontam 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 preenchido.
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 avançava, refizemos muitas partes do site em microfrontends 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 geralmente é 100 KB maior no pacote de polyfill compactado com gzip simplesmente 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 do 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 ao estágio 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.
Como as visitas do IE diminuíram, a Maersk decidiu seguir o exemplo de muitas outras empresas e encerrar o suporte oficial para o IE, mesmo que os números ainda indiquem que ele deveria ser mantido. Por que agora?
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 uma plataforma da Web moderna, esse é um elemento personalizado, com estilos encapsulados, controlado por variáveis CSS e consultas de contêiner, de modo que ele controla 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. Existem polyfills que permitem emular a maioria dos recursos 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 foi diferente, e esses apps ficaram 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 em 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.