[Entrevista Javascript] Codificando um relógio

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 um relógio

A questão:

Create a "Clock" class that displays hours, minutes and seconds in the form H:M:S using Javascript and HTML. It's behavior should be the one of a functional clock, starting in 00:00:00, then 00:00:01, 00:00:02 and so on.

O objetivo desta pergunta é testar o desenvolvedor nas seguintes habilidades:

• Conhecimento de manipulação de DOM e advertências do navegador.
• Fechamentos e escopo de contexto
• Timeouts
• Habilidades para resolver problemas
• Desempenho do lado do cliente

A partir daí, o desenvolvedor deve ser deixado sozinho para analisar o problema e ter de 15 a 25 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 cliente potencial de programação fará todas as perguntas antes de começar a programar.

Especificações

• O “display” do relógio deve ser reescrito toda vez que o segundo muda. Uma solução que produz

  00:00:00
  00:00:01
  00:00:02
  ...

sem pintar novamente a tela demonstra habilidades de resolução de problemas, mas nenhum conhecimento do DOM ou incompreensão da questão. O desenvolvedor não deve presumir que isso é esperado (especialmente porque este formato é comum em concursos de programação como TopCoder ou o ACM ICPC onde casos de uso são fornecidos e a saída é mostrada na forma de várias linhas com as respostas), então pergunte isso seria uma boa ideia para estar seguro.

• O formato não é realmente importante, portanto, exibir a hora no formato H: M: S ou HH: MM: SS não deve fazer muita diferença. Um desenvolvedor que foca muito tempo na formatação quer evitar o problema real, provavelmente está nervoso ou suas ideias estão se desmanchando. Deve ser dito que o formato é bom de se ter depois que ele / ela resolveu o problema, e poderia mostrar habilidades como usar a forma de String dos números para obter o comprimento deles.

  (59).toString().length // returns 2 (we could show a function format(num) using this and ask why it works)

• Não se espera ver um estilo ou uma marcação HTML perfeita. Se ele quiser usar <p>para cada elemento ou para a tela inteira, não há problema. Novamente, a formatação e o estilo devem ser levados em consideração após terminar o problema.

• Embora as soluções possam renderizar a exibição inteira por meio de uma função toString (), as soluções que separam as horas, minutos e segundos como elementos diferentes do relógio são preferidas para mostrar os conceitos OOP. Nenhuma solução deve ser preferida em relação à outra, desde que o desenvolvedor esteja ciente das diferenças e possa citar alguns benefícios sobre sua solução.

• Não é necessário que o desenvolvedor conheça toda a sintaxe de setTimeout, setIntervalou clearInterval. Os protótipos de ambas as funções podem ser dados como uma dica se o desenvolvedor se deparar com o estágio de “animação”. No entanto, ele / ela deve ser capaz de usar um encerramento para configurar um contexto adequado para chamar a função recursiva, seja adiando o tempo limite ou salvando-o em uma variável.

• O uso de bibliotecas é permitido, desde que seja para manipulação de DOM. O tempo limite deve ser especificado com Vanilla JS para mostrar a compreensão desse recurso.

• Desempenho superior não é necessário para este exercício, mas pedir para explicar como seu código afeta a aplicação é fundamental, especialmente se ele ou ela usa uma biblioteca para manipulação de DOM. A complexidade dessas questões pode ir desde por que escolher um ID para um elemento HTML em vez de uma classe até explicar por que o Javascript timeoutsfunciona.

Análise e percepções

O problema tenta forçar o desenvolvedor a encontrar uma solução usando suas habilidades e conhecimentos de Javascript em tópicos básicos de Ciência da Computação. Embora existam muitas maneiras de definir os minutos e as horas, há uma chance de que durante a entrevista a pressão possa atrapalhar o desenvolvedor, portanto, dar dicas sobre os cálculos matemáticos não deve diminuir tanto.

A clareza do código e a velocidade de implementação são bons indicadores de que o desenvolvedor sabe o que está fazendo. Um código ideal pode demorar um pouco mais do que o tempo esperado (talvez até 30 minutos), mas mostra claramente a separação da lógica, o isolamento de componentes e variáveis ​​e o uso adequado de encerramentos.

Soluções possíveis

Solução de puro javascript

Solução de vinculação de dados com KnockoutJS

Solução de relógio analógico com KnockoutJS e RaphaelJS

Perguntas de acompanhamento

1. Codifique um botão “Pausar” e “Continuar”. Que problemas podem acontecer se você retomar um relógio sem pausa? (Depende da implementação)
2. Como você testaria este aplicativo?
3. 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).
4. Imagine que você está no modo de depuração. A hora do código de um colega de trabalho exibe “1”, após 60 minutos “11” e após outros 60 minutos, “111”. Resumindo, a quantidade de horas é indicada pelo número “1”. Qual é provavelmente o erro?
5. Que bibliotecas poderiam ajudá-lo a resolver esse problema?
6. Uma solução soma os segundos em uma variável e depois divide em minutos e horas. Quais são alguns problemas desta solução?
7. Existe uma maneira de codificar um relógio sem usar setTimeoutou setInterval?
8. Vários cálculos podem tornar o aplicativo lento. Existe alguma maneira de armazenar em cache alguma parte dos cálculos?
9. Como você codificaria um relógio analógico? Que tipo de problemas você encontraria?
10. Você está enviando as informações do relógio para um servidor a cada X vez. Que problemas devemos considerar ao enviar essas informações?