Executando verificação de segurança...
15

Vou exclusivamente programar o TabNews usando VSCode na Nuvem (GitHub Codespaces)

Me coloquei um desafio de apenas utilizar o GitHub Codespaces para programar o TabNews. Para quem não conhece, o Codespaces é um espaço na nuvem para você programar utilizando Visual Studio Code e que por enquanto é gratuito para contas individuais. Inclusive, o próprio GitHub está sendo programado dentro do Codespaces.

Será que roda o TabNews por completo?

Minha primeira pergunta foi entender se o Codespaces conseguiria rodar o TabNews por completo em ambiente desenvolvimento, isso significa subir tanto o core da aplicação, quanto os serviços em Docker para Postgres e MailCatcher (que simula o recebimento real de emails por SMTP).

Mas tinha que atender a uma característica importante: precisa ser um processo simples e transparente... e turma, o resultado me surpreendeu, olha que massa!

O GIF abaixo mostra em tempo-real quanto demorou para criar um ambiente de desenvolvimento do zero a partir da branch main do repositório do TabNews:

Inicializando o Codespaces a partir do repositório

⚠️ O repositório Open Source do TabNews ainda está em Modo Privado. Caso queira receber um convite para participar, leia esta publicação.

Setup inicial automático

Automaticamente após criar o ambiente, o Codespaces identificou que o repositório possui dependências de um projeto em Node.js e automaticamente começou a instalar elas:

Codespaces instalando automaticamente as dependências em Node.js

O teste final, roda mesmo e de forma simples?

E agora veio o teste final que era, sem configurar nada, será que o ambiente consegue rodar todos os testes de integração com sucesso se eu simplesmente rodar o comando npm test? Em resumo, esse comando no repositório do TabNews irá fazer o seguinte:

  1. Matar a porta 3000 para evitar conflito de portas.
  2. Subir o Docker do Postgres.
  3. Subir o Docker do Mailcatcher.
  4. Subir a aplicação em Next.js.
  5. Rodar todos os 322 testes de integração pelo Jest (que usa para valer todos os serviços).
  6. Derrubar todos os serviços.

Segue abaixo o resultado de rodar npm test pela primeira vez, onde esse GIF também está em tempo-real, tanto que fiquei mexendo o mouse principalmente nas partes que não tinha nenhuma atualização de tela:

Rodando testes de integração

Conclusão

Por enquanto gostei e quero agora implementar de fora a fora uma nova feature que mexa ao mesmo tempo no Banco de Dados, no Backend e no Frontend e irei trazer aqui os resultados 🤝

Carregando publicação patrocinada...
5

Que sensacional! Filipe, você chegou a perceber alguma lentidão por causa da rede, em comparação à experiência em desenvolvimento local? E sobre o uso de dados, sabe dizer se esse processo consomiu mais ou menos do que consumiria localmente?

Não sei como é no processo de desenvolvimento, porém acredito que há uma economia de uso de dados no download de dependências, já que você não está baixando nada, mas sim a máquina remota.

3

você chegou a perceber alguma lentidão por causa da rede, em comparação à experiência em desenvolvimento local?

Nada que atrapalhou por enquanto, mas há uma diferença sim na taxa de atualização das coisas.

E sobre o uso de dados, sabe dizer se esse processo consomiu mais ou menos do que consumiria localmente?

Não consegui avaliar, mas é uma excelente pergunta! Por um lado, você está rodando as coisas no browser (que talvez não mude muito, dado que o VSCode local é praticamente a mesma coisa), mas por outro lado você não está rodando nada a mais, por exemplo, os containers Docker... isso fica lá na nuvem.

Não sei como é no processo de desenvolvimento, porém acredito que há uma economia de uso de dados no download de dependências, já que você não está baixando nada, mas sim a máquina remota.

Correto! Só vem a "casca" do que aconteceu para você 🤝

4
3
3
3

otima iniciativa!! alguma razão especial para usar o Mailcatcher? Testes automatizados ou algo do tipo? Tem o mailtrap.io que funciona super bem para receber emails

2

Ótima pergunta!

E sim, o motivo são testes automatizados (de integração). Nós testamos o que vem no email no momento que o usuário cria uma conta.

Sobre o mailtrap.io, me parece uma solução muito bonita (diferente do Mailtrap que é layout de 1999)! Só que não sei se entendi direito, mas pelo que procurei aqui o mailtrap.io não disponibiliza um container para você rodar em localhost, correto? Ele é um SaaS e é preciso sempre bater num serviço externo, correto?

2
2

Rapaz, fazer uma pergunta boba. Certamente esse projeto tem secrets. Vocês guardam no banco mesmo ? ou em algum .env ?

Porque estou fazendo essa pergunta, porque não conhecia esse github codespaces e fiquei curioso de como ele lida com essa questões de chaves segredo. Subindo no repo eu imagino que não seja, rsrsrs.

2

As variáveis para ambiente de testes e desenvolvimento estão no arquivo .env que está sim no repositório, mas isso não é nenhum problema, pois nesses ambientes tudo vai rodar na mesma máquina, seja física ou virtual (Codespaces, Gitpod etc.).

Já os ambientes de produção e de homologação tem variáveis realmente secretas que são inseridas diretamente na Vercel, seja pela CLI ou pelo painel deles.

2

O melhor de tudo isso que eu acredito é, agora em diante com a popularização dessa feature desenvolvedores iniciantes ou pessoas que estão migrando para a área não precisaram investir par acomeçar a programar/aprender. Isso é fascinante. Tomara que não vire um serviço igual ao github copilot.

Ótimo post, como sempre!

2
1
1

Excelente pergunta! No passado eu usei muito o Gitpod, tanto que fiz vídeo no canal e todo o projeto, repositório e playlist do Jogo Multiplayer foi construído em cima dele.

Mas teve um evento que me marcou muito no passado que foi indisponibilidade do serviço e foi por dias. Demorou para voltar, porque não tinha ninguém disponível para consertar o cluster de Kubernetes que eles tinham na época.

Com certeza hoje a empresa cresceu e deve estar tudo mais estável... mas como já testei o Gitpod no passado, vou dar a chance agora para testar o Codespaces 🤝