O que é front end e back end: a definição que basta no vibe coding

Front end é a parte que a pessoa vê e usa. Back end é o que roda por trás, guarda os dados e executa as regras. Cabe nessas duas frases, e quem está começando consegue construir e entregar uma aplicação sabendo só isso, sem decorar nada mais técnico.

Quem mostrou isso ao vivo foi Martin Blume, na segunda live dele construindo um SaaS do zero. Ele estava montando o desenho do stack do projeto, chegou nas caixas de front end e back end e avisou o que ia acontecer:

Eu não sei explicar isso aqui muito bem, mas eu vou tentar explicar da maneira que eu conseguiria, né?

O que veio depois está certo. E ele não parou na definição, foi mostrar.

O front end é a tela que você está olhando

A definição dele saiu apontando para o próprio site aberto no navegador:

O front end é o que o usuário vê, é o que você tá vendo aqui nesse caso do póker

O site na tela era uma sala de pôker que ele fez brincando de vibe coding. O convite para jogar, o botão de criar conta, os campos de e-mail e senha: tudo isso é front end. Se você consegue apontar com o dedo na tela, está olhando para o front end. O mesmo problema apareceu em vibe coding para uma missao por camada front back seguranca.

O back end é o que guarda a senha e roda o motor do jogo

A segunda caixa do desenho ele explicou assim:

o back end seria toda a infraestrutura para ele registrar o nome das pessoas que estão jogando, o nome de usuário, o e-mail, a senha

Repare que ele juntou duas coisas numa caixa só, e está correto em juntar. Lembrar quem é a pessoa que criou a conta é back end. Fazer o jogo acontecer, com as regras dele, também é back end. Você não vê o back end trabalhando, vê só o efeito dele na tela.

A demo que separa as duas metades no vibe coding

Ele abriu uma janela anônima do navegador, para entrar no próprio site como se fosse um usuário novo:

A gente tá na janela anônima. Eu vou entrar e criar uma conta aqui

Digitou um e-mail de exemplo, digitou uma senha, mandou criar a conta, e esbarrou na confirmação por e-mail que o próprio projeto exigia:

Esqueci que tem isso.

O formulário que ele preencheu era front end. O que aconteceu com aquele e-mail e aquela senha depois do clique é back end, e o pedido de confirmação mostra que tem alguém do lado de lá guardando o cadastro e decidindo a regra de entrada. Ele mesmo resumiu:

é um site que tá ligado com um banco de dados que basicamente armazena, né, quem cria a conta

Foi por isso que a conta não abriu na hora: quem decidiu isso não foi a tela.

O que funciona nessa sala de pôker e o que não funciona

O projeto não é um produto pronto, e ele foi honesto sobre isso na mesma cena. Sobre o que funciona:

E eu consegui fazer. Ela funciona muito bem.

Sobre o que não funciona, na mesma tela, no mesmo minuto: "Claro que se clicar aqui não vai para lugar nenhum". E sobre lançar aquilo como negócio, ele já tinha descartado a ideia, dizendo que acha que precisaria de licença para colocar algo assim online.

O estado real do projeto é esse: o fluxo de cadastro está de pé e foi demonstrado ao vivo, o site inteiro não está terminado, e a sala de pôker não vai virar produto. Um cadastro que grava um usuário de verdade e cobra a confirmação do e-mail já prova que as duas metades existem e conversam.

O que você faz com isso amanhã

Abra a coisa que você está construindo e passe o dedo na tela. O que você toca é front end. Depois, clique num botão que salva alguma coisa e pergunte onde aquilo foi parar: essa resposta é o seu back end. Vale ver como isso aparece também em como usar opus clip. Quando você conseguir dizer as duas frases sobre o seu próprio projeto, já sabe o suficiente para pedir a próxima feature sem se perder, e o resto dos nomes você pega nos próximos erros.

No vibe coding a coisa costuma funcionar na tela antes de você saber nomear o que fez ela funcionar. Martin admitiu a confusão em voz alta, explicou do jeito que conseguia e mostrou o cadastro rodando, e a cena inteira vale mais do que uma definição decorada. Admitir a dúvida e mostrar mesmo assim é o comportamento que as leis do movimento pedem.

Para ver a explicação e a demonstração na sequência em que aconteceram, assista à live.