Apresentando VTEX IO Store Framework em open beta

Lucas Bacic
Lucas
19 mar 2020
Reading Time: 6 min

Na VTEX acreditamos que varejistas deveriam ter o poder de vender qualquer coisa, de qualquer lugar, para qualquer lugar, através de qualquer canal. Para tornar essa visão possível, estamos em constante evolução para ajudar marcas a lidarem com cenários de negócio cada vez mais complexos (ex: cross-border, marketplace, omnichannel) com uma plataforma que seja mais simples e estratégica.

Temos uma abordagem para isso — é o que chamamos de time-to-revenue: aplicamos nossa expertise em comércio para desenvolver a tecnologia que vai te ajudar a adaptar e transformar sua operação de forma ágil e encontrar os resultados ainda mais rápido.

Acreditamos que a única forma de companhias se transformarem é adotando tecnologias mais simples. Assim, é possível provar os resultados, adaptar e continuar evoluindo.

Dito isso, estou aqui para anunciar um importante passo nessa direção: o lançamento do novo VTEX IO Store Framework em open beta.

 

 

A comoditização do front end


Nos últimos dez anos, um dos trabalhos que mais demandam energia de varejistas tem um nome e um bom budget: a frente de loja. Operações precisam lidar com a implementação, gestão e evolução de um bom front end de loja para parecer bem visualmente, como ter boas taxas de conversão. 

Porém, nos últimos anos o front end vem se transformando. A programação evoluiu drasticamente com novos frameworks e ferramentas. De design systems complexos, até empresas fazendo testes A/B de cada parte da experiência — a implementação e gestão do front end estão rapidamente se tornando mais simples e escaláveis. Estão comoditizando. E nós acreditamos que o layout de loja também deveria.

Deixe eu dar um exemplo. Em 2013 nós lançamos um importante produto: o SmartCheckout. Ele foi um dos primeiros checkouts sem senha do mercado e ajudou nossos clientes a aumentarem vendas e taxas de conversão. Nós fomos muito bem sucedidos porque analisamos e estudamos as melhores experiências de compras (UX) possíveis. Criamos e testamos incansavelmente e só então escalamos a solução para todos os clientes. Se hoje você é um cliente VTEX, você não precisa se preocupar em construir um bom checkout — você simplesmente confia que o nosso é bom, certo? Bem, é hora de fazermos o mesmo com toda a experiência de compra on-line.

Pense em um front end de loja: quais são os elementos cruciais que todo e-commerce tem? Um menu, rodapé, uma prateleira de produtos, página de produto, carrinho, checkout e assim por diante, certo? Essa é a ideia. Independente do layout ou marca, todos os clientes têm as mesmas informações estruturadas — em diferentes sabores e combinações — mas as mesmas informações.

O que acontece é que — assim como o checkout 8 anos atrás — toda nova loja precisa investir tempo e dinheiro para implementar, resolver bugs e melhorar a experiências através de incontáveis testes e erros. É, na verdade, uma curva de aprendizado lenta e cara. E é exatamente por isso que construímos o VTEX IO Store Framework: para fazer a implementação de lojas rápida e a evolução ainda mais ágil — com a melhor experiência de compra, taxas de conversão e velocidade.

 

store-framework-reference-store

Quando o open-source encontra a verdadeira escalabilidade.


Então, o que é esse novo produto? Em poucas palavras, o VTEX IO Store Framework é um framework de implementação low-code para desenvolver lojas na VTEX. Criado em cima do VTEX IO, nossa plataforma de desenvolvimento, ele utiliza React e Node para acessar todos os dados da VTEX e transformá-los em componentes prontos, altamente customizáveis, criados, gerenciados e evoluídos pela própria VTEX e seu ecossistema.

O que isso significa? Estamos fazendo a implementação mais simples com componentes prontos para serem utilizados, enquanto nos alavancarmos de uma comunidade de desenvolvedores e o aprendizado de todos os nossos clientes para fazer esses mesmos componentes evoluírem. Com o VTEX IO Store Framework, cada parte do seu layout — e consequentemente a sua própria loja — vai continuar evoluindo e evoluindo todos os dias. 

Você poderá criar a sua frente de loja, nos seus próprios termos, marca e estilo — gerenciá-lo de forma simples — enquanto nós garantimos que ele esteja livre de bugs e up-to-date com as melhores práticas e tecnologias. Quando você implementa usando o VTEX IO Store Framework, você está escolhendo ajudar todo o ecossistema à ter uma melhor experiência, enquanto se alavanca da nossa experiência para fazer a sua também ser melhor. É nessa hora que o open-source encontra a escalabilidade, e é isso que acreditamos para o futuro da experiência de compra on-line. 

Parece bom, certo? Deixe eu explicar como nós entregamos isso:

 

Low-code e altamente customizável


O princípio é simples: usando uma arquitetura atômica e modular, nós criamos, de pequenos elementos na UI até complexos
componentes pré-construídos — como prateleiras, sliders, menus e assim por diante — que acessam todos os dados da VTEX para mostrá-los automaticamente no front end. Com esses componentes você pode construir páginas e templates sem ter de começar do zero. 

Mas como podemos fazer um framework tão opinionado e ao mesmo tempo atender as demandas de empresas enterprise? Ele precisa ser altamente customizado. Isso vai em todos os níveis de granularidade: cada elemento do seu layout — da tipografia às cores, dos espaçamentos aos corners — estão em um mesmo design system, para que você possa gerenciá-los e atualizá-los com facilidade. Se você quer trocar o tamanho do seu H1, você só precisa fazê-lo uma vez e todas as páginas vão seguir e atualizar automaticamente.

Além dos “átomos” do layout, todos os componentes pré-construídos foram criados com CSS Handles bem definidos, que identificam cada elemento, tornando possível trocar e customizar partes específicas do layout com a sua identidade.

O próximo nível de customização é no layout — e isso é inegociável para empresas grandes. Para ajudá-lo a criar o seu próprio, nós construímos o que chamamos de componentes de layout. Esses blocos podem juntar componentes e organizá-los de múltiplas formas, tanto em linhas como colunas. Tudo isso para fazer com que você construa suas lojas de forma ágil e inteligente.

 


vtex-site-editor

Autonomia para gerenciar, testar e evoluir


Quando pensar em frente de lojas, temos que considerar quem irá gerenciá-la após a implementação — o time de marketing. Para vocês, também temos ótimas notícias:

Com o novo Store Framework, trazemos um novo CMS. Com ele, você terá um Editor de Sites WYSIWYG para gerenciar e editar conteúdos com facilidade. Além disso, você ainda poderá editar templates e páginas com autonomia. Lembra do exemplo de “H1”? Agora você poderá ajustar estilos de template por você — sem precisar de um desenvolvedor para fazer o trabalho.

Nós também temos componentes nativos como a Integração de blog do WordPress, Sistema de Review nativo, e integrações de tag para trackear e gerenciar todas as suas estratégias de marketing in-sync com as principais ferramentas do mercado.

Mas isso é apenas o começo. No caminho para transformarmos a loja online na melhor possível, nós criamos uma ferramenta nativa de teste A/B, atualmente em beta. Com o VTEX IO o seu time poderá rodar múltiplos testes para melhorar a sua experiência ao máximo. O novo teste A/B usa da nossa arquitetura de múltiplos workspaces. Com ele, você pode ter infinitos ambientes de teste que funcionam como cópios da sua própria loja — assim você pode desenvolver e testar novas versões com segurança e velocidade.

 

progressive-web-application

O estado-da-arte em experiências de compra


Tudo isso é para garantir o que conseguimos com o SmartCheckout — a melhor experiência e taxas de conversão possíveis.

De agora em diante, todas as lojas usando VTEX IO Store Framework estão prontas para PWA. Isso significa que todas as lojas poderão habilitar e suportar navegação e compras offline, rodando como se fossem aplicativos mobile. Em outras palavras, a sua loja online agora pode rodar como uma app no telefone do seu consumidor. 

Para entregar a melhor experiência, nós atacamos todo o ciclo de compra de um cliente. Da homepage até a busca e navegação. Do carrinho, ao checkout e cancelamento de pedido. Com o novo framework, você continua se alavancando do nosso exclusivo checkout sem senha para aumentar conversão, enquanto empodera o seu consumidor com uma área de auto-serviço (Minha Conta) com histórico de compra, trackeamento de entrega, cancelamento e mais.

Por último, mas não menos importante, um dos nossos maiores focos é a velocidade. Para uma loja moderna performar, ela precisa ser rápida. Para isso, nós desenvolvemos uma arquitetura de single page application que entrega uma experiência de navegação fluída. Sabe quando você está navegando em um app mobile e apenas o conteúdo muda — sem alterar a estrutura? É essa a experiência que queremos.

 

O que esperar do open beta


Depois de tudo isso, espero que você esteja animado tanto quanto nós estamos. Para isso, te convidamos para participar do nosso beta aberto. O produto está pronto para ir para as ruas e agora nós queremos desenvolvedores, marketeiros e varejistas para transformá-lo em algo ainda melhor. Ao participar do open beta, você pode contar com:

  • Treinamento de desenvolvimento: O mais novo treinamento, gratuito e self-serve, em como implementar lojas utilizando o VTEX IO Store Framework.
  • Documentação: Comece a desenvolver agora com a nossa documentação, tutoriais e especificações de componente.
  • Release Notes: Todas as atualizações, novos componentes, releases e bug-fixes, para que você possa estar sempre atualizada no que há de mais novo no nosso produto.
  • Acesso ao GitHub: Faça push requests, abra novas issues e torne-se um membro ativo da nossa comunidade no GitHub.
  • Office hours: Tenha acesso à nossa reunião de office hours e nos ajude a modelar o futuro das nossas ferramentas e produtos.


Entre nessa jornada de acelerar a transformação do comércio. Entre para o open beta do VTEX IO Store Framework.