Resumo
Net-A-Porter economiza tempo de desenvolvimento com a biblioteca Polymer do Google
A NET-A-PORTER implementou um design baseado em componentes nas propriedades on-line usando a biblioteca Polymer do Google. O resultado foi uma grande economia de tempo de desenvolvimento, código padronizado nos sites e uma melhoria do desempenho de SEO com o uso de dados estruturados.
Resultados
- Economizaram tempo de desenvolvimento.
- Código padronizado nas propriedades on-line do NET-A-PORTER.
- Melhoramos o desempenho do SEO com o uso de dados estruturados.
Faça o download do estudo de caso em PDF
Sobre a NET-A-PORTER
Lançada em junho de 2000, a NET-A-PORTER é líder global em moda de luxo on-line, com coleções de mais de 350 dos designers mais procurados do mundo.
Por trás da vitrine on-line da empresa, a equipe de engenharia trabalha duro para entregar e manter a net-a-porter.com e a rede de sites e apps da empresa, que inclui duas revistas de moda e uma rede social.
Ao pensar nas propriedades da Web, os engenheiros do NET-A-PORTER veem cada página de um site não como uma página, mas como um conjunto de componentes.
Uma página de produto, por exemplo, pode incluir um componente de preços que indica descontos durante uma promoção, um componente de carrossel com links para produtos relacionados, um componente interativo que mostra roupas completas que destacam produtos, um componente suspenso para adicionar um produto a uma lista de desejos e muito mais.
Uma abordagem baseada em componentes
No início de 2016, a equipe de engenharia da NET-A-PORTER decidiu avaliar como a empresa poderia aplicar componentes à maneira como escrevem códigos para suas propriedades da Web. Devido às muitas páginas e subpropriedades incluídas no NET-A-PORTER e as diferentes equipes que gerenciam essas páginas, os engenheiros sabiam que não fazia sentido começar do zero com uma nova tecnologia que exigiria eliminar a pilha existente. Uma solução ideal permitiria que eles incluíssem novos componentes e os adicionassem a páginas à medida que outros componentes fossem criados. Os componentes precisariam se comunicar com diferentes serviços de back-end de maneira independente, além de exibir dados estruturados sobre o produto para rastreadores da Web.
Testes e sucesso com a Polymer
Depois de avaliar diversas soluções, a NET-A-PORTER optou por testar a biblioteca Polymer do Google. Um experimento inicial com a Polymer foi concluído com tanta rapidez e sucesso que os engenheiros da NET-A-PORTER decidiram seguir em frente e introduzir a Polymer no planejamento geral de desenvolvimento de sites da organização quase imediatamente.
Robin Glen e Matthew Green, engenheiros da equipe, compartilharam:
A integração do Polymer no nosso sistema foi fácil, e ele entrou em operação rapidamente. O fato de termos um site tão grande com tantos aspectos diferentes significa que é fácil ter inconsistências. O Polymer permite criar aplicativos da Web completos e complexos que são escalonáveis e de fácil manutenção.
A padronização do código também foi fácil, porque o Polymer é baseado nos padrões do navegador de componentes da Web. Glen continua:
Criar usando padrões da Web mantém nosso código próximo à plataforma. Isso facilita o aprendizado de como usar e criar novos componentes, garantindo que o desempenho melhore continuamente à medida que os navegadores melhoram e nos permitindo planejar a longo prazo. Por ser baseado no padrão W3C, estamos confiantes em desenvolver na plataforma. Em breve, até mesmo a necessidade de polyfills será desativada no geral.
E também havia os benefícios da SEO. Glen diz que o:
Os componentes exibem dados estruturados detalhados sobre produtos para os mecanismos de pesquisa. O teste desses dados estruturados agora faz parte diretamente do esquema de integração contínua da nossa equipe.
Ao investir antecipadamente na concepção e criação de componentes, a equipe da NET-A-PORTER está percebendo ganhos dramáticos de eficiência a longo prazo: novas páginas e recursos são mais simples e rápidos de criar e lançar, além de integrar o feedback das partes interessadas e ajustes no design ao processo de engenharia.
O futuro da Polymer
A equipe está empolgada com a forma como a Polymer ativou o desenvolvimento da Web. Glen diz:
Assim que vimos como poderíamos reutilizar componentes juntando-os de diferentes maneiras, ficamos entusiasmados. Começamos a nos perguntar se havia outras maneiras de explorar os componentes dentro dos negócios.
Glen acha que há muito mais a explorar com a Polymer. Ele diz:
Este é apenas o começo da nossa jornada com a plataforma Polymer. No momento, estamos melhorando o fornecimento e a manutenção dos componentes atuais, além de trabalhar para expandir o uso do Polymer para mais páginas do NET-A-PORTER. Estamos trabalhando para documentar nossa abordagem com um guia de estilo do componente NET-A-PORTER disponível publicamente. O Polymer também foi muito útil para ferramentas internas. Recentemente, criamos um conjunto de componentes gráficos e mudamos a plataforma de todo o serviço de monitoramento para usar o Polymer.