VTEX IO: guia completo para desenvolvedores e-commerce
O VTEX IO é o runtime de desenvolvimento da VTEX que permite criar aplicações customizadas usando TypeScript, React e GraphQL. Diferente do CMS legado, o IO oferece um ecossistema moderno com builders especializados, deploy atômico e isolamento por workspace. Se você trabalha com VTEX, entender o IO a fundo é obrigatório.
Builders: cada um com sua função
O IO organiza o código em builders. O builder react renderiza componentes de storefront. O node cria backends com middleware Express-like. O graphql expõe schemas e resolvers. O messages cuida de internacionalização. O store monta blocos do Store Framework. Cada builder tem seu diretório, sua configuração e seu ciclo de build. Misturar responsabilidades entre builders é o erro mais comum de quem está começando.
Custom Apps: quando o padrão não resolve
Apps customizadas resolvem o que o ecossistema padrão não cobre: regras de negócio específicas, integrações com sistemas internos, extensões de checkout e automações. Uma app VTEX IO é um pacote com manifest.json, políticas de acesso declaradas e deploy via vtex publish. O segredo é manter apps pequenas e focadas. Uma app que faz tudo vira um monolito dentro do monolito.
Workflow de desenvolvimento
O desenvolvimento no IO segue um ciclo: vtex link para desenvolvimento local com hot reload, vtex deploy para publicar no workspace de teste, vtex install para instalar no workspace de produção. Workspaces permitem testar mudanças sem afetar a loja em produção. O A/B testing nativo compara workspaces com tráfego real. Sempre teste em um workspace de staging antes de promover para master.
Performance no VTEX IO
Apps mal escritas são a principal causa de lentidão em lojas VTEX. Evite fetch em cascata (waterfall requests), use cache de GraphQL com maxAge e stale, minimize o JavaScript enviado ao client e prefira server-side rendering sempre que possível. O Lighthouse é seu melhor amigo. Rode antes e depois de cada deploy.
Quando não usar custom apps
Se o problema pode ser resolvido com configuração do admin, uma app do marketplace ou um ajuste no tema, não crie uma custom app. Cada app adiciona complexidade ao build, ao deploy e à manutenção. Avalie o custo-benefício antes de abrir o editor de código.