Perguntas de Codificação de Interface de Usuário para Entrevistas de Front-End - Como se Preparar
Guia para se Preparar para Perguntas de Interface de Usuário em Entrevistas para Desenvolvedores Front-End/Web - Conceitos a Conhecer, Critérios de Entrevista e Perguntas de Prática Importantes.
Entrevistas de codificação de interface de usuário envolverão os candidatos escrevendo HTML, CSS e JavaScript para completar tarefas. Em nossa opinião, isso é essencial para avaliar as habilidades de Engenheiros Front-End e mais empresas estão adotando a abordagem de solicitar que os candidatos codifiquem interfaces de usuário durante as entrevistas.
As interfaces de usuário que os candidatos são solicitados a codificar podem variar desde componentes de UI muito pequenos até produtos mais complexos voltados para o cliente, como aplicativos e jogos simples.
O tempo permitido para perguntas sobre aplicativos/jogos geralmente é maior do que para componentes/widgets. Dependendo da complexidade da pergunta, você pode gastar até meia hora ou até mesmo uma hora para completar a pergunta, especialmente se for solicitado a construir jogos.
Observe que a maioria dos jogos será baseada em uma grade 2D. Certifique-se de saber como criar layouts de grade em HTML e CSS!
Entrevistas de codificação de interface de usuário compartilham algumas semelhanças com entrevistas de codificação não relacionadas à interface de usuário. Em geral, você deve:
- Descobrir em qual plataforma você está codificando e se familiarizar com o ambiente de codificação:
- Se você estará usando um ambiente de desenvolvimento integrado (IDE) local ou online. Se a IDE for local, você usará seu próprio laptop?
- Atalhos do editor suportados.
- "Se você pode usar bibliotecas/frameworks JavaScript ou precisa usar JavaScript puro.".
- Se você pode executar código e visualizar a UI.
- Quais são as sintaxes e recursos de linguagem JavaScript mais recentemente suportados?
- Se você pode instalar dependências antecipadamente.
- Faça sua própria apresentação em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
- Fazer perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
- Você pode usar a sintaxe mais recente do JavaScript?
- Suporte do navegador, pois isso afetará as APIs do navegador que você pode usar.
- Divida o problema em etapas/marcos que se construam uma sobre a outra. Comunique essa divisão ao seu entrevistador. Ao contrário das entrevistas de codificação tradicionais, o foco das entrevistas de codificação de Interface do Usuário geralmente está nos estados dos componentes e nas APIs, em vez de estruturas de dados complexas e algoritmos.
- Crie sua solução em código e explique seu código ao seu entrevistador enquanto estiver codificando.
- Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
- Consulte a Folha de Dicas de Perguntas de Interface do Usuário para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
- Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
- Faça um esboço de alguns casos de teste básicos e alguns casos limite. Teste seu código com esses casos e determine se seu código os aprova. Se ele falhar, depure o(s) problema(s) e corrija-os.
- Explique qualquer compromisso que você tenha feito, casos que você explicitamente não tratou e como você melhoraria o código se tivesse mais tempo.
- A entrevista pode não terminar aqui; o entrevistador pode ter perguntas de acompanhamento para você sobre esta pergunta ou apresentar outra pergunta. Esteja preparado para continuar a discussão ou abordar novos desafios. Esteja preparado para eles.
- Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de Quiz também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
- É melhor aprender a construir interfaces de usuário tanto em JavaScript puro quanto em um framework de UI de sua escolha. A maioria das empresas permitirá o uso de frameworks de UI JavaScript, mas algumas empresas (por exemplo, o Google) podem exigir que você use apenas JavaScript puro.
- JavaScript Puro: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com jQuery, dê uma olhada em You might not need jQuery, um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
- Framework de Interface do Usuário em JavaScript: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, React será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
- Esteja familiarizado com a escrita de CSS em condições de entrevista (pequenas perguntas que não exigirão escrever muito CSS):
- Escreva Vanilla CSS: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
- Adote uma convenção de nomenclatura CSS: Considere adotar uma metodologia de nomenclatura CSS como Block Element Modifier ao escrever suas classes.
- Leia nossos guias detalhados de codificação de Interface do Usuário:
- Escolha um plano de estudo e pratique as perguntas de codificação de Interface do Usuário recomendadas para o plano de estudo selecionado.
- Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
| Categoria | Tópicos Importantes |
|---|
| Estruturas de Dados | Vetores, Mapas, Pilhas, Árvores, Conjuntos |
| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller |
| HTML | HTML Semântico, Validação de Formulário, Envio de Formulário |
| CSS | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
| JavaScript | Closures, Callbacks, Promise, async/await, manipulando argumentos variádicos |
| DOM | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos |
| APIs de runtime | Temporizador (setTimeout, setInterval), Rede (Ajax, fetch) |
| Acessibilidade | Papéis, estados e propriedades ARIA, Interações de Teclado |
As entrevistas de codificação de interface do usuário têm rubricas semelhantes às entrevistas de codificação em JavaScript, pois ambas envolvem codificação no domínio de front-end. No entanto, as perguntas de codificação de interface do usuário terão ainda mais ênfase na expertise no domínio e nos vários tópicos de front-end.
- Resolução de Problemas: Use uma abordagem sistemática e lógica para compreender e abordar um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (trade-offs).
- Fundamentos de Engenharia de Software: Familiaridade com estruturas de dados, algoritmos, análise de complexidade em tempo de execução, uso de padrões de design, projetar soluções com abstrações limpas.
- Expertise no Domínio: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs do DOM), HTML, CSS, JavaScript, Experiência do Usuário, Acessibilidade, i18n (internacionalização), Redes, Desempenho.
- Comunicação: Fazer perguntas para esclarecer detalhes e explicar claramente sua abordagem e considerações.
- Verificação: Identificar vários cenários para testar o código, incluindo casos de borda. Ser capaz de diagnosticar e corrigir quaisquer problemas que surjam.
Com base na experiência, as melhores perguntas de entrevista de interface do usuário para praticar, determinadas pela frequência e pelos conceitos importantes abordados são:
"GreatFrontEnd possui uma lista abrangente de perguntas de codificação de Interface de Usuário que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e React).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
Muitas das perguntas de codificação do GreatFrontEnd também são divididas em estágios, que ficam progressivamente mais difíceis. Nas entrevistas, seu entrevistador pode solicitar explicitamente apenas a funcionalidade básica. No entanto, após concluir a funcionalidade básica, você pode tomar a iniciativa de adicionar mais recursos para aprimorar a versão básica e lidar com mais casos especiais. Um exemplo de uma pergunta dividida em estágios:
- Accordion: Construa um acordeão básico que se concentre na renderização e funcionalidade de mostrar/ocultar.
- Accordion II: Construa um acordeão com melhor acessibilidade, que tenha os papéis (roles) ARIA corretos, estados e propriedades adequados.
- Accordion III: Construa um acordeão totalmente acessível que tenha suporte ao teclado de acordo com as especificações do ARIA.
Construir o componente de acordeão básico pode ajudá-lo a passar na entrevista, mas abordar os aspectos de acessibilidade com sucesso o ajudará a ganhar mais pontos e possivelmente avançar para o nível sênior.
Observe que, de propósito, deixamos algumas das perguntas vagas e não apresentamos todos os requisitos completos de imediato na descrição da pergunta. No entanto, cobriremos o máximo de informações possível na solução. Pode ser frustrante perceber que você deixou passar algumas coisas ao ler as soluções, mas isso o treina a pensar adiante e considerar quais são as possíveis áreas que você deve observar ao trabalhar na solução. É melhor descobrir isso durante a prática do que durante entrevistas reais.