Como selecionar as habilidades dos desenvolvedores angulares

Novembro 24, 2020

JavaScript frameworks are developing at a rapid pace, translating to frequently updated versions of some of the most popular choices including Angular, React, and Vue.js. In this post, we will focus on Angular developer skills, what Angular is, and how to screen a developer for Angular skills.

The very first version of Angular was introduced in 2009 and is the result of innovative work by Google engineers, Misko Hevery and Adam Abrons. Angular is an open-source framework with highly advanced JavaScript support and  is a part of the JavaScript ecosystem. Overall, it has received warm commendation from the development community.

Angular’s solid code base and the fact it is developed, maintained, and supported by Google are the main reasons why Angular is relied upon by developers for building highly interactive web applications. In the 2020 StackOverflow Developer Survey, Angular was ranked as the third most used web framework technology. Since the beginning of 2019, the Angular developer community has grown 50 percent compared to 2018, as stated in NG-Conf 2019.

Looking at its high marketability pace in this era of technological advancement, Angular is being increasingly used for enterprise-scale applications. Let’s discover more about Angular.

What is Angular1. What is Angular?

The first thing to note is that Angular (without “JS” in the name) had a predecessor, named AngularJS. The names are almost the same, but technically they’re different tools. After being released in 2009, it was replaced by the “new Angular”, commonly known as Angular 2+, or just Angular in 2016. So strictly speaking, it’s been in use since 2016. Now that we have that out of the way…

Angular is a web development platform built-in TypeScript that provides developers with robust tools for creating the client-side (front-end) of web, desktop, and mobile applications.

In 2010, Angular’s primary advantage was that it let you turn HTML-based documents into dynamic content. Before AngularJS, HTML was much less convenient to modify, meaning that users couldn’t actively interact with interfaces on HTML pages as easy or quick as they can today.

There were some ways to build dynamic, single-page applications (SPAs) but they were too complex for convenient programming. Angular architecture reduced development effort aimed at creating dynamic content and the users benefitted from web pages with dynamic forms and elements.

The new Angular, compared to Angular JS, provides the same benefits as its parent (dynamic pages, etc) but with modern tooling, better performance; at a larger scale. Contemporary features from 2016 to present-day are designed to be much more user-friendly than those in 2010.

1.1. What is Angular used for and what problems does it solve?

The primary function of Angular is to build complex web applications. It can also be used for building universal apps (i.e, one codebase to be deployed on both web and mobile platforms, similar to React Native).

Sendo um web framework means Angular instinctively helps speed up the process of building web applications by allowing the developer to write much less code. Angular also uses HTML to define the UI of the application. HTML, compared to Javascript, is a declarative and intuitive language; and much less complicated. It also means a developer doesn’t need to invest time in program flows and solving problems like “in what order must the scripts be loaded”. Essentially, you can define what you require and Angular will take care of it.

The use of TypeScript for increasing the maintainability of code and the performance score that improves as you make more complex applications are two great USPs for Angular. Additionally, the specific ecosystem choices can allow Angular to become the main instrument for long-term and heavy-investment projects where a steep learning curve is compensated for by stability and ongoing tech support.

1.2. Is it similar to any other languages or frameworks?

On the UI, it’s similar to what used to be called the “presentation layer” in templating languages such as JSP (Java Server Pages), JSF (Java Server Faces), or ASP (ASP.net). On the logic layer, it’s similar to enterprise technologies such as Java/.net.

React is another web framework that Angular is often compared to. Similar to Angular, React is used in the development of single-page as well as mobile applications. It differs, however, where React is much smaller in size and usually requires additional libraries while developing complex React Applications.

Vue is another framework that is often compared to the aforementioned two. Vue works in the View layer of an application while possessing a virtual DOM feature and supporting additional libraries, similar to React. Vue also has a template style similar to Angular, but performance-wise it is much more lightweight; meaning, it is more useful for building user interfaces and solving complex problems. This is opposed to Angular’s penchant for developing enterprise-scale applications.

1.3. What are its main advantages or features?

Angular comes out of the box with lots of tools used for the most common programming tasks. These include: structuring the UI with components, communication with back-end structure via HTTP, handling forms (Angular supports two approaches: template-driven forms and reactive forms), and handling application logic in services. And, of course, automated unit and e2e testing.

What is special about Angular is its design is aimed at large-scale applications. Angular has an advanced modularity system, combined with Dependency Injection, which makes it highly configurable for complex applications to keep the modular (but clearly increases the difficulty).

What should a recruiter know about Angular2. What is important for an IT Recruiter to know about Angular?

Angular uses many concepts borrowed from technologies such as Java/.net, so for experienced back-end developers, Angular will seem familiar and won’t pose too much of a challenge.

However, there are some concepts that will require training for front-end developers who don’t have a great back-end knowledge. Examples of these concepts include dependency injection, service-oriented architecture, static typing, general OOP (Object-Oriented Programming) principles, and so on.

Nevertheless, Angular is a framework with lots of built-in features. And learning those features can take significant amounts of time and effort. This means that even experienced Angular developers will not know absolutely everything about the framework from back to front, do mind the pun.

2.1. How often does the tech stack change?

Officially, the Angular team is supposed to release a new major version every six months.

A new major version means that it may contain breaking changes, so the code which used to work on the previous versions could stop working. Because there might be breaking changes in the new major versions, these sweeping changes don’t occur very often.

A major reason might be the inconvenience developers would face by putting lots of effort into upgrading the framework only. So instead of a revolution each half-year, we rather see evolutionary growth.

An excerpt from the Angular website states:

In general, you can expect the following release cycle:

  • A major release every 6 months
  • 1-3 minor releases for each major release
  • A patch release and pre-release (next or rc) build almost every week

2.2. Are there many resources/tools/technologies available?

As one of the most popular web frameworks, there are lots of open-source libraries available for Angular. Needless to say, there are a plethora of resources including books, tutorials, conferences, and blogs that are easily accessible.

Many popular component libraries are in existence, such as Angular Material (Google Material Design implementation for Angular) or ng-bootstrap (Twitter bootstrap implementation for Angular). As well as this, there are several popular state management libraries available, including NGRX, NGXS, Akita, not to mention various techniques within the pure RxJS library. In essence, there is no shortage of free and paid content available online for Angular.

2.3. What tools and techniques should an Angular developer be familiar with?

Angular developers should be expected to be familiar as possible with the framework itself.

It’s quite important for developers to have knowledge of architecture and design patterns since Angular is used to create usually large-scale projects.

Design patterns assist in keeping the sizable codebase and complexities in order and makes it easier to add new functionalities. Without design patterns, code is much more chaotic and difficult to maintain. Their functionality is not specific to Angular, rather, they are a general Computer Science topic – but their existence is especially important to Angular.

They should be also familiar with fundamental Angular dependencies:

  • TypeScript – is the primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety and tooling. Browsers can’t execute TypeScript directly, as Typescript must be “transpiled” into JavaScript using the tsc compiler, which requires configuration.
  • JavaScript (the browser programming language itself) – since this is the environment in which Angular apps will be run in, especially, Asynchronous JavaScript.
  • RxJS – a programming library providing reactive streams that are ubiquitous in Angular

2.4. What type of experience is important to look for in an Angular developer (commercial, open-source, scientific, academic)?

Scientific and academic experience is almost irrelevant. Commercial experience with building web applications usually indicates proficient Angular developer skills, so is the most important factor.

Experience with using open-source JavaScript/TypeScript/Angular libraries is also necessary.

Verify Angular skills3. How to verify Angular developer skills in the screening phase?

One important thing to note is that you should never expect a developer to be strong at every feature of programming. It’s doubtful that; for instance, someone very experienced with CSS, HTML, and styling would also be an expert in architecture and design patterns. So try to find the Angular developer skills you need for your project and focus on those.

3.1. What to take into account when screening a CV?

Clearly, experience with Angular and other web frameworks is a must for any CV in the role. However, other things to consider related to Angular developer skills include:

  • Proficiency in JavaScript
  • Browser (runtime environment) and DOM (Document-Object Model) experience
  • A good Knowledge of HTTP as nearly all applications need to load external data for the client (Angular) app to process, display, and hand over to users, etc.
  • The ability to work with CSS as applications need to have a nice layout afterall
  • Architecture and design pattern experience to be able to handle complex business requirements with maintainable code

It’s crucial for an Angular developer to have vast experience with browsers, DOM, HTTP, and CSS. This is because: if something is impossible within the runtime environment, it’s also not in Angular. Intrinsically, a framework cannot go beyond its runtime environment.

Architecture and design patterns are equally as important because as mentioned above, Angular apps are rather big and complex. Big apps with poor design lead to high costs for application maintenance and adding to features, and that is certainly not ideal.

Angular Glossary3.2. What glossary terms are important to know in Angular (including frameworks, libraries, and language versions)?

Aspects within Angular

Arquitetura
  • Modules
  • Injeção de Dependência
  • Components
  • Performance techniques
State management
  • HTTP Services
  • Stateful Services
  • NGRX or NGXS or Akita etc.
Forms
  • Template-driven forms
  • Reactive Forms
Templates
  • Components
  • Pipes
  • 3rd party libraries with built-in components, such as Angular Material, ng-bootstrap, etc.

Aspects related to Angular

  • TypeScript – the language in which Angular apps are written. While JavaScript is the mother of Web programming and used in most websites, TypeScript is a modern and object-oriented programming language that provides a better structure to manage large Web projects. TypeScript is being adopted by several large open-source projects and libraries including Angular. The main differences between JavaScript and TypeScript are:
    • TypeScript has a feature that is strongly-typed or supports static typing. That means Static typing allows for checking type correctness at compile time. This is not available in JavaScript.
    • TypeScript points out the compilation errors at the compile-time (which takes place during development). JavaScript, being an interpretive language, has no compilation errors. All errors are thrown into runtime so potentially more errors can leak into the app and cause problems for the end-user.
    • RxJS – reactive streams are used to support HTTP requests, WebSocket requests, Reactive Forms, Routing, Application State, and more.
    • Webpack – also called a bundler, it’s a tool that combines lots of loose files (tens, hundreds, or even thousands of them) and merges them into one logical file which is then executed. It comes with multiple benefits, with the most important being better performance and improved developer tooling.

3.3. Which versions are completely different? Which versions are similar to each other?

As touched on previously, each new major version of Angular can be interpreted as an evolutionary change. The 2016 update from AngularJS to the current Angular was more of a revolution with the fundamental changes that were made.

One of the most important changes was in Angular 9, which introduced the new compiler called Ivy.

Each version gets a new major number. So far we’ve had:

  • Angular 2
    (There was no Angular 3, as internal Angular packages were out of sync with each other and then unified. Since then packages are backward compatible.)
  • Angular 4
  • Angular 5
  • Angular 6
  • Angular 7
  • Angular 8
  • Angular 9
  • Angular 10

Releases can be seen in the changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md

3.4. What other lines on a resume can show Angular developer skills?

Experience with other JS frameworks (or mobile apps) would be very beneficial. These include:

  • AngularJS, Ember, React, Vue, and many others

A developer familiar with Vue or AngularJS would no doubt have to spend a bit of time learning Angular. However, the developer should already understand what are the typical tasks, what potential issues need to be solved, and what are the limitations of web apps. These would just need to be addressed in a different toolset (but the topics/issues/tasks are logically almost the same).

Experience with automated unit testing (tools such as Karma, Jasmine, Jest, Mocha, Ava, etc.) and/or e2e testing (Selenium, Protractor, Puppeteer) would also be beneficial if the developer’s role includes writing or maintaining tests.

Angular interview questions4. Technical screening of Angular developer skills during a phone/video technical interview

Whether you’re an IT recruiter, a project manager, or a CTO, you are well aware that the success of your project rests on your ability to find top developers.

Below you‘ll find some example interview questions you can refer to when seeking a new Angular developer to build your web applications.

4.1. Questions that you should ask about an Angular developer’s experiência. Why should you ask each of those questions?

  • In previous projects, what did your everyday tasks consist of?
    • The answer to this question should tell you whether the candidate is more interested in the UI part (HTML, CSS, visual effects, fonts, etc.) or the logic behind the application (state management, services, modules). In general, it’s better to have developers of various specializations together in one team rather than have all CSS experts and no architecture design experts.
  • In previous projects, have you been maintaining or creating a component library (set of components reused by multiple apps or multiple projects)?
    • This question asks about an advanced use case behind Angular components. If a candidate has been working on such a project, there is a high probability that they would spot more technical nuances (which is a plus) than developers who didn’t. Component libraries are difficult to create because they need to support multiple functionalities for various components.
  • Have you been using external third party libraries for styles?
    • Many projects and businesses decide not to create their own design language (the look and feel behind a trademark or business). Instead, they choose to implement an existing language such as Angular Material and ng-bootstrap. These tools provide lots of useful functionalities, but learning them takes time. If you know your team is using a third-party library for styles, definitely ask the candidate about it. This might significantly affect the decision of whether to hire someone.
  • Have you been automatically testing the applications you’ve written?
    • If your team maintains automatic tests such as unit, functional, and e2e, a candidate with experience in testing would be much more attractive than ones who don’t. Beware of candidates who have “never automatically tested their software”, or don’t believe that it makes sense or that it pays off.
  • Have you been creating real-time applications?
    • The majority of applications load data from the server and display it to the user, such as your bank account balance. The value doesn’t change very often, so there’s no need to reload it every second. But some applications (e.g. taxi companies, or financial institutions) need to update their data every second, or even more frequently. If your application is a realtime app, then your Angular components need to reset the data way more often or use WebSockets over HTTP.

4.2. Questions that you should ask about an Angular developer’s knowledge and opinions. Why should you ask each of those questions?

  • Explain how an async pipe works in Angular.
    • This question verifies if a developer understands one of the fundamental tools widely used within Angular apps. See the detailed explanation below.
  • Let’s assume we have a component that stores an HTTP request in a stream, and this stream is bound to the template using three different async pipes. How many physical HTTP requests does this component make?
    • This question is super important as being unaware of how async pipes work often leads to creating apps that make too many requests, therefore slowing down both front-end and back-end layers.
      The quick answer is: if there are no subjects and no share operators, then the component makes three requests (which is not right). If there is a subject/share operator used properly, there should be only one request supplying all the async pipes.
  • What rules and principles do you follow when writing unit tests?
    • This question checks the knowledge and experience of testing in Angular and in general. When building big apps in Angular it’s especially important to trust the quality of your app – and it’s nearly impossible without automatic tests (as manual testing is extremely expensive).
      General principles for testing are:
      – Tests should run independently and should not rely on their order
      – Skipping a single test should not make any other test fail, and vice versa
      – Tests should check only a single behavior/attribute.
      – A given functionality should be tested once. Because if the functionality is broken, it’s not logical to continue testing
      – Unit tests should mock their dependencies, e.g. HTTP calls. That’s because if a test was checking both components’ behavior and was failing because the server replies with an invalid HTTP response, it can’t be due to the component. Checking everything (including dependencies) should be done in so-called e2e tests

4.3. Behavioral questions that you should ask an Angular developer. Why should you ask each of those questions?

  • You’re working on a project for some time and notice there is an ongoing issue – whenever a component changes, many tests fail and they have to get updated. What would you think about it and what would you do?
    • This question checks the both attitude of a developer, teamwork skills, and their tech experience of Angular apps. Criticizing an existing codebase is not constructive and immediately a deal-breaker. The preferred approach would be to analyze the reasons together, agree on them as a team, and create a measurable plan as to how the situation could be improved over time.
      Suggesting to abandon activities in order to refactor tests and implementation makes little sense from a business perspective, as in reality teams aren’t just able to stop delivering new features.
  • A new Angular version was released last week. Would you intend to upgrade the application, if so – when?
    • Generally, the question is about keeping the balance between maintaining the high technical quality of the project and business goals. If the developer says they’d perform a quick check to see whether this task could be easily accomplished (the upgrade turns out to be simple to navigate, but first a check is necessary) – then it would be a great answer.
  • You are about to start creating an Angular application, but you don’t know whether it’s going to be big or small. The business can’t tell if the app is going to grow. What tool would you use to provide state management?
    • This question verifies the mindset of a developer – whether they are likely to introduce needless additional tools (which increases the complexity and the cost to deliver features) or keeps things simple. A good answer is to keep data in Angular services if the application is small-scale. You can think about additional state management libraries (NGRX, NGXS, Akita, etc.) when the application gets bigger and more complex. The context for this question is developers tend to use libraries when they’re not necessary, just because they want to get to know them in order to write it down in their CVs. This is a popular issue in the front-end development community.

Angular coding tests5. Technical screening of an Angular developer’s skills using an online coding test

Finding a high-quality developer that has the potential to work according to your concept is a tough nut to crack. It is a time-consuming, costly, and cumbersome endeavor. And with the mushrooming of online communities filled with thousands of remote developers, taking the right decision can be a bit overwhelming. Thankfully, there are some steps, checks, and procedures that can help you take the right decision.

5.1. Which online test for Angular developer skills should you choose?

Ao procurar o direito Angular developer skills test você deve certificar-se de que corresponde aos seguintes critérios:

  • O teste reflete a qualidade do trabalho profissional que está sendo realizado
  • A duração não é muito longa, uma a duas horas no máximo.
  • O teste pode ser enviado automaticamente e é simples por natureza.
  • O nível de dificuldade corresponde às capacidades do candidato.
  • O teste vai além de verificar se a solução funciona - ele verifica a qualidade do código e como ele funciona em casos de bordas
  • É o mais próximo possível do ambiente natural de programação e permite que o candidato tenha acesso a recursos relevantes
  • Proporciona ao candidato a oportunidade de utilizar todas as bibliotecas, estruturas e outras ferramentas com as quais se depara regularmente.

5.2. DevSkiller ready-to-use online Angular developer skills tests

Os testes de codificação DevSkiller usam nossa metodologia RealLifeTesting™ para espelhar o ambiente de codificação real em que seu candidato trabalha. Ao invés de usar algoritmos obscuros, os testes DevSkiller exigem que os candidatos construam aplicações ou recursos. Eles são classificados de forma completamente automática e podem ser levados para qualquer parte do mundo. Ao mesmo tempo, o candidato tem acesso a todos os recursos que normalmente utilizaria, incluindo bibliotecas, frameworks, StackOverflow e até mesmo o Google.

Companies use DevSkiller to test candidates using their own codebase from anywhere in the world. To make it easy, DevSkiller also offers a number of pre-made Angular tests like the ones here:

Angular
JUNIOR
Competências testadas
Duração
58 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de Angular2+, JavaScript, rxjs

Tarefa de programação - Nível: Fácil

JavaScript | Angular 2+ | Porta-cartões de visita virtual - Conecte componentes do porta-cartões virtual usando um serviço, RxJS, e Angulars @Input.

Angular
JUNIOR
Competências testadas
Duração
44 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de Angular2+, JavaScript

Lacunas de código

avaliação do conhecimento de Angular2+, JavaScript

Tarefa de programação - Nível: Fácil

JavaScript | Angular 2+ | Currency Calculator - Termine uma aplicação que deve converter a quantidade de dinheiro em moeda selecionada para USD.

Angular
MÉDIO
Competências testadas
Duração
72 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de Formulários Angulares API, Formulários Reativos Angulares, Angular2+, Gabaritos Angulares, Segurança Angular

Tarefa de programação - Nível: Médio

JavaScript | Angular 2+ | Formulário de Inscrição - Conecte HTML/CSS ao Angular e adicione a validação apropriada.

Angular
MÉDIO
Competências testadas
Duração
73 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de Angular2+, Datilografia, JavaScript, Ferramentas, Desenvolvimento Web

Tarefa de programação - Nível: Médio

JavaScript | Angular 2+ | Formulário de Inscrição - Conecte HTML/CSS ao Angular e adicione a validação apropriada.

Angular
JUNIOR
Competências testadas
Duração
40 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de Angular2+, JavaScript, Datilografia

Tarefa de programação - Nível: Fácil

JavaScript | Angular2+ | Configuração do roteador - Crie a configuração do roteamento com base na aplicação existente e nos requisitos apresentados na descrição.

Angular
SENIOR
Competências testadas
Duração
105 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de ES6, JavaScript, Angular2+, Datilografia, AJAX, Desenvolvimento Web

Tarefa de programação - Nível: Difícil

Angular 2+ | Signup Flow | Componentes e roteamento - Completar o fluxo de registro do usuário através da configuração do roteamento, integrando o formulário de registro com os serviços de dados e adicionando a validação de entrada adequada.

JavaScript
MÉDIO
Competências testadas
Duração
121 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de ExpressJS

Tarefa de programação - Nível: Médio

Angular 2+ Aplicação de Bloco de Notas

Tarefa de programação - Nível: Médio

Nó.JS - Mongo - Relatório do curso

Lacunas de código

avaliação do conhecimento de MongoDB

Angular
SENIOR
Competências testadas
Duração
108 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de AJAX, JavaScript, Web, Desenvolvimento Web, ES6

Tarefa de programação - Nível: Difícil

JavaScript | Angular 2+ | Página de registo | Componentes e encaminhamento - Completar o fluxo de registo de utilizadores através da configuração do encaminhamento, integrando o formulário de registo com os serviços de dados e adicionando a validação de entrada adequada.

Angular
SENIOR
Competências testadas
Duração
73 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Perguntas de escolha

avaliação do conhecimento de AJAX, JavaScript, Desenvolvimento Web, Ferramentas, Angular2+, rxjs, Datilografia

Tarefa de programação - Nível: Difícil

JavaScript | Angular 2+ | Carrinho de compras - Corrija alguns problemas com a sincronização de dados através do aplicativo e para adicionar poucos recursos de personalização.

Angular
MÉDIO
Competências testadas
Duração
34 minutos, no máximo.
Avaliação
Automático
Visão geral dos testes

Tarefa de programação

Use o seu Angular 2+ habilidades para reparar um bloco de notas app

Perguntas de Escolha

Verifique o seu Angular 2+ competência, respondendo a uma variedade de essencial questões sobre Angular 2+

Partilhar correio

É mais do que um simples boletim informativo.

Receba insights úteis diretamente em sua caixa de entrada e aprenda mais sobre a contratação de tecnologia.

Verificar e desenvolver as habilidades de codificação sem problemas.

Veja os produtos DevSkiller em ação.

Certificações de segurança e conformidade. Certificamo-nos de que os seus dados estão seguros e protegidos.