Como Contratar Desenvolvedores Angular: Principais Habilidades e Conhecimentos a Procurar

Com sua arquitetura altamente escalável, muitas equipes de desenvolvimento web escolhem o Angular para criar aplicativos de página única eficientes e sofisticados. Mas, contratar desenvolvedores Angular é mais fácil falar do que fazer. Embora existam muitos candidatos por aí, a chave para uma experiência de desenvolvimento perfeita é encontrar um ótimo desenvolvedor Angular, que aplique as melhores práticas e técnicas avançadas para atender aos padrões de codificação de alta qualidade.

Compreender os principais conceitos sobre a popular estrutura de front-end do Google irá prepará-lo para entrevistar clientes em potencial com confiança e contratar os desenvolvedores de mais alto calibre, aqueles que se esforçam para levar uma base de código para o próximo nível. Este artigo apresenta as habilidades e conhecimentos cruciais que um profissional Angular premium deve ter.

Observação: este guia se aplica às versões mais recentes do Angular, que não são mais conhecidas como AngularJS—“Angular” é aplicado desde o Angular 2. Se você estiver contratando para a manutenção ou atualização de um projeto de aplicativo da Web AngularJS legado (o branch), confira Como contratar um ótimo desenvolvedor AngularJS.

Conheça as principais funções do Angular

A estrutura Angular é executada em TypeScript e todo o código escrito dentro de um aplicativo é transpilado para JavaScript. TypeScript é um superconjunto de JavaScript que compila para JavaScript simples. O código angular é representado por este superconjunto.

Muitos desenvolvedores aprendem Angular, mas não têm uma boa compreensão dos principais conceitos exigidos por JavaScript, TypeScript, HTML ou CSS. Se esses fundamentos estiverem ausentes, os desenvolvedores podem usar soluções alternativas inadequadas e, assim, multiplicar a dívida técnica de um projeto.

Então, pergunte ao candidato se ele tem conhecimento de HTML5 e CSS3. Um bom desenvolvedor Angular não precisa ser um especialista em HTML ou CSS, desde que outra pessoa da equipe seja, mas deve entender estes conceitos-chave:

• Flexbox
• Variáveis ​​SCSS
• A diferença entre um span e uma div
• As classes importantes em CSS
• Atributos

Os desenvolvedores angulares devem ter uma compreensão robusta de JavaScript e TypeScript, bem como algumas habilidades de HTML e CSS.

Tweet

Projetar antes da codificação

Um bom design é a chave para uma boa arquitetura de aplicativos. Pergunte ao seu candidato como eles fazem seus projetos e compare seu pensamento com estas considerações ideais:

• Para onde vai o código? Há necessidade de uma nova biblioteca ou um módulo?
• Quais são as entradas e saídas?
• Deve haver algum componente ou diretiva reutilizável?
• Para onde vai o estado? (Discutido mais adiante sob Gestão do Estado abaixo.)
• Para onde irá a lógica de negócios, ou seja, em qual serviço?
• Certos componentes podem ser compartilhados entre bibliotecas para criar, essencialmente, um sistema de design de interface do usuário?

As especificidades completas de um projeto em particular são menos importantes do que se o candidato tem o hábito de fazer projetos. Todos os projetos são temporários, portanto, para a maioria das aplicações, a documentação pode ser tão simples quanto uma foto de um esboço em um quadro branco, a menos que seja necessária uma documentação formal. Em um estágio posterior, o desenvolvedor pode gerar o projeto técnico a partir do código (com as ferramentas certas) para deixar claro como todas as partes se relacionam.

Entendendo os ciclos de vida de aplicativos angulares

Pergunte ao seu candidato o que ele sabe sobre o ciclo de vida do componente Angular . Sua resposta deve incluir três ganchos de ciclo de vida: ngOnInit , ngOnChanges e ngOnDestroy . Como os nomes sugerem, ngOnInit é chamado na inicialização do componente, ngOnDestroy é chamado quando o componente é destruído e ngOnChanges é chamado quando um atributo é alterado. O último pode ocorrer antes ngOnInit — quando o atributo já está atribuído antes que o componente seja completamente inicializado, então ngOnChanges é executado antes ngOnInit .

Se o candidato também souber sobre ngDoCheck , ngAfterContentInit , ngAfterContentChecked , ngAfterViewInit e ngAfterViewChecked , ele conhecerá todos os ganchos de detecção de alterações para componentes e estará um passo à frente.

Uma boa pergunta de acompanhamento a ser feita sobre qualquer um dos ganchos: “Quando essa detecção de alteração acontece?”

Um ciclo de vida menos conhecido é o ciclo de vida do provedor , que tem apenas um gancho: ngOnDestroy . Isso é chamado apenas quando o provedor é anexado no nível do componente, nesse caso ele é destruído junto com o componente. Se for fornecido na raiz ou no nível do módulo, nunca será destruído.

O construtor de um provedor será executado na primeira vez que o provedor for usado, portanto, é possível que o construtor nunca seja executado. Questione seu candidato sobre essa possibilidade - em cenários do mundo real, pode ser uma fonte de bugs muitas vezes negligenciada!

Sólidos conhecimentos de programação reativa

Em um aplicativo Angular, a programação reativa geralmente é a parte mais difícil de entender. Muitas pessoas pensam de forma procedural quando começam a programar um pedaço de código, assumindo que é mais fácil de entender e trabalhar, como os passos de uma receita.

A programação reativa envolve reagir a coisas que não podemos controlar, e isso pode ocorrer em uma ordem imprevisível. Embora reajamos às coisas dessa maneira todos os dias – por exemplo, freando quando o carro à nossa frente para de repente – muitos desenvolvedores acham difícil adotar uma abordagem reativa à programação.

Mas, tudo o que acontece dentro de um aplicativo Angular é baseado em programação reativa. Alguns exemplos de reatividade em um aplicativo de compras Angular, por exemplo, podem incluir:

• Quando o usuário faz login, o número no ícone do carrinho de compras é atualizado e os itens do menu mudam para opções mais específicas.
• Quando o usuário navega para uma categoria, os produtos são atualizados dependendo da categoria selecionada.
• Quando o usuário adiciona um produto ao carrinho, o ícone do carrinho de compras é atualizado com o número de produtos.
• Quando um item está fora de estoque (registrado por meio de um ouvinte que monitora as quantidades de estoque atuais do back-end), a interface do usuário da página é atualizada.

Observe que essas coisas acontecem automaticamente e não precisam de uma atualização de página para aparecer. Em uma entrevista, peça ao candidato que descreva como aplicou a programação reativa em um aplicativo que desenvolveu. Se o candidato descreve soluções que envolvem atualizar a página ou chamar manualmente ChangeDetectorRef.detectChanges() para atualizar um componente, considere isso um sinalizador amarelo.

Armadilhas com observáveis ​​em Angular

Desenvolvedores menos experientes podem às vezes descobrir que o código que eles escrevem em seus aplicativos Angular não é executado. Desenvolvedores experientes do Angular podem identificar uma causa comum: não há assinatura em um Observable , um tipo de objeto principal na programação reativa. Somente com uma assinatura serão executadas chamadas de back-end ou outras reações.

Há duas maneiras de criar assinaturas: Os desenvolvedores podem usar o pipe async ou o método de subscribe . Mas há uma ressalva: se os desenvolvedores fizerem uma assinatura manual (com o método subscribe ), o Observable precisará ser destruído manualmente (embora haja alguns casos extremos em que isso aconteça por padrão). Os desenvolvedores podem destruir Observables de várias maneiras:

• Usando o pipe async , sempre que possível (isso destrói o Observable quando o componente não é mais necessário).
• Cancele a assinatura manualmente usando o método unsubscribe em um Observable no final da vida útil do componente ( ngOnDestroy ).
• De uma forma mais declarativa com o operador takeUntil dentro do operador pipe , e usando um assunto (ou seja, algo chamado destroy$ ). Neste caso, o assunto emite destroy$.next() no final do tempo de vida do componente ( ngOnDestroy ). Após receber o evento destroy, o operador takeUntil não aceitará mais eventos do Observable ao qual está vinculado, de modo que sua lógica de assinante não seja mais acionada. Para obter um exemplo, consulte o operador takeUntil na seção 2. Funcionalidade semelhante pode ser exposta com os operadores take e takeWhile .
• Como os aplicativos Angular mudaram para o compilador Ivy, também podemos usar anotações. A biblioteca until-destroy ou outra biblioteca de terceiros, como SubSink, pode ser usada para cancelar a assinatura de observáveis ​​sem problemas quando um componente for destruído.

Outro ponto de dor potencial com programação reativa vem de vazamentos de memória e várias chamadas para o back-end. Pergunte ao candidato se ele está ciente desses problemas e como normalmente os resolveria. Vazamentos de memória podem ocorrer ao não cancelar a assinatura de Observable conforme descrito acima. Várias chamadas para o back-end devido a várias assinaturas em uma chamada de back-end podem ser resolvidas compartilhando o Observable .

Conheça o estado e como usá-lo

Todos os aplicativos de página única têm um estado, e esse estado está disponível em algum lugar no front-end. Mas o que é um estado, exatamente? Ele contém todas as variáveis ​​específicas da experiência do usuário atual. Por exemplo, detalhes do usuário autenticado, como nome e URL da imagem do perfil, um item de menu específico selecionado ou uma lista na tela, como uma lista de itens do carrinho de compras.

Em um aplicativo Angular, existem três tipos principais de estado de front-end a serem considerados:

Uma boa compreensão do que é o estado e quando deve ser carregado ou recarregado é uma das principais habilidades a serem procuradas ao contratar desenvolvedores Angular. Este é o território principal a ser explorado se sua equipe tiver a oportunidade de revisar algum código de exemplo escrito pelo candidato. Se o requerente estiver usando uma biblioteca para gestão estadual:

• Procure o uso de NgRx, Akita, NgXs ou bibliotecas específicas de gerenciamento de estado semelhantes.
• Em seguida, verifique se há notificações para effects , action , reducer , store e selector no código relacionado.

Vejamos o fluxo geral do estado do aplicativo no NgRx (que é semelhante ao do Akita e de outras bibliotecas) como exemplo:

Se o desenvolvedor cria seu próprio estado com serviços, sua competência no gerenciamento de estado pode ser mais difícil de identificar:

• Procure referências às palavras state ou effect .
• Veja se o código está reagindo a alguma ação, por exemplo, se o usuário pressionar o Botão A, o texto deve mudar na Tela B.

Perguntas para os entrevistadores fazerem sobre o estado

Você nem sempre pode descobrir tudo o que precisa saber investigando o código de um candidato. Adicione estas consultas à sua lista de perguntas para investigar o quão bem os desenvolvedores Angular em potencial entendem o estado:

• Onde você usou state — e como? Este é um ponto de partida sólido para entender sua experiência com o estado; não tenha medo de sondar os detalhes.
• Como você toma a decisão de usar ou não uma biblioteca? É um bom sinal se eles sabem que nem sempre é útil incluir uma biblioteca de estado em um aplicativo.
• O que você colocaria dentro do estado, onde você colocaria e como você faz uso de um sistema de gestão estadual? Se eles disserem: “Eu coloco tudo no meu estado de aplicação global”, isso é um sinal claro de que o desenvolvedor não está ciente dos efeitos colaterais negativos que tal sistema pode causar a uma aplicação.

Os desenvolvedores que entendem os vários tipos de estado evitarão esses efeitos colaterais:

• O estado que se aplica apenas a um componente pode ser modificado ou corrompido por outros componentes.
• Os dados são aninhados no armazenamento, portanto, fica difícil acompanhar os dados e os dados se tornam ilegíveis para humanos (para fins de depuração, troca de dados etc.).
• A edição de dados dentro de um formulário já os emite para o restante do aplicativo, enquanto eles só devem ser enviados para o armazenamento ao salvar os dados – em outras palavras, o restante do aplicativo pode estar consumindo dados inválidos.

Não demora muito para que o armazenamento global se torne uma bagunça desorganizada, e não está claro onde cada parte da bagunça se origina, dificultando a depuração e a manutenção.

Entendendo a importância dos testes automatizados

O teste automatizado deve ser considerado tão importante quanto a qualidade do código para qualquer aplicativo da Web Angular. Uma das principais razões para os programadores escreverem testes é documentar seu código: se um novo desenvolvedor ingressar na empresa, a lógica de negócios e certos fluxos de interface do usuário devem ser claros com base nas expectativas do conjunto de testes. Além disso, testes automatizados revelam bugs no início do desenvolvimento.

Faça três perguntas de teste ao seu potencial desenvolvedor Angular:

• Quais são seus pensamentos sobre os testes? Qualquer candidato que não se importe com testes automatizados deve deixar de ser considerado. Mesmo que prefiram não usar o desenvolvimento orientado a testes (TDD), os desenvolvedores que não perceberem o valor dos testes automatizados custarão à sua empresa o tempo de teste manual e, pior, o tempo de inatividade do usuário final quando as regressões aparecerem à medida que as alterações forem feitas em um aplicativo hora extra.
• Em que você se concentra ao testar? Em vez de testar dados básicos, como poder atribuir valores a um campo ou buscar métricas de cobertura de teste específicas (ou seja, 85% de cobertura), um ótimo desenvolvedor Angular deve se concentrar em testar a lógica de negócios principal.
• Geralmente há mais testes E2E ou mais testes unitários? Por quê? Como aplicativos front-end, os aplicativos Angular podem aproveitar dois tipos principais de testes automatizados: testes de unidade e testes de ponta a ponta (E2E). Normalmente, um conjunto de testes terá muitos testes de unidade e menos testes E2E. Os testes de unidade são pequenos, por isso são rápidos de escrever e executar. Os testes E2E são maiores e mais lentos. Aviso justo: Nem todos os desenvolvedores terão a mesma opinião quanto à proporção correta de testes unitários e E2E a serem mantidos. Na realidade, depende da complexidade do aplicativo que está sendo testado e, mesmo assim, a resposta é discutível até certo ponto.

Estruturas de teste angular

Os desenvolvedores angulares têm opções quando se trata de estruturas de teste automatizadas. O teste de unidade pode ser realizado através do Jest ou Jasmine e Karma. Todo desenvolvedor Angular deve estar familiarizado com Jasmine e Karma. Jest também é comum—geralmente é mais rápido e apresenta opções de teste mais avançadas.

O padrão de teste E2E para um aplicativo Angular é o Protractor, a ferramenta padrão gerada pela CLI Angular. Uma alternativa é o Cypress, um framework de testes E2E promissor com muitas opções.

Certifique-se de que o candidato tenha conhecimento profundo de pelo menos uma estrutura de teste de unidade e uma estrutura de teste E2E.

Mantendo-se informado sobre os últimos lançamentos do Angular

Os grandes desenvolvedores do Angular nem sempre usam a versão mais recente em desenvolvimento por vários motivos, mas eles devem conhecer o cronograma de lançamento do Angular para que possam ficar a par das mudanças e estar preparados para mudar. Uma maneira de avaliar isso é perguntar ao candidato se ele está familiarizado com a estratégia de lançamento do Angular. O Angular visa um grande lançamento a cada seis meses, normalmente por volta de fevereiro e maio. Uma versão Angular está sob “suporte ativo” durante os primeiros seis meses após sua data de lançamento e está sob “suporte de longo prazo” por 12 meses após sua data de lançamento. Este é um cronograma bastante apertado em comparação com algumas outras tecnologias, tornando particularmente importante manter-se atualizado.

Você também pode pesquisar sobre a versão mais recente do Angular e perguntar ao seu candidato sobre os benefícios desses novos recursos. Por exemplo, na época em que o Angular 14 foi lançado, você pode ter perguntado ao candidato sobre:

• Componentes autônomos, que reduzem a necessidade de módulos Angular. Componentes autônomos não são declarados em nenhum NgModule existente e gerenciam diretamente suas próprias dependências. Como resultado, eles podem ser dependentes diretamente sem a necessidade de um NgModule intermediário.
• Formulários digitados, outra grande atualização no Angular 14, que define a tipagem estrita como padrão para Formulários Reativos Angular. Os formulários digitados garantem que os valores dentro de FormControls , FormGroups e FormArrays sejam de tipo seguro em toda a superfície da API. Isso permite formulários mais seguros, especialmente para casos complexos profundamente aninhados.

O próximo grande desenvolvedor Angular para sua equipe de front-end

Cada projeto e equipe de desenvolvimento web é diferente e dará importância diferente aos vários aspectos das habilidades e conhecimentos de um desenvolvedor Angular. Mas entender os tópicos fundamentais que apresentamos aqui permitirá que os gerentes de contratação participem significativamente da contratação – mesmo nas avaliações mais técnicas.

O Toptal Engineering Blog agradece a Ramazan Yildiz por revisar os conceitos técnicos e diagramas apresentados neste artigo.