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

UX para Ecommerce: Design focado em Vendas Conscientes

O texto a seguir foi adaptado da palestra que apresentei no evento Tech Women Summit dia 15 de…

Bianca Galvão
Bianca Galvão
Produto

Startup vs. unicórnio: como é trabalhar com produto em duas realidades diferentes

Estar à frente de uma pequena startup ou liderar um time em uma grande unicórnio? Gustavo, conta quais…

Gustavo Vedotti
Gustavo Vedotti
Produto

VTEX Community: promovendo a colaboração no ecossistema do comércio digital

Inspirados pela nossa declaração de futuro, na qual nos comprometemos a compartilhar conhecimentos valiosos que moldem o mercado,…

Cassiane Vilvert
Cassiane Vilvert
Produto

A construção de um produto de escala global nas perspectivas de Product Management e Product Marketing

Os papéis de Product Manager (PM) e Product Marketing Manager (PMM) são relativamente novos no mercado brasileiro, logo,…

VTEX
VTEX
Produto

Hoi, salut, 안녕하세요! Plataforma da VTEX agora disponível em holandês, francês e coreano

Dando mais um passo fundamental rumo ao nosso objetivo de escrever o futuro do comércio, anunciamos que a…

Larissa Dias
Larissa Dias
Produto

Oito ações concretas para quem quer migrar para a área de produto

Está pensando em fazer uma transição de carreira e trabalhar com produto? Conheça a trajetória de uma profissional…

Alice Sabino
Alice Sabino
Produto

“Kon’nichiwa Japan!” Agora a plataforma da VTEX também está disponível em japonês

Depois de abrir um escritório em Singapura para melhor atender os clientes globais na região da Ásia Pacífico,…

Cassiane Vilvert
Cassiane Vilvert
Produto

Documentação de software em uma empresa de tecnologia em crescimento acelerado

A VTEX aprendeu muito, nos últimos anos, sobre a importância da documentação para produtos ganharem escala global. Tudo…

George Brindeiro
George Brindeiro
Produto

Pix e o impacto no ecommerce: do lançamento à Black Friday

O novo meio de pagamento instantâneo do Banco Central, o Pix, entrou em vigor dia 16 de novembro.…

Juliana Sales
Juliana Sales
Veja Mais
Registro feito com sucesso