Como avaliar as competências do programador Angular

As estruturas JavaScript estão a desenvolver-se a um ritmo acelerado, traduzindo-se em versões frequentemente actualizadas de algumas das escolhas mais populares, incluindo Angular, React, e Vue.js. Neste post, vamos nos concentrar nas habilidades do desenvolvedor Angular, o que é Angular, e como selecionar um desenvolvedor para as habilidades Angulares.

A primeira versão do Angular foi introduzida em 2009 e é o resultado do trabalho inovador dos engenheiros da Google, Misko Hevery e Adam Abrons. O Angular é uma estrutura de código aberto com suporte JavaScript altamente avançado e faz parte do Ecossistema JavaScript. De um modo geral, recebeu elogios calorosos da comunidade de desenvolvimento.

A sólida base de código do Angular e o facto de ser desenvolvido, mantido e suportado pela Google são as principais razões pelas quais os programadores confiam no Angular para criar aplicações Web altamente interactivas. No Inquérito aos programadores do StackOverflow de 2020, Angular foi classificada como a terceira tecnologia de estrutura web mais utilizada. Desde o início de 2019, a comunidade de desenvolvedores Angular cresceu 50 por cento em comparação com 2018, como afirmado em NG-Conf 2019.

Devido ao seu elevado ritmo de comercialização nesta era de avanços tecnológicos, o Angular está a ser cada vez mais utilizado em aplicações de escala empresarial. Vamos descobrir mais sobre o Angular.

1. O que é o Angular?

A primeira coisa a notar é que o Angular (sem "JS" no nome) teve um antecessor, chamado AngularJS. Os nomes são quase o mesmo, mas tecnicamente são ferramentas diferentes. Depois de ter sido lançado em 2009, foi substituído pelo "novo Angular", vulgarmente conhecido como Angular 2+, ou apenas Angular, em 2016. Portanto, estritamente falando, ele está em uso desde 2016. Agora que já tirámos isso do caminho...

O Angular é uma plataforma de desenvolvimento Web incorporada no TypeScript que fornece aos programadores ferramentas robustas para criar o lado do cliente (front-end) de aplicações Web, desktop e móveis.

Em 2010, a principal vantagem do Angular era o facto de permitir transformar documentos baseados em HTML em conteúdo dinâmico. Antes do AngularJS, o HTML era muito menos conveniente de modificar, o que significava que os utilizadores não podia interagir ativamente com as interfaces em páginas HTML tão fácil ou rapidamente como atualmente.

Existiam algumas formas de criar aplicações dinâmicas de página única (SPA), mas eram demasiado complexas para uma programação conveniente. A arquitetura angular reduziu o esforço de desenvolvimento destinado a criar conteúdos dinâmicos e os utilizadores beneficiaram de páginas Web com formulários e elementos dinâmicos.

O novo Angular, em comparação com o Angular JS, oferece os mesmos benefícios que o seu pai (páginas dinâmicas, etc.), mas com ferramentas modernas, melhor desempenho e numa escala maior. As funcionalidades contemporâneas de 2016 até aos dias de hoje foram concebidas para serem muito mais fáceis de utilizar do que as de 2010.

1.1. Para que é que o Angular é utilizado e que problemas resolve?

A principal função do Angular é criar aplicações Web complexas. Também pode ser utilizado para criar aplicações universais (ou seja, uma base de código a ser implementada em plataformas Web e móveis, semelhante ao React Native).

Ser um estrutura web 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. Incorporating experienced angular developers into your team can significantly enhance the efficiency and quality of web application development. 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.

A utilização de TypeScript para aumentar a capacidade de manutenção do código e a pontuação de desempenho que melhora à medida que se criam aplicações mais complexas são duas grandes vantagens do Angular. Além disso, as escolhas específicas do ecossistema podem permitir que o Angular se torne o principal instrumento para projectos de longo prazo e de grande investimento, em que uma curva de aprendizagem acentuada é compensada pela estabilidade e pelo apoio técnico permanente.

1.2. É semelhante a quaisquer outras linguagens ou estruturas?

Na IU, é semelhante ao que costumava ser chamado de "camada de apresentação" em linguagens de modelação como JSP (Java Server Pages), JSF (Java Server Faces) ou ASP (ASP.net). Na camada lógica, é semelhante às tecnologias empresariais, como Java/.net.

React é outra estrutura web que o Angular é frequentemente comparado com. Semelhante ao Angular, o React é utilizado no desenvolvimento de aplicações de página única e de aplicações móveis. No entanto, é diferente, pois o React é muito menor em tamanho e geralmente requer bibliotecas adicionais ao desenvolver aplicativos React complexos.

Vue é outra estrutura que é frequentemente comparada com as duas acima mencionadas. O Vue funciona na camada View de uma aplicação, possuindo uma funcionalidade de DOM virtual e suportando bibliotecas adicionais, semelhante ao React. O Vue também tem um estilo de template semelhante ao Angular, mas em termos de desempenho é muito mais leve; ou seja, é mais útil para construir interfaces de utilizador e resolver problemas complexos. Isto opõe-se à tendência do Angular para desenvolver aplicações à escala empresarial.

1.3. Quais são as suas principais vantagens ou características?

O Angular sai da caixa com muitas ferramentas usadas para as tarefas de programação mais comuns. Estas incluem: estruturação da IU com componentes, comunicação com a estrutura de back-end via HTTP, manipulação de formulários (o Angular suporta duas abordagens: formulários orientados por modelos e formulários reactivos) e manipulação da lógica da aplicação em serviços. E, claro, testes unitários e e2e automatizados.

O que o Angular tem de especial é o facto de o seu design ser direcionado para aplicações de grande escala. O Angular tem um sistema de modularidade avançado, combinado com a Injeção de Dependências, o que o torna altamente configurável para aplicações complexas para manter a modularidade (mas aumenta claramente a dificuldade).

2. O que é importante para um recrutador de TI saber sobre Angular?

O Angular usa muitos conceitos emprestados de tecnologias como Java/.net, portanto, para desenvolvedores back-end experientes, o Angular parecerá familiar e não representará um grande desafio.  Do mesmo modo, para projectos que requerem um apoio back-end robusto, é muitas vezes vantajoso contratar programadores node jsque podem garantir soluções eficientes do lado do servidor.

No entanto, existem alguns conceitos que exigem treinamento para desenvolvedores front-end que não têm um grande conhecimento back-end. Exemplos destes conceitos incluem injeção de dependência, arquitetura orientada para serviços, tipagem estática, princípios gerais de OOP (Programação Orientada para Objectos), etc.

No entanto, o Angular é uma estrutura com muitas funcionalidades incorporadas. E aprender essas funcionalidades pode levar uma quantidade significativa de tempo e esforço. Isto significa que mesmo os programadores Angular experientes não saberão absolutamente tudo sobre a framework de trás para a frente, atenção ao trocadilho.

2.1. Com que frequência é que a pilha tecnológica muda?

Oficialmente, é suposto a equipa Angular lançar uma nova versão principal a cada seis meses.

Uma nova versão principal significa que pode conter alterações de ruturaAssim, o código que funcionava nas versões anteriores pode deixar de funcionar. Como pode haver alterações de rutura nas novas versões principais, estas alterações radicais não ocorrem com muita frequência.

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 skill set, so is the most important factor.

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

3. 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, Angular skills and other web frameworks skills 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.

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

Aspects within Angular

Architecture	Modules Injeção de dependência Componentes Performance techniques
State management	HTTP Services Stateful Services NGRX or NGXS or Akita etc.
Forms	Template-driven forms Reactive Forms
Modelos	Componentes Tubos 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.

4. 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 experience. 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.

5. 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?

When looking for the right Angular developer skills test you should make sure it matches the following criteria:

• The test reflects the quality of professional work being carried out
• The duration is not too long, one to two hours max
• The test can be sent automatically and is straight-forward in nature
• The difficulty level matches the candidate’s abilities
• The test goes beyond checking whether the solution works – it checks the quality of the code and how well it works in edge cases
• It’s as close to the natural programming environment as possible and allows the candidate to access relevant resources
• It provides the candidate the opportunity to use all the libraries, frameworks, and other tools they regularly come across

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

DevSkiller coding tests use our RealLifeTesting™ methodology to mirror the actual coding environment that your candidate works in. Rather than using obscure algorithms, DevSkiller tests require candidates to build applications or features. They are graded completely automatically and can be taken anywhere in the world. At the same time, the candidate has access to all of the resources that they would normally use including libraries, frameworks, StackOverflow, and even 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: