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 myworkspacevtex 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:
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
