Perguntas de Codificação para Entrevistas de Front End — Como se Preparar

Entrevistas de codificação são a principal forma pela qual Engenheiros Front End são avaliados e podem abranger várias rodadas e estágios das entrevistas, portanto, é extremamente importante praticar para entrevistas de codificação. Para recapitular, aqui estão os três tipos de perguntas de codificação que você pode ser questionado:

• Codificação Algorítmica: Resolva questões algorítmicas complexas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade temporal.
• Codificação em JavaScript: Implemente funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end.
• Codificação de Interface de Usuário: Construa interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks de JavaScript.

Ambiente de Codificação​

Você pode ser solicitado a completar uma pergunta codificando usando um ou mais dos seguintes ambientes:

Editor de Código Básico Online​

Você receberá uma URL de um editor de código no navegador. O editor pode ter recursos de colaboração em tempo real ou você pode ser solicitado a compartilhar sua tela. Esses editores de código básicos geralmente têm apenas um painel, porque a pergunta não requer o uso de mais de uma linguagem para ser concluída, por exemplo, perguntas de codificação algorítmica ou em JavaScript. Você pode ou não ter permissão para executar seu código. Um exemplo de editor de código básico online é o CoderPad.

Ambientes de Desenvolvimento Integrado (IDE)​

A diferença entre um editor de código básico e um IDE é que os IDEs permitem alternar entre vários arquivos. Eles podem ser tanto no navegador quanto aplicativos nativos em seu laptop. Normalmente, você será solicitado a usar IDEs quando precisar construir interfaces de usuário e utilizar vários arquivos ou escrever em mais de uma linguagem. Este é o melhor ambiente disponível, pois se assemelha de perto à forma como a maioria dos engenheiros desenvolve. Sujeito à aprovação do entrevistador, você deve ser capaz de:

• Visualizar a interface do usuário em andamento e ver as atualizações ao vivo.
• Usar o console do navegador para depuração.
• Usar recursos de IDE como realce de sintaxe, atalhos de teclado, autocompletar, intellisense e extensões para aumentar sua produtividade.
• Adicionar quaisquer dependências de terceiros necessárias.

Sempre escolha usar um IDE se for dada a opção.

Exemplos de IDEs online incluem JSFiddle, CodePen, CodeSandbox, e StackBlitz.

Quadro Branco​

Em certas empresas, você pode ser solicitado a escrever todo o código necessário no quadro branco. Imagine escrever HTML e CSS no quadro sem poder visualizá-lo! Isso pode ser um pesadelo para os candidatos, e grandes empresas de tecnologia como o Google e o Meta/Facebook são conhecidas por fazer isso durante entrevistas presenciais. A maioria das outras empresas geralmente pede que você traga seu próprio laptop e codifique em seu IDE local ou em um editor de código/IDE online em um navegador da web.

Aqui está um resumo dos diversos ambientes de codificação e o que você pode fazer em cada um deles:

Dicas Gerais de Codificação​

• Esteja familiarizado com os atalhos de teclado úteis do editor, pois o tempo é essencial durante entrevistas e cada tecla pressionada conta. Saiba como:
  • Ir para o início/fim da linha.
  • Mover linhas para cima/baixo.
  • Duplicar uma linha.
  • Renomear um símbolo facilmente.
• Descubra antecipadamente se você estará codificando em seu próprio laptop, em um laptop fornecido a você ou no quadro branco.
  • Se você estiver codificando em seu próprio laptop e puder usar seu próprio IDE, certifique-se de que o IDE esteja funcionando corretamente, que o Node.js e o npm estejam instalados corretamente e que você possa executar servidores web locais em localhost e acessá-los no seu navegador.
• Não dependa demais da pré-visualização e execução do código. Isso sugere ao seu entrevistador que você não tem certeza do que digitou e desenvolve por tentativa e erro, o que não é um sinal positivo.

Dicas Específicas por Tipo​

Continue lendo para obter dicas para cada tipo de entrevista de codificação:

• Codificação Algoritmica
• Codificação JavaScript
• Codificação de Interface do Usuário

Perguntas de Prática​

GreatFrontEnd possui uma longa lista de perguntas de codificação que você pode praticar, e definitivamente deve reservar um tempo para conferi-las.

Observe que, de propósito, deixamos algumas das perguntas vagas e não apresentamos todos os requisitos completos na pergunta. Isso é para treiná-lo a pensar adiante e considerar quais possíveis coisas você deve observar ao trabalhar na solução.

No entanto, vamos cobrir o máximo possível na solução. Pode ser frustrante perceber ao ler as soluções que você deixou passar algumas coisas, mas é uma experiência de aprendizado com o objetivo final de ajudá-lo a melhorar. É melhor aprender durante a preparação do que durante as entrevistas reais.