Faça uma pesquisa por “Sem cabeça, “E você encontrará milhares de artigos falando sobre essa nova abordagem. A maioria dos autores aprecia a liberdade que oferece para o desenvolvimento de front-end, enquanto grande parte de sua base de fãs aprecia sua excelente interface de usuário (UI). Independentemente disso, são as empresas de comércio eletrônico que demonstram grande interesse em implementar o Headless para sua loja on-line.
Eu discuti anteriormente sobre Progressive Web Apps, que faz parte dessa abordagem. Um conceito semelhante foi adotado por gigantes do comércio eletrônico como Amazon, Flipkart e Nike, com o único objetivo de renderizar uma experiência sofisticada ao cliente.
Este artigo é outra carta de amor para o desenvolvimento de sites Headless? Até certo ponto, sim. Mas prefiro discutir seus benefícios para as empresas de comércio eletrônico e como, como agência de desenvolvimento de sites de terceiros, ajudou a implementar o Headless para algumas das plataformas de comércio eletrônico mais populares.
Contents
O que é o comércio eletrônico sem cabeça?
Fundamentos: Todo site de comércio eletrônico consiste em duas metades funcionais – o front-end e o back-end.
O front-end do site atua como um canal intermediário entre o usuário e o portal de comércio eletrônico, enquanto o back-end gerencia os detalhes do produto e todo o funcionamento do portal. Ao longo dos anos, portais populares de comércio eletrônico aderiram à abordagem clássica, na qual o front-end e o back-end do site são controlados no mesmo painel, o que significa que eles compartilham uma plataforma comum.
Entre no Headless com uma estratégia totalmente nova. Se você ainda não ouviu falar sobre o Headless, serve basicamente para separar o front-end e o back-end de um site. Com menos interferência, cada parte do site se comporta de maneira independente e se destaca em seus respectivos campos – você tem um especialista em interface do usuário para lidar com a face do portal e um especialista de back-end para fortalecer a base:
A arquitetura básica dos portais de comércio eletrônico
Sem se aprofundar nas minúcias da arquitetura de comércio eletrônico, o que se segue são estruturas de portal projetadas aproximadamente para ilustrar o funcionamento básico dos sites de comércio eletrônico e suas interações em todas as etapas.
Pilha completa
A arquitetura Full Stack é uma abordagem mais convencional que os webmasters móveis usaram desde que o desenvolvimento de aplicativos móveis começou a se tornar uma tendência. Os desenvolvedores criam um ecossistema completo com a plataforma de comércio no centro, juntamente com uma loja integrada. O portal processa plataformas individuais, como dispositivos móveis e web, separadamente. As entregas são mais independentes e dedicadas à plataforma de veiculação.
Com a plataforma de comércio no centro, o portal de comércio prioriza funções de back-end como gerenciamento de conteúdo, atendimento e dados do produto.
Comércio sem Cabeça
Comparada à arquitetura de pilha completa, a estrutura de comércio eletrônico Headless separa claramente o front-end da loja virtual do restante das funções do site. Ajuda a visualizar essa arquitetura como partes separadas e não como um sistema centralizado comum. As entregas são gerenciadas com APIs que processam uma interface de usuário front-end comum que se ajusta de maneira inteligente a todas as plataformas.
Por razões óbvias, o front-end agora prioriza funções como pagamento e personalização, enquanto a plataforma de comércio gerencia os gostos de gerenciamento de conteúdo, atendimento e gerenciamento de produtos.
Parece muito técnico? Isso pode ser resumido com este ponto singular: o comércio eletrônico sem cabeça é muito mais flexível do que as abordagens convencionais em termos de renderização de uma experiência omnichannel.
Um aumento repentino na demanda por decapitados
O Retail Dive e o BigCommerce recentemente apresentaram números surpreendentes em uma pesquisa que envolveu executivos globais e gerentes de marketing e suas lutas com a aquisição de consumidores digitais. Segundo o relatório, 86% dos líderes de negócios indicaram que estavam experimentando um aumento no CAC (custo de aquisição do cliente). Com a mídia paga cada vez mais cara e mais competitiva, o relatório sugere que a opção preferível é criar estratégias melhores para atrair tráfego orgânico.
Os usuários estão consumindo conteúdo de quase todos os lugares. Além da presença on-line e da experiência aprimorada de compras, as empresas precisam oferecer aos consumidores opções de compra fáceis em todos os dispositivos. Esta declaração é apoiada por uma pesquisa da Mediapost, que afirma que os americanos estarão conectados em 13 dispositivos de rede por pessoa. Escusado será dizer que a lista inclui dispositivos de todos os tipos com uma variedade de dimensões de tela, como laptops, tablets, telefones celulares, ferramentas de reconhecimento de voz, smartwatches, quiosques, tablets para carros e todos os dispositivos conhecidos por oferecer acessibilidade aos serviços da Web.
Casos práticos em nosso laboratório: como desenvolvemos uma arquitetura sem cabeça para nossos clientes
Como uma agência que oferece soluções personalizadas de comércio eletrônico, nossos clientes costumam solicitar que forneçamos portais extremamente rápidos para carregar e igualmente intuitivos no final do usuário. E o que fazemos é recomendar a abordagem decapitada. Por razões óbvias, ele precisa percorrer uma milha extra, mas isso gera bons resultados para eles.
Implementando um Magento sem Cabeça
Processo interno: Plataforma de comércio Magento
A parte dianteira: JS angular
Problema endereçado:
Problemas de carregamento – o site original levou até 7 segundos para aparecer. O que significava uma tela em branco por mais de 7 segundos. O Magento, por padrão, oferece um front-end projetado no CMS baseado no KnockoutJS. A loja altamente integrada restringia a loja virtual em várias frentes. O crescente número de usuários começou a afetar o desempenho da loja.
Nossa solução:
Com um modelo decapitado projetado com JS angular, filtramos o back-end de afetar a fachada da loja. A abordagem clássica de carregamento lento reduziu o tempo de carregamento da página em quase metade.
Resultado:
O tempo de carregamento da página foi reduzido drasticamente de 7 segundos para 2,8 segundos.
Outro estudo de caso Magento sem cabeça
Processo interno: Plataforma Magento Commerce
A parte dianteira: VueJS
Problema resolvido:
Navegação na Página – A experiência do Magento é limitada ao desempenho de back-end. Seu front-end é bastante rígido e geralmente exige que você faça um tour pelo back-end, sempre que executar uma ação na frente da loja. Você clica em uma nova página, a loja passa a solicitação ao back-end do Magento, processa os dados e permite carregar a nova página. A navegação na página é algo que foi prejudicado no processo.
Nossa solução:
Conseguimos estabelecer um Aplicativo de Página Única no Magento com o VueJS. O usuário agora pode navegar entre as páginas no próprio modelo do Vue. Uma grande parte da consulta já foi resolvida no modelo do Vue, evitando que o back-end do Magento seja queimado.
Resultado:
Fatias de tempo de navegação na página por variedades.
Implementando o Headless em uma loja virtual da Shopify
Processo interno: Plataforma Shopify Commerce
A parte dianteira: Gatsby JS
Sessões longas de checkout – As sessões de checkout em qualquer plataforma de comércio eletrônico, incluindo o Shopify, geralmente são muito longas. Os usuários devem preencher 4 páginas longas antes de pagar. A história de trás – publique todas as páginas, a loja recarrega a próxima página do back-end do Shopify, seguida pelo atraso no processamento por gateways de pagamento de terceiros. Dito isto, temos buffers em todas as etapas, tornando a seção de pagamento demorada e irritante.
Acima de tudo, o Shopify limita a capacidade de personalizar a página de checkout, restringindo o controle do administrador sobre seu conteúdo.
Nossa solução:
Com o Gatsby JS, conseguimos criar uma seção de checkout virtual de uma página. Limitamos os campos e classificamos todos os detalhes em uma única página.
Resultado:
Tempo da sessão de checkout reduzido por variedades.
Sem cabeça não é tão perfeito
Embora afirmemos decapitado como uma abordagem para resolver a maioria dos problemas em sua loja de comércio eletrônico, isso certamente não significa que ocorra sem falhas. Aqui estão algumas razões para não possuir o comércio sem cabeça:
Custo crescente:
A melhor parte sobre o comércio sem cabeça é que a loja virtual não possui um front-end predefinido. Os desenvolvedores o constroem do zero para fornecer conteúdo orientado ao dispositivo. A pior parte, consome tempo e o custo pode ser alto.
Além disso, você precisa gastar mais, pois a equipe de marketing não é suficiente para alcançar as pessoas. Os proprietários são altamente dependentes da equipe de TI para iniciar as páginas de destino em vários dispositivos.
Não é favorável ao marketing
Um sistema de comércio sem cabeça não possui uma camada de apresentação front-end. Que significa:
-
A visualização do conteúdo nos dispositivos dos usuários finais se torna difícil.
-
Os profissionais de marketing não conseguem criar conteúdo no ambiente WYSIWYG convencional.
-
A criação, criação e publicação de conteúdo se torna muito mais lenta devido ao aumento da confiabilidade em outro departamento.
Isso implica que o comércio sem cabeça acabaria estressando os profissionais de marketing a terem mais desempenho com uma dependência maior do departamento de TI para criação e entrega de conteúdo.
Alterações restritas na vitrine
O sistema de comércio Headless não possui um ambiente WYSIWYG e é construído exclusivamente com estruturas baseadas em JS. Embora ele ofereça ao seu site espaço suficiente para expandir o site, também o restringe a novas redesenho do frontend, sem muita dependência dos desenvolvedores do JS.
Resumindo
As principais empresas de comércio eletrônico possuem arquitetura sem cabeça. Acima de tudo, está ajudando-os para sempre. Headless tem seus benefícios, bem como desvantagens. Pode ser necessário que você vá além, mas os resultados obtidos irão durar.
As arquiteturas convencionais ainda são fáceis de administrar o suficiente para continuar, mas, novamente, a mudança é a única constante.
