Produto

VTEX IO: descomplicando o desenvolvimento web

Eric Breno
Eric Breno May 27, 2021
VTEX IO: descomplicando o desenvolvimento web

Entenda como o IO facilita o desenvolvimento, assegurando compatibilidade, uniformidade na documentação e simplificando integrações.

Com a popularização e democratização do acesso à internet e sites, que há 15 anos eram criados com o principal objetivo de exibir informações textuais e algumas ilustrações, passaram a ter recursos cada vez mais complexos.

Os mais diversos tipos de ferramentas e funcionalidades on-line foram tomando o lugar de programas que antes precisavam ser instalados no seu computador pessoal, como mensageiros e editores de fotos, por exemplo. Assim, os sites foram exigindo infraestruturas cada vez mais elaboradas e servidores mais poderosos.

Para acompanhar o acelerado processo de reinvenção e evolução da web, há o desafio crescente de disponibilizar ferramentas para que desenvolvedores possam criar soluções cada vez mais sofisticadas.

Pensando nisso, a VTEX decidiu criar um recurso para alavancar este processo, trazendo mais praticidade para vários passos que antes precisavam ser realizados manual e exaustivamente pelos desenvolvedores – especialmente no caso de sistemas com milhões de linhas de código, mantidos por equipes de centenas de engenheiros, designers, e outros profissionais.

Conheça a seguir como funciona o VTEX IO.

Uma ferramenta para integrar e descomplicar o processo

Quando estamos desenvolvendo uma página web é comum consultarmos informações de alguma fonte externa, geralmente um servidor próprio, para que o usuário possa visualizar, interagir e modificá-la. É comum que o desenvolvedor execute e acesse o site da sua máquina, enquanto atualiza o código e acompanha as mudanças serem exibidas em um navegador. Isso é o que chamamos de desenvolvimento local.

Quando o desenvolvedor segue este processo, ele vai fazer com que o seu site consuma informações de algum servidor (externo ou local) enquanto modifica o código do site em si. Uma vez que o desenvolvimento foi finalizado, o código atualizado é enviado para um repositório na nuvem, como o Github. Depois, é gerada uma versão do código, e essa versão pode ser publicada em um servidor ou CDN (por exemplo AWS S3) para que os usuários consigam acessar e visualizar o site.

Existe uma infinidade de ferramentas que conseguem automatizar cada um desses passos, e até executá-los em pipeline, uma espécie de automatização conjunta. A quantidade crescente de ferramentas gera alguns problemas como: manter compatibilidade, realizar atualizações, ter uniformidade entre documentações, além de nos demandar mais conhecimento específico para operar todo o conjunto.

Pensando em simplificar esta integração de processos e facilitar o funcionamento desse procedimento, a VTEX criou o IO.

A proposta do VTEX IO

Com o IO, você consegue realizar o desenvolvimento a partir da sua máquina e ver os resultados em tempo real. Executando o site em um ambiente similar ao que ele funcionará na versão final, é possível ter maior fidelidade em quesitos como performance e integração com outros componentes do site, além de não precisar ter um setup inicial, pois o IO tem um conjunto de builders que lida com isso.

O IO também permite que outras pessoas acompanhem o desenvolvimento do site diretamente, basta saberem qual o link que você está utilizando. Isso é útil principalmente em contextos de equipes grandes que realizam revisão de código e teste de novas funcionalidades por outros desenvolvedores.

Quando o código atualizado é enviado ao Github, o próprio IO reconhece e consegue gerar as tags (versões) novas da sua aplicação de forma automática, deixando-as disponíveis para que sejam aplicadas no ambiente do usuário final quando for conveniente, assim como realizar a troca para versões anteriores, em cenários em que seja preciso realizar um rollback, por exemplo.

Tudo isso funcionando dentro de uma mesma ferramenta, de forma simplificada.

O IO também introduz o conceito do desenvolvimento baseado em Apps, fazendo com que o código seja modularizado em partes que compõem um todo. A ferramenta também realiza a orquestração e comunicação entre essas Apps, permitindo organizar os projetos em partes que são desenvolvidas e mantidas por diferentes equipes, mas que funcionam em conjunto.

O VTEX IO na prática

Fazer uma modificação em um app se torna fácil e ágil com o VTEX IO, durante o desenvolvimento você vai utilizar o que chamamos de workspace em uma dada conta. Neste exemplo, usarei a conta ericshop, uma loja fictícia de roupas.

Tendo instalado o toolbelt do IO em sua máquina, você deve realizar o login na conta usando suas credenciais, com o comando:

vtex login ericshop

Estando logados, criamos o nosso workspace, que funcionará de forma análoga como uma branch funciona com o git, utilizando o comando use:

vtex use myworkspace
vtex link

Workspace configurado, basta utilizarmos o comando link, e o nosso código já estará executando, “conectado” com a infraestrutura VTEX, ao vivo e público!

O seu workspace vai utilizar as mesmas permissões que a loja linkada, então não é necessário se preocupar com aspectos de segurança, deploy, ou APIs, focando no desenvolvimento. Neste cenário, você poderia ver as mudanças enquanto programa diretamente em: https://myworkspace–ericshop.com.br, que funciona com HMR – Hot Module Replacement.

Uma vez que você tenha finalizado a codificação, ao subir um Pull Request no Github, o Bot do IO vai perguntar que tipo de mudanças você está publicando, da seguinte forma:

Marcando o tipo adequado, ao realizar o merge, uma tag é criada automaticamente no repositório seguindo o versionamento semântico, e a versão gerada já fica disponível para o deploy no ambiente que você desejar. O próprio Bot responde no seu PR indicando o comando a ser utilizado, desta forma:

Você pode conferir toda a documentação do IO aqui: https://vtex.io/docs/
Versionamento semântico: https://semver.org/lang/pt-BR/
Hot Module Replacement: https://webpack.js.org/concepts/hot-module-replacement/

Além das praticidades durante o desenvolvimento, o IO também permite a junção de diversos repositórios como parte de um mesmo domínio/site. Isso é interessante quando temos diversos módulos desenvolvidos por equipes diferentes que compõem um mesmo produto, permitindo que cada módulo seja também atualizado e modificado de forma independente, mesmo que estejam compondo um mesmo “site” do ponto de vista do usuário final.

Por exemplo, podemos ter os módulos Financeiro e Catálogo em um site administrativo para lojas. Neste cenário, é possível que cada módulo seja um projeto e responda a diferentes rotas para apresentar os conteúdos, e o IO realiza a orquestração deste funcionamento seguindo o mesmo fluxo já apresentado. Este esquema de configuração é realizado através das interfaces das aplicações, para definir qual rota corresponde a qual componente.

Você pode conferir a documentação de interfaces aqui: https://vtex.io/docs/concepts/interfaces/

Com o IO também é possível criar BFFs nas aplicações, ou, Backend For Frontend, que são serviços Node que se encaixam como uma camada intermediária entre a sua aplicação de front e algum servidor, ou mesmo outros BFFs, utilizando o próprio domínio da loja e com recursos definidos pelo IO Routes. As rotas definidas no BFFs são acessíveis a partir do domínio da conta em que estão publicados.

Por exemplo, se você deseja consultar uma API de endereços, mas não quer expor no front detalhes de qual serviço está utilizando, credenciais, etc., é possível criar um BFF que faz isso, encapsulando e escondendo essas informações, e o front se comunica apenas com o próprio domínio, na rota em que o BFF estiver configurado.

Você pode conferir a documentação de Routes aqui: https://vtex.io/docs/concepts/routes/

Fluxo de trabalho mais simples e integrado

Com as mais diversas ferramentas que podem ser integradas de formas variadas, a VTEX apresenta uma solução que busca simplificar o fluxo de trabalho, integrando os diferentes passos do fluxo em um mesmo toolbelt, e simplificando a execução do código em ambientes mais próximos ao real ainda durante o desenvolvimento.

Com o IO, as aplicações podem ser divididas semanticamente em partes menores, sem que haja prejuízo na evolução das aplicações e limitações sobre qual tecnologia e frameworks utilizar em cada parte, além de não aumentar a complexidade de gerenciar essa arquitetura de publicação e atualização desses projetos.

Além disso, o conceito das Apps faz com que haja boa modularidade em “plugar” e “desplugar” partes das aplicações de acordo com as necessidades de evolução, migração e até mesmo com as estratégias do negócio.

Quer fazer parte do time? Acesse: careers.vtex.com

Continue lendo: artigos relacionados
Produto

inStore – Prateleira Infinita: a inteligência do checkout VTEX na palma da mão do vendedor

Amplie exponencialmente as possibilidades de conversão usufruindo do estoque infinito e do marketplace in no digital commerce. A…

Isabella Feitosa
Isabella Feitosa
Produto

Conheça o VTEX Insurance: sua nova fonte de receita com seguros

A solução da VTEX em parceria com a Assurant oferece seguros para produtos adquiridos no ecommerce em jornada…

Mariana Boese
Mariana Boese
Produto

Conheça o VTEX Assisted Sales, nossa solução para vendas e atendimento pelo WhatsApp  

Com a ferramenta é possível conectar clientes e vendedores de maneira automática e simplificada potencializando resultados De acordo…

Mariana Boese
Mariana Boese
Produto

Soluções OOTB, externas e customizadas: como escolher a melhor para o objetivo do seu negócio

Não há dúvida de que escolher o conjunto correto de ferramentas e plataformas para operar um negócio online…

Guilherme Portela, Paloma Castrioto, Renato Ricardi
Guilherme Portela, Paloma Castrioto, Renato Ricardi
Produto

Empresas em todo o mundo aumentam sua rentabilidade com o Seller Portal do Marketplace da VTEX

A VTEX sabe que o modelo de marketplace é uma das estratégias mais importantes para os operadores de…

Lalo Aguilar
Lalo Aguilar
Produto

Desbloqueando um novo modelo de vendas com VTEX Gift List

Quem nunca participou de uma boa festa de casamento? Os votos, os docinhos e festa entre amigos e…

Beneson Damasceno
Beneson Damasceno
Produto

Novidades de Marketplace da VTEX: além do ecommerce tradicional

Há mais de dez anos, as funcionalidades de marketplace têm sido um pilar da VTEX Commerce Platform. Nossa…

Lalo Aguilar
Lalo Aguilar
Produto

VTEX e Adyen firmam parceria para levar o comércio unificado aos varejistas online

Seja adicionando novos conteúdos, impulsionando iniciativas de marketing ou investindo na próxima grande tendência, podemos afirmar com segurança…

Gabriela Porto
Gabriela Porto
Produto

Central de Atendimento no WhatsApp: simplifique processos e escale mais vendas

Para empresas que possuem mais de um vendedor atendente no WhatsApp, manter uma Central de Atendimento nesta plataforma…

Isabella Feitosa
Isabella Feitosa
See More