Vtex IO

VTEX IO é uma plataforma nativa capaz de ajudar a entrega de soluções de negócio com mais agilidade e segurança. Ela permite o foco na experiência do usuário ao invés da preocupação extrema de lojistas em pontos como o desenvolvimento, por exemplo.

Este VTEXbook pretende dar as primeiras explicações sobre as características e o uso do VTEX IO com React (também conhecido como React.js).

Aborda-se, com apoio de imagens, as formas de utilização do VTEX IO com React e também explora-se um pouco mais de seu histórico, características e vantagens de uso.

Supõe-se que o leitor tenha um conhecimento básico da VTEX e esteja familiarizado com programação.

Para baixar o material gratuitamente, clique aqui!

 

Orientador do projeto: João Teixeira (VTEX)

Autores: Giovanna Pereira (Maeztra Consultoria), Rogério Nogueira (Maeztra Consultoria)

Agradecimento: Érick Herrera (Maeztra Consultoria)

 

Como utilizar o VTEX IO de forma eficiente e performática

Como utilizar o VTEX IO de forma eficiente e performática

A plataforma de desenvolvimento VTEX IO é uma de nossas inovações mais recentes e traz uma série de funcionalidades que facilitam e aceleram o processo de desenvolvimento de lojas virtuais e apps. Vamos conhecer algumas dessas funcionalidades e boas práticas de desenvolvimento que melhoram o desempenho das soluções construídas a partir da plataforma.

Uma plataforma de desenvolvimento completa

O VTEX IO permite que nossos clientes e parceiros utilizem a infraestrutura da VTEX para desenvolver suas próprias soluções de ecommerce. As vantagens vão muito além de estabilidade, segurança e confiabilidade: nossa plataforma facilita e acelera o desenvolvimento, reduzindo consideravelmente o time to revenue.

A principal aplicação do VTEX IO está no desenvolvimento de storefront. A VTEX oferece um framework nativo, o Store Framework, baseado em React.js, que oferece todos os componentes essenciais para um ecommerce. Com ele, as páginas são montadas utilizando blocos, que são conjuntos de componentes com funcionalidades específicas. Uma página de produto, por exemplo, pode ser facilmente construída utilizando blocos como Product Image, Product Price, SKU Selector, Shipping Simulator, dentre outros.

Todos os blocos possuem customizações que podem ser feitas declarando valores em suas propriedades. Esses valores e como eles afetam o funcionamento de cada componente estão descritos em detalhe na documentação, permitindo que até mesmo usuários que não sejam desenvolvedores de software consigam implementar uma frente de loja sem grandes dificuldades.

Os componentes também podem ser facilmente estilizados utilizando CSS Handles. E, caso não existam blocos nativos que atendam a alguma necessidade de seu negócio, é possível implementar componentes customizados baseados em React.js. Toda a praticidade de um framework especializado para ecommerce, sem limitar a liberdade dos desenvolvedores para criar novas soluções.

Muito além do frontend

Além do Store Framework, o VTEX IO oferece uma gama completa de ferramentas para desenvolvimento de aplicações variadas, incluindo serviços backend. É possível, também, criar aplicações administrativas, com interface integrada ao VTEX Admin; Pixel Apps para integração com serviços externos; aplicativos para a VTEX App Store, incluindo a possibilidade de monetização e o que mais a criatividade permitir.

O processo de publicação é direto e rápido, permitindo também o versionamento dos aplicativos, o que facilita o lançamento de patches para correções de erros e até mesmo rollbacks para versões anteriores. A função link permite visualizar em tempo real as alterações feitas no código, sem a necessidade de publicar uma nova versão. Isso facilita provas de conceito e experimentação.

A possibilidade de trabalhar em diversos workspaces separadamente é um recurso poderoso da plataforma, que facilita testes e o trabalho em equipe. Cada workspace é um ambiente único que compartilha do mesmo banco de dados da loja, como produtos, preços e logística. Com eles é possível testar rapidamente alterações de configurações e alterações no código sem correr o risco de prejudicar a loja em produção.

Como o comércio digital é data driven, não poderia faltar em nossa plataforma uma funcionalidade nativa para testes A/B: com ela é possível direcionar uma porcentagem do tráfego a um workspace de produção secundário e variar gradualmente essa proporção até que tudo seja validado e a nova aplicação seja definitivamente publicada.

Todas as funcionalidades são acessíveis através de uma CLI (Command Line Interface) intuitiva e todas as informações necessárias estão disponíveis em uma documentação completa e organizada. Os desenvolvedores também contam com o VTEX Community para tirar dúvidas e entrar em contato com outros profissionais de tecnologia e ecommerce, além do nosso suporte técnico a clientes e parceiros.

Com grandes poderes vêm grandes responsabilidades

A grande liberdade oferecida pela plataforma pode abrir precedente para a implementação de aplicativos com problemas de performance e até mesmo apresentando erros no ambiente de produção. Para reduzir esse risco e garantir o sucesso de nossos clientes e parceiros, disponibilizamos uma série de boas práticas de desenvolvimento. Todas essas dicas estão disponíveis com mais detalhes em nossa documentação.

Native first: o conjunto de microsserviços da VTEX oferece um ferramental completo para operações de ecommerce. Sempre verifique se já não existe alguma aplicação nativa que ofereça a funcionalidade desejada antes de começar a implementar customizações.

VTEX App Store: além dos apps nativos, contamos com uma série de serviços de parceiros que complementam nossa plataforma. Não se esqueça de consultar também a nossa App Store, sua necessidade pode estar a um clique de distância!

Leia a documentação: nosso time de tech writers trabalha duro para garantir que todos os detalhes técnicos sejam disponibilizados na documentação e para que ela se mantenha sempre atualizada. Leia com atenção, pois a maior parte dos problemas pode ser resolvida em uma consulta à documentação.

Pense antes de agir: uma boa arquitetura facilita o desenvolvimento e evita gargalos no futuro. Idealize e planeje o seu projeto antes de colocar a mão no código, pesquise o que for necessário, faça provas de conceito e cheque todas as limitações impostas por apps de terceiros que vão ser integrados em sua solução.

Use o versionamento a seu favor: separe a publicaçãode cada alteração, por mínima que seja, em patches diferentes. Isso facilita a identificação de bugs e também permite uma resposta rápida com um rollback em caso de crise.

Siga as boas práticas de desenvolvimento em Node e React: essas tecnologias são a base do VTEX IO, e permitem a criação de praticamente qualquer funcionalidade. Mas, para que tudo funcione corretamente, alguns conceitos básicos precisam ser respeitados e a documentação desses frameworks deve ser consultada de forma complementar à documentação da VTEX.

Teste antes de publicar: teste a funcionalidade em um workspace de desenvolvimento e faça pelo menos um teste A/B antes de instalar o app no workspace master. Alguns erros só podem ser identificados em ambientes de produção, por isso a importância do teste A/B. Considere todas as interações que seu app tem com outras funcionalidades para evitar que uma atualização cause efeitos colaterais em outras partes da loja.

E sempre conte conosco para lhe ajudar! Temos os melhores especialistas em ecommerce do mercado à sua disposição para garantir o sucesso do seu negócio, além de todo o ecossistema de parceiros.

Quer aprender mais sobre VTEX IO e se capacitar para desenvolver utilizando nossa plataforma? Confira a Trilha de Aprendizagem VTEX IO