DEV Community

Cover image for Entenda um código JS - que não tem readme ou testes e que não foi você que escreveu
Jessilyneh
Jessilyneh

Posted on • Updated on

Entenda um código JS - que não tem readme ou testes e que não foi você que escreveu

1 a 5 — Execução básica do projeto

1 - Verificar no package.json a versão de Node.js utilizada (essa informação fica lá no finalzinho do arquivo, em engines) e usar a mesma versão localmente antes de qualquer outra etapa (um nvm ajuda a alternar entre versões, facilmente)

2 - Instalar as dependências (npm install).

3 - Voltar ao package.json e verificar se existe em scripts uma instrução "build". Se sim, realizar esse processo (npm run build)

4 - Se o build der certo, veja se existe em scripts a instrução "start". Se sim, execute o comando.(npm start)

Em alguns casos, o build é só para gerar o bundle de produção, então, também é importante avaliar se tem um script "dev" no lugar do start**

5 - Se der certo, verifique a execução no terminal ou no no navegador. A informação de qual será a “porta" que a aplicação vai ser executada sempre está presente na saída das informações do terminal, que é "https://localhost:" e a porta, que pode ser 8080, 4200 ou outra.

Agora, começa a parte "difícil" haha

Continuando, meu exemplo é uma aplicação de front:

6 — Verifique configurações de ambiente

Se o build ou o start (ou ambos) não der certo, estude a estrutura de pastas do projeto para entender se existe mais algo que precisa ser executado localmente, como outro projeto. Também pode ser importante verificar arquivos como o .npmrc ou outros arquivos de ambiente.

7 — Mapeie classes, objetos e fluxos

Se a etapa de build e execução do projeto der certo, comece entendendo o que aparentemente a aplicação faz. Depois disso, com a ajuda do "inspetor de código" do seu navegador, comece a tentar se situar com os nomes dos componentes e onde eles estão, no código. Anote tudo isso, ou faça um mapa mental.

Caso fique difícil entender onde começa o fluxo da aplicação busque pelo atributo "main" do package.json que indica qual é o arquivo de entry point, ou seja, é onde está o primeiro código a ser executado.*

8 — Use o Debugger

Agora, se já ficou mais entendível quais os arquivos que guardam as classes ou as funções mais importantes, use a ferramenta de debugger do navegador ( eu sempre uso Developer Tools do Google Chrome) e entenda qual o fluxo de dados da aplicação:

  • o que é consumido
  • onde é usado
  • como é processado
  • qual a saída gerada

Anote tudo no seu mapa mental ou num documento de apoio. Voce precisa entender o que cada variável e funçao faz. Tente explicar pra si mesma enquanto le suas anotações. O mapa mental vai te ajudar a medir o impacto de mudanças, exclusões ou acréscimo de algo, no projeto.

9 - Documente

  • Como inicializar o projeto, no Readme.md
  • Se é necessário executar algum outro projeto, em paralelo
  • A versão de Node.js usada
  • Passe o fluxo desenhado e as anotações para a wiki do repositorio ou algum portal de documentação, do projeto
  • Tem algum conhecimento prévio que ajudaria a entender o funcionamento dos processos principais? Algo pouco comum de usar, como por exemplo, uso de Symbol? Se teve algum artigo ou documentação que te ajudou a entendem, inclua também.

10 - Melhorias

Depois de realizar toda análise e começar a trabalhar na adição ou remoção de código, veja se tem algo que pode refatorar, como por exemplo,nomes de variáveis ou melhoraria da legibilidade do código. Também verifique se algum processo é realizado sem necessidade, como requisições repetidas ou armazenamento de informações desnecessárias.

Por fim, dentro dos seus conhecimentos,verifique se existe alguma falha de segurança.Isso inclui verificar obfuscação de código,segurança das chamadas http e pacotes vulneráveis na aplicação (npm audit).
Também é interessante criar ao menos um teste de ponta a ponta, na operação principal.

Considerações finais

Esse processo foi escrito com base em uma experiência que eu tive, no trabalho. Claro, poderia desdobrar muito mais em cada etapa, além do mais, tem o fator muito importante de entender qual o problema que a aplicação resolve. Mas mesmo sabendo que é um escopo geral, o que falei, acho que pode ser util :)

Uma coisa ate mais importante que o texto todo: não se preocupe, isso pode levar tempo. Ás vezes, dias. E não é tempo perdido e voce nao é incompetente por precisar fazer esse processo. Essa foi a coisa mais importante que eu aprendi com o meu mentor aqui da F1rst essa semana: realizar esse processo não é falta de conhecimento, é parte do trabalho.

** Dica do Luciano Lima, pelo twitter

Top comments (4)

Collapse
 
deesouza profile image
Diego Souza • Edited

Boa ideia de artigo! Quando um desenvolvedor que está começando se depara com um projeto de qualquer tamanho, geralmente é essa sequência que ele irá seguir para entender como o produto funciona.

Pena que não tinha esse artigo na minha época! kkkkkkkk
Parabéns!

Collapse
 
jessilyneh profile image
Jessilyneh

Muito obrigada , mesmo! 😊 Na minha época tambem nao tinha hahaha ate por isso pensei em escrever.

Collapse
 
georgehvm profile image
George Henrique

parabéns pelo excelente artigo!

Collapse
 
jessilyneh profile image
Jessilyneh

muito obrigada, feliz por isso! É um processo que me ajudou bastante :)