Problemas algorítmicos no frontend. Exemplos Yandex e competição

Ontem, um novo Yandex.Blitz foi lançado - desta vez a competição será interessante para a interface dos desenvolvedores. Para os detentores do primeiro ao quinto lugar, ofereceremos você de acordo com um esquema simplificado: uma seção de entrevista em vez de quatro. Assim, Blitz continua sendo o caminho mais rápido para chegar ao Yandex.

As tarefas da competição estão novamente próximas às tarefas de produção - você precisará não apenas de habilidades de front-end, mas também de conhecimentos de algoritmos. Registre-se aqui para participar da rodada de qualificação.



O Blitz é um bom motivo para falar sobre o histórico de problemas algorítmicos que surgem no front-end industrial e como eles diferem dos da concorrência.

Sobre tarefas


As tarefas algoritmicamente saturadas no desenvolvimento de interfaces no Yandex sempre surgiram. Lembro-me de exemplos de 2005-2006. Uma dessas tarefas era um sistema de trabalho com eventos abstratos. Era necessário criar um kernel que permitisse anexar manipuladores (especificados por uma função) a eventos arbitrários (especificados por uma cadeia de caracteres), após o que dispararia um evento específico e removeria a ligação do manipulador. Uma complicação adicional foi que as três principais operações listadas deveriam ter sido realizadas o mais rápido possível. Sobre isso, há até uma seção em um dos relatórios antigos .

Outra tarefa interessante foi sobre a localização das miniaturas no Yandex.Picture search results. Era necessário alinhar o fluxo de objetos retangulares da mesma altura e larguras diferentes na borda direita. No caso geral, esse problema não tem solução, por isso foi permitido alterar o tamanho da imagem original (reduzir e cortar), mas para que a perda de informações não exceda algum limite razoável em porcentagem.

Também havia tarefas associadas ao desenvolvimento do mecanismo de modelo Yandex, conhecido pelas palavras-chave XJST e BEMTHML. A principal dificuldade era torná-lo rápido o suficiente, mantendo a expressividade semântica desejada. Detalhes sobre isso podem ser encontrados em vários relatórios: Aqui estão alguns dos primeiros relatórios com detalhes: events.yandex.ru/lib/talks/43 e events.yandex.ru/lib/talks/329 , existem muitos outros.

Todos os tipos de sistemas de processamento em tempo real, por exemplo, ao rolar e arrastar com o mouse, também são frequentemente forçados a refletir. Você precisa criar truques algorítmicos diferentes para fazer com que a interface - pelo menos subjetivamente para o usuário - pareça rápida se as ações reais forem executadas objetivamente por um longo tempo.

Por exemplo, em uma das primeiras versões do Yandex.Mail, foi possível arrastar quase todos os elementos principais: letras para pastas, rótulos nas letras, letras nos rótulos e até pastas nas letras. No processo, enquanto o usuário estava segurando o objeto "na mão" e o dirigia pela tela, era necessário destacar os elementos nos quais era possível "redefinir". A ingênua realização "na testa" diminuiu para a impossibilidade.

Diferenças entre tarefas reais e competitivas


As tarefas dentro do Yandex, como regra, são resolvidas no modo de equipe. O homem não é deixado à sua própria sorte, como em uma competição. Ele pode obter ajuda de colegas e deve combinar o caminho de sua decisão com os interesses de outros participantes no processo.

Pode ser que você tenha escrito uma versão rápida, mas a maioria de seus colegas considera o código excessivamente difícil para compreensão, desenvolvimento e suporte futuro. Nesses casos, é necessário buscar compromissos. Na maioria das vezes, a interação da equipe é projetada como uma adição seqüencial de algo a uma solução ou como um processo simultâneo de programação em pares. Quase nunca fazemos a mesma coisa em paralelo, para depois comparar e escolher o melhor.

Outra diferença importante é que o código real que escrevemos existe e continua a ser suportado por um longo tempo. Este não é um processo de “esquecer” e se apenas os testes forem aprovados. É importante lembrar que seu código pode continuar ativo - não apenas executado, mas também editado - por muitos anos após a gravação.

Sobre outros concursos de front-end


Você pode encontrar facilmente nos sites da Internet tarefas com puramente JavaScript. Esta é essencialmente a mesma programação esportiva, apenas em um idioma específico. Além disso, existe um formato "código no escuro", quando o layout é imposto sem exibir o resultado, às cegas, você vê apenas o código. Competições como a nossa não são particularmente difundidas, porque - devido às especificidades do desenvolvimento da interface - é muito difícil escolher boas tarefas e fazer uma verificação automática delas. A Yandex historicamente desenvolveu uma forte escola de testes automáticos do front-end, incluindo a comparação de capturas de tela de navegadores reais. Com base nesses desenvolvimentos, procuramos realizar verificações de tarefas na competição. Esse também é um experimento para nós, mas temos certeza de que vai dar certo e já estamos nos preparando para aprofundar o assunto.

Source: https://habr.com/ru/post/pt426587/


All Articles