Esta dica faz parte da série que pretendo escrever sobre como entrevistar engenheiros de Javascript. Ao contrário dos engenheiros de software comuns, os engenheiros de Javascript devem estar familiarizados com os conceitos relacionados à pilha da web, o DOM, arquiteturas / bibliotecas / estruturas MVC, a própria linguagem e até mesmo as habilidades básicas do servidor. Essas perguntas têm como objetivo identificar os pontos fracos dos desenvolvedores que, embora tenham fortes habilidades de programação, ainda podem exigir alguma experiência na língua franca da web.
Codificando uma barra de navegação
A questão:
The most common way to display tabular data in HTML is through tables. However, sometimes these tables have too many rows to be browsed by the user, who wants to find a specific entry in the table. In such cases, the table is separated in different views known as "Pages", and a GUI is used in order to browse the Pages.
One interface used in order to provide a better experience to the user is the Navigation Bar (NB). The NB is usually a single horizontal row with multiple cells that work as buttons; although there are many implementations of NB's, most of them include buttons Numbers, that represent the Pages, the "Back" and "Forward" button, which moves to the next page depending on which one the user is browsing, as well as the "Fast Backward" and "Fast Forward", which take the user to the first or last page.
Your task is to code a Navigation Bar that looks similar to this:
< 1 2 3 4 5 6 7 >Onde:
- O primeiro botão leva o usuário à visualização da página anterior.
- O último botão leva o usuário para a visualização da próxima página.
- O restante dos botões leva o usuário à visualização dessa página de número.
- O primeiro botão também atualiza o número de páginas exibidas se a visualização atual for menor que a próxima página.
- O último botão também atualiza o número de páginas exibidas se a visualização atual for maior do que a página anterior.
Exemplos de teste
(“A” significa ativo, a página atual navegada e o botão atual selecionado)
Caso simples
< 1 2 3 4 5 6 7 >
_ A _ _ _ _ _ _ _O usuário clica em seguida
< 1 2 3 4 5 6 7 >
_ _ A _ _ _ _ _ _Caixa numérica
< 1 2 3 4 5 6 7 >
_ A _ _ _ _ _ _ _Cliques do usuário 6
< 1 2 3 4 5 6 7 >
_ _ _ _ _ _ A _ _Caso limite
< 1 2 3 4 5 6 7 >
_ _ _ _ _ _ _ A _O usuário clica em seguida
< 2 3 4 5 6 7 8 >
_ _ _ _ _ _ _ A _Cliques do usuário anterior
< 2 3 4 5 6 7 8 >
_ _ _ _ _ _ A _ _Cliques do usuário 2
< 2 3 4 5 6 7 8 >
_ A _ _ _ _ _ _ _Cliques do usuário anterior
< 1 2 3 4 5 6 7 >
_ A _ _ _ _ _ _ _O objetivo desta pergunta é testar o desenvolvedor nas seguintes habilidades:
- Conhecimento de manipulação de DOM e advertências do navegador.
- Habilidades para resolver problemas
- Desempenho do lado do cliente
- Estruturas de dados em Javascript
- Solicitações XML Http (AJAX)
- Design e construção de GUI
A partir daí, o desenvolvedor deve ser deixado sozinho para analisar o problema e ter cerca de 25 a 35 minutos para resolvê-lo. A lista a seguir são especificações possíveis para o problema que podem ser fornecidas ao entrevistado se ele fizer alguma pergunta; um bom entrevistador de programação fará todas as perguntas antes de começar a programar.
Especificações
Os dados da tabela podem ser recuperados de um servidor simulado por meio de uma solicitação GET. Em seguida, o desenvolvedor teria que solicitar as informações por meio de um XML Http Request. Um wrapper para executar essa solicitação pode ser usado por meio de bibliotecas como jQuery, Zepto, Sammy, etc. O uso adequado desses objetos de promessas, verificando o código de status e retornos de chamada de sucesso / erro adequados deve ser esperado, se necessário. Se o desenvolvedor gastar muito tempo tentando apresentar a Solicitação, é preferível fornecer a ele os dados como uma variável.
O aplicativo deve redesenhar as linhas da tabela. A menos que seja necessário testar a manipulação de javascript DOM nativo, o desenvolvedor deve receber bibliotecas para ajudá-lo a realizar essa tarefa, caso contrário, ele pode levar muito tempo. Espera-se que bibliotecas MVC como Backbone.js, Knockout.js, Ember.js e Angular.js sejam usadas para descrições de trabalho que requerem tal conhecimento, embora qualquer outra vinculação de dados ou biblioteca MVC também seja aceita; se o desenvolvedor não conhece nenhum deles, jQuery ou Zepto com sua documentação deve ser suficiente. Em uma nota lateral, um bom desenvolvedor de javascript deve estar ciente das funções de manipulação DOM nativas, mesmo se elas pertencerem às especificações de Javascript não suportadas pelo IE (por exemplo, querySelector). Isso ocorre da mesma forma com sistemas de modelagem como jQuery.tmpl, Mustache,
O código deve verificar quando o usuário pode executar ações específicas; por exemplo, não permitir que o usuário clique em uma página ativa ou vá para a primeira página se o usuário já estiver nessa página. O desenvolvedor deve estar ciente desses componentes de UX mesmo se ele / ela não os codificar (por exemplo, ele / ela só pode mencionar esses recursos, e que ele / ela os implementaria com mais tempo ou depois que os recursos principais forem concluídos )
O desenvolvedor pode mencionar sobre o fornecimento de parâmetros para a solicitação GET a fim de recuperar apenas as informações necessárias (parâmetros de pesquisa). Em alguns casos e dependendo dos dados, essa abordagem é melhor do que apenas enviar todos os dados pela rede. Neste caso, porém, o desenvolvedor deve receber todos os dados para mostrar o uso adequado das estruturas de dados e o desempenho do Javascript. Caso o desenvolvedor mencione isso, pode ser uma boa chance de perguntar sobre os benefícios e contras dessa abordagem; Os candidatos a empregos como Engenheiro de Software e DevOps devem fazer esta pergunta e saber a resposta.
A conexão do aplicativo através da observação (onHashChange) deve ser pesquisada em vez de adicionar ouvintes a cada um dos botões, mas ambas as abordagens são válidas.
location.hashO candidato não deve concentrar muito de seu tempo em estilo ou marcação. A marcação XHTML válida é boa, mas não deve ser um obstáculo.
Análise e percepções
Neste caso o problema traz múltiplas áreas relacionadas ao Desenvolvimento Web e não apenas ao Javascript. Da manipulação do DOM ao desempenho do Javascript, o requerente deve ser cauteloso com todas as armadilhas possíveis no desenvolvimento de uma solução. Espera-se que ele / ela separe o problema em diferentes componentes e os resolva um por um.
Esse problema tem muitas ressalvas que o desenvolvedor deve encontrar por si mesmo ANTES de começar a escrever o código. Embora algum código rápido seja esperado, a quantidade de tempo gasto pensando em resolver o problema pode ser maior do que codificar a solução. Um desenvolvedor que começa a codificar rapidamente sem explicar sua solução e, de repente, fica travado pode fornecer um sinalizador de aviso.
Uma solução ideal separará claramente o DOM da manipulação de Javascript sem levar muito tempo (até 40 minutos ainda seria suficiente). Um passo a passo adequado da solução deve ser fornecido o tempo todo pelo desenvolvedor que surge com a solução.
Soluções possíveis
Vou atualizar este post com soluções Backbone.js, Knockout.js e Angular.js nos próximos dias
Perguntas de Acompanhamento
I. Codifique um botão “Ir para primeiro” e “Ir para o último”. Que problemas você espera encontrar ao fazer esta tarefa?
II. Como você testaria este aplicativo? Da perspectiva do navegador, como você verificaria se a página visualizada é a correta?
III. Em termos de experiência do usuário, que problema esta interface representa? Como você melhoraria isso?
IV. Descreva alguns casos de teste (casos de uso, histórias, sintaxe BDD ou TDD deve ser adequada, mesmo a linguagem Gherkin simples é boa. O uso de Jasmine, Mocha, Chai, Sinon ou outras estruturas de teste podem ser apresentados aqui).
V. Em cada visualização, o usuário é mostrado um registro de entrada que possui várias colunas. Às vezes, as entradas têm muitas colunas para serem exibidas em uma única tela (em layouts móveis, por exemplo). Como você resolveria isso?
VI. Quais bibliotecas podem tornar essa tarefa mais fácil?
VII. Atualmente, você recebe todos os dados. Conforme o aplicativo cresce, os dados aumentam, tornando a solicitação inicial maior e lenta. Como você melhoraria o desempenho do aplicativo de uma perspectiva do Front-End?
VIII. Imagine que você está no modo de depuração. Você percebe que sempre que atualiza a página, o navegador leva algum tempo para redesenhar os elementos DOM. Como você encontraria a função que causa o problema?
IX. Você deseja registrar o histórico de navegação da página do usuário (da Barra de Navegação). Como você faria isso? Qual estrutura de dados você usaria e por quê?
X. O usuário solicita uma interface CRUD para a mesa. Como você implementaria isso? Que problemas podem surgir ao mudar de visualizações?
XI. O servidor atualiza as informações da tabela a cada X segundos para determinadas entradas. Como você atualizaria essas entradas? Quais elementos você usaria para notificar o usuário sobre as atualizações?
XII. Outros tipos de barra de navegação incluem um campo de entrada para permitir ao usuário inserir a página que deseja navegar. Quais são os benefícios desta solução em relação à proposta? Quais problemas?