Resumo - Angular

Prévia do material em texto

Angular: Uma sı́ntese sobre o segundo framework de
desenvolvimento mais popular do mundo
Eduarda Cristina Rosa
1Departamento de Ciência da Computação –
Universidade Estadual de Santa Catarina (UDESC) Joinville – SC
eduarda.crsa@gmail.com
Resumo. O Angular é um framework baseado em TypeScript lançado em 2016
de código aberto, usado para criar Single-Page Applications ou aplicação de
página única, de forma rápida e simples utilizando a arquitetura MVC - Model-
View-Controller. Neste artigo vamos explorar seu histórico, elementos, vanta-
gens e desvantagens, além de apresentar um comparativo com outras ferramen-
tas front-end baseadas em JavaScript.
1. Introdução
O Angular é um framework de desenvolvimento para a criação de aplicações de página
única, do inglês Single-Page Applications (SPA), da famı́lia do JavaScript [Afonso 2018].
Criado em 2016 por desenvolvedores do Google com o intuito de repaginar o já existente
AngularJs, é open-source e foi pensado para aplicações de grande porte que possam ser
executadas em diversos tipos de dispositivos [Devmedia 2019].
Várias mudanças que tornam os dois frameworks incompativeis entre si, estão
a criação da ferramenta Angular CLI, a diferença de linguagem, ou seja, o AngularJs
utilizar JavaScript, enquanto o Angular utilizar a linguagem TypeScript, entre outras.
O intuito desse trabalho é apresentar um panorama geral sobre o Angular, desde
seu histórico, elementos e ambiente de desenvolvimento, até comparações com outros
frameworks baseados em JavaScript mais utilizados no mercado, como o React e o Vue.js.
Apesar de possuir fortes concorrentes na hora de escolher um framework de de-
senvolvimento front-end o Angular ainda é muito utilizado e preferido por alguns desen-
volvedores devido as vantagens que ele possui, como desenvolvimento cross-plataform,
velocidade e desempenho, componentes para testes e acessibilidade, além de outras que
podem ser encontradas ao longo deste artigo.
2. Histórico
O Angular já existe a mais de 10 anos e recebeu diversos aprimoramentos ao longo do
tempo e sua primeira versão saiu entre 2009 e 2010 [Huszárik 2018].
Foi criado por Misko Hervey, um desenvolvedor do Google, e por seu colega de
equipe Adam Abrons. Eles trabalhavam em um projeto paralelo de simplificar o desen-
volvimento de aplicativos da web e deram o nome dele de Angular devido ao uso dos
caracteres ≤ e ≥ que marcam o HTML das páginas. Esse projeto paralelo, inicialmente
referenciado por getAngular, foi aplicado no projeto em que Misko havia sido alocado,
reduzindo drasticamente o número de linhas de código e o tempo de produção de sua
tarefa. Após seu sucesso em pequenos projetos, ele foi lançado como um projeto open-
source que foi amplamente usado dentro do Google. Sua versão estável da API 1.0 do
AngularJs, subsidiada pelo Google, saiu oficialmente em maio de 2011, sua proposta ini-
cial de incluir um banco de dados foi retirada e ele se tornou uma estrutura baseada em
JavaScript para desenvolvimento front-end. Sua logo, vista na figura 1, possui um escudo
para se aproximar da logo do HTML5 [Gudelli 2019].
Figure 1. Logotipo do AngularJs. Fonte: Site oficial
2.1. AngularJs X Angular
Conforme se deu o avanço das tecnologias e dos padrões em JavaScript o AngularJs
começou a se tornar insuficiente e ineficiente para atender as demandas dos desenvolve-
dores e muito custoso na hora de implementar essas novas features e adicioná-las ao já
existente corpo do framework [Gavigan 2018].
Dessa forma, entre 2014 e 2015, a equipe optou por reescrever totalmente os
códigos, criando um novo Angular (Angular 2.0), este baseado em TypeScript e que
além dos recursos originais, recebeu suporte para desenvolvimento mobile, compilação
assı́ncrona e dinâmica, hierarquia de componentes invés de escopo ou controladores,
módulos, entre outras mudanças [Afonso 2018].
Figure 2. Logotipo do Angular ou Angular 2. Fonte: Site oficial
2.2. Versionamento
A partir do Angular 2 os desenvolvedores passaram a usar a versão semântica, que são
um conjunto de regras e requisitos que caracterizam de que forma os números das versões
serão atribuı́dos e incrementados. Dessa forma os números de versão e a forma como eles
são usados tem um significado implı́cito [Preston-Werner ].
Na prática as regras dizem que dado um número de versão no formato MA-
JOR.MINOR.PATCH, incrementamos da seguinte maneira:
1 - Versão Maior ou Major: Quando ocorrem mudanças incompatı́veis na API;
2 - Versão Menor ou Minor: Quando novas funcionalidades são implementadas sem
perder a compatibilidade;
3 - Versão de Correção ou Patch: Quando corrige falhas sem perder a compatibilidade.
Além disso rótulos como pre-release (pré-lançamento) ou build (construção) po-
dem ser usados como extensões do formato.
Dessa forma o versionamento semântico oferece uma maneira de lançar e atualizar
pacotes sem atualizar para novas versões de pacotes dependentes, o que poupa tempo e
possı́veis problemas [Preston-Werner ]. A ideia é manter uma comunicação clara entre
o desenvolvedor da ferramenta ou software e o usuário, que na prática também é um
desenvolvedor.
2.3. TypeScript
TypeScript é um superset do JavaScript, ou seja, ele é uma linguagem que faz exatamente
tudo que o JavaScript já faz e possui algumas outras funções extras. Criada em 2012 pela
Microsoft, é usada no Angular, principalmente, devido a sua caracterı́stica de tornar a
tipagem do JavaScript estática dentro da aplicação, mas quando o código vai para a web,
na produção, é convertido para JavaScript convencional que possui por padrão tipagem
dinâmica [Fernandes 2019].
3. Elementos
Utilizando o Angular é possı́vel aumentar a produtividade e otimizar o desenvolvimento
de aplicações front-end, devido a sua arquitetura que possui uma organização em partes,
como componentes, módulos, e outros que serão descritos a seguir, de forma que o ambi-
ente de desenvolvimento se torna organizado e conciso [Nalesso 2019].
Sua arquitetura depende basicamente de blocos de construção chamados NgMod-
ules que fornecem um contexto de compilação para os componentes, que são o elemento
cerne do Angular. Tudo dentro do Angular é um componente e um componente precisa
sempre estar dentro de um módulo, pois existe um módulo raiz que habilita a inicialização
e normalmente possui outros módulos de recursos e bibliotecas da aplicação.
Os componentes definem a parte de Views, que são os conjuntos de elementos de
tela e usam serviços que fornecem funcionalidades especificas, que podem ou não estar
relacionadas as visualizações. Os provedores de serviços são injetados nos componentes
no formato de dependências, isso é o que torna o código modular, reutilizável e eficiente
na pratica.
Esses módulos, componentes e serviços são classes que usam decorators e são
esses decorators que marcam os tipos e fornecem os metadados ao Angular, bem como
as informações de utilização.
Os metadados de uma classe componente associado a um template definem a View.
O template é quem combina o HTML básico com as diretivas do Angular e a marcação dos
Bindings, permitindo que o Angular modifique o HTML antes que ele seja renderizado e
exibido. Já na classe de serviço os metadados fornecem informações necessárias para que
o Angular disponibilize componentes por meio da injeção de dependências ou DI.
Geralmente os componentes de uma aplicação definem as Views de forma
hierárquica, para auxiliar nisso o Angular oferece um serviço de rotas que definem camin-
hos de navegação entre essas Views, além de oferecer recursos sofisticados de navegação
no navegador.
Figure 3. Diagrama da arquitetura do Angular. Fonte: Site oficial
Na figura 4 podemos ver como as peças que compõe o Angular se relacionam entre
si. Em um breve resumo podemos dizer que juntos um componente e um modelo definem
uma View. Nela o decorator da classe de componenteadiciona metadados e um ponteiro
para o modelo associado. Já as diretivas e a marcação do binding do modelo de um
componente, modifica a View com base nos dados e lógicas inseridos pelo desenvolvedor.
E por fim, o injetor de dependências fornece serviços para o componente e o serviço de
rotas, permitindo definir a navegação entre as Views [Google 2010c].
Nas subseções seguintes vamos ver mais profundamente alguns elementos que
compõem a arquitetura do Angular.
3.1. Módulos
São os módulos que tornam nossa aplicação organizada, pois eles declaram e agru-
pam tudo que criamos no Angular. Podemos criar módulos que agrupem componentes,
serviços e outros elementos. Os módulos do Angular são chamados de NgModules e
possuem duas estruturas principais, as declarations e os providers. Esses NgModules são
diferentes e complementam os módulos do JavaScript.
Esse módulos agrupam, exportam e escondem os componentes, diretivas, pipes e
serviços relacionados e toda aplicação possui pelo menos uma classe NgModule que é o
módulo raiz (root). Esse módulo raiz fica no arquivo ”/src/app/app.module.ts”.
Figure 4. Módulo raiz. Fonte: A autora
Em resumo, um módulo é um contêiner para um bloco de código coeso e dedicado
a um domı́nio, fluxo de trabalho ou conjunto de recursos. Esses módulos podem conter
componentes, provedores de serviços e outros arquivos de código. As funcionalidades
desses módulos podem ser importadas por outros e exportadas para outros.
O Ngmodule utiliza a função decorator que usa um objeto de metadados, cujas
propriedades descrevem o módulo. As propriedades mais importantes são:
- Imports: Vetores com outros módulos necessários para utilizar os componentes
declarados dentro de um módulo.
- Declarations: Recebe um vetor de componentes, diretivas e pipes que compõem
o módulo.
- Exports: Define o conjunto de componentes e pipes disponı́veis para outros
módulos.
- Providers: Declara os serviços, por exemplo, se for um módulo root, esses
serviços ficam disponı́veis globalmente para toda a aplicação.
- Bootstrap: Define a View principal, e acomoda todas as outras Views da
aplicação. Somente o NgModule raiz deve definir essa propriedade.
3.1.1. Decorators
É uma função que modifica a definição de classe ou propriedade e é um recurso da lin-
guagem TypeScript. O angular define decorators que anexam metadados a classes ou
propriedade para saber o que essas classes ou propriedade significam e como devem fun-
cionar.
Um decorator de classe aparece imediatamente antes da definição da classe e
destaca o tipo fornecido e fornece os metadados adequados ao tipo. Eles podem ser:
- @Component()
- @Directive()
- @Pipe()
- @Injectable()
- @NgModule()
Quando um decorator é colocado no campo da classe durante a definição da
classe, ele declara o tipo desse campo. Os tipos mais comuns são o @Input e @Out-
put.
3.1.2. Vantagens
Qualquer módulo pode incluir qualquer número de componentes adicionais, dessa forma
esses componentes passam a compartilhar um contexto de compilação. Quando um com-
ponente se associa a um template isso define uma View. Esse componente pode conter
uma hierarquia de Views e permitir a manipulação de áreas complexas de tela, tornando
a criação, modificação e destruição unitárias, além de permitir uma mistura dessas Views
nos componentes que pertencem a diferentes módulos como em bibliotecas de UI.
Essa organização em módulos auxilia no gerenciamento do desenvolvimento de
aplicações complexas e na reutilização. Ainda, os módulos permitem fazer um lazy-
loading, ou seja, fazer um carregamento sob demanda minimizando a quantidade de
código que é carregada ao inicializar uma aplicação. Um exemplo prático dessa van-
tagem é que se grande parte dos usuários não acessa certa rota da aplicação, e se essa rota
em questão contém componentes pesados, esse lazy-loading permitiria a aplicação rodar
mais levemente carregando essa rota em questão apenas quando fosse necessário.
3.2. Componentes
Em Angular, uma aplicação é baseada em componentes e com eles é possı́vel encapsular
comportamentos e regras de interface, além de um componente poder encapsular outros
componentes. Um componente é composto por 3 itens: um template HTML, CSS e uma
classe gerenciadora que cuida das propriedades e comportamentos.
Segundo [Afonso 2018] podemos incluir um ou mais componentes dentro de um
componente que representa a tela, como por exemplo um componente de formulário, uma
tabela e uma barra de ferramentas. O exemplo por ser visto na figura 5 abaixo.
Em resumo, um componente controla uma View. O decorator @Component()
identifica a classe como um componente e oferece o modelo e os metadados especı́ficos
dele.
A estrutura de um componente é dada por um Import que é responsável por im-
portar os componentes e módulos, um decorator onde definimos propriedades do compo-
nente e por fim a classe.
Figure 5. Fonte: [Afonso 2018]
3.2.1. Templates
É um código que define como exibir a View de um componente. A View é a forma que o
HTML informa ao Angular como renderizar o componente.
Um template é associado a uma classe de componente através do decorator
@Componente(). O código pode ser fornecido diretamente como o valor da propriedade
do template ou por meio de um arquivo HTML a parte, vinculado a propriedade templa-
teUrl.
3.2.2. Metadados
Metadados são dados sobre outros dados. Na aplicação os metadados de um componente
informam ao Angular onde obter os componentes necessários para criar e apresentar o
componente e sua View, ou seja, a classe de um componente é a responsável por expor
dados e manipular boa parte da exibição e da lógica de interação do usuário por meio do
Data Binding. Em resumo eles permitem ler e processar as classes do Angular.
As opções mais úteis de configuração do @Component() são:
- selector: Seletor de CSS. Informa ao Angular para criar e inserir uma instância
do componente sempre que encontrar a tag correspondente no HTML do modelo.
- templateUrl: Endereço do modelo HTML do componente.
- providers: Matriz de provedores de serviços que o componente precisa.
3.2.3. Data Binding
É uma das principais caracterı́sticas do framework e consiste em um processo que per-
mite que as aplicações exibam valores de dados para os usuários e respondam as ações do
mesmo. Basta declarar um relacionamento entre um widget HTML e uma fonte de dados e
a estrutura manipula os detalhes. Também chamado de Two-way data binding, é definido
pela entrada de um dado através da view/template e sendo imediatamente passado para
uma propriedade da classe do componente, de forma que esse dado é exibido automatica-
mente em um elemento do DOM (Document Object Model) no template do componente
[Nalesso 2019]. Sem uma estrutura como essa seria necessário inserir valores de dados
no controles HTML, transformar as respostas dos usuários em ações e atualizações de
valores manualmente. Com esse mecanismo as parte do modelo e do componente são
coordenadas.
Na figura 6 é possı́vel observar as quatro formas de marcação do data binding
onde cada uma tem uma direção que pode ser: para o DOM, vinda do DOM ou ambas.
Figure 6. Fluxos do data binding. Fonte: Site Oficial
O Angular processa todas as bindings de dados de uma vez para cada ciclo de
eventos JavaScript, desde a raiz da árvore de componentes da aplicação até todos os
componentes filhos. A ideia principal é automatizar o trafego de dados, facilitando o
trabalho do desenvolvedor, de forma que quando o valor de um componente mudar o
próprio framework é responsável pela atualização na página.
É importante fazer uma observação de que o Angular utiliza o DOM em contra-
partida a outros frameworks de desenvolvimento baseados em JavaScript que utilizam o
VDOM ou Virtual DOM, que é uma abstração do DOM e trabalha com uma espécie de
cópia local e simplificada dos elementos. Ou seja,mesmo que o Angular seja uma alter-
nativa eficiente na construção de uma aplicação web, principalmente do tipo single-page
aplication, ainda poderia ser mais eficiente em alguns aspectos, como seus concorrentes
que utilizam o VDOM [Netto 2018].
3.2.4. Pipes
Usa-se pipes para transformar uma sequencia de caracteres, calores de moeda, datas e out-
ros dados na exibição. São funções simples que aceitam um valor de entrada e retornam
um valor transformado. O próprio Angular define vários pipes, mas é possı́vel definir
novos e encapsular transformações personalizadas. No código abaixo podemos ver um
exemplo onde são passados diferentes formatos de data para os pipes. É um recurso que
aumenta a experiência do usuário quando aplicado corretamente.
1 <!−− D e f a u l t f o r m a t : o u t p u t ’ Jun 15 , 2015 ’−−>
2 <p>Today i s {{ t o d a y | d a t e }}< / p>
3
4 <!−− f u l l D a t e f o r m a t : o u t p u t ’ Monday , June 15 , 2015 ’−−>
5 <p>The d a t e i s {{ t o d a y | d a t e : ’ f u l l D a t e ’}}< / p>
6
7 <!−− s h o r t T i m e f o r m a t : o u t p u t ’9 :43 AM’−−>
8 <p>The t ime i s {{ t o d a y | d a t e : ’ shor tT ime ’}}< / p>
3.3. Diretivas
Quando o Angular renderiza o template, ele transforma o DOM de acordo com as
instruções dadas pelas diretivas. As diretivas são uma classe invocada pelo decorator
@Directive(). Em sı́ntese, podemos dizer que as diretivas são como marcadores no ele-
mento DOM que se comunicam com o Angular para incluir comportamentos especı́ficos.
Existem três tipos de diretivas no Angular [Calado 2019]:
- Diretivas de atributos: Alteram a aparência ou o comportamento de um elemento
da página, de um componente ou outra diretiva. Exemplos: NgClass e NgStyle.
- Diretivas estruturais: Modificam o layout incluindo ou removendo elementos do
DOM, ou seja, modificam a estrutura do DOM. Exemplos: Nglf e NgFor.
- Componentes: São diretivas em um template, dessa forma o Angular define o
decorator do componente @Component() como uma extensão do decorator @Directive()
e associa o template com uma classe.
O Angular oferece várias diretivas internas, iniciadas pelo prefixo ”ng”, porém
também é possı́vel criar novas diretivas, implementando sua própria funcionalidade.
3.4. Serviços
Os serviços concentram as regras de negócio da aplicação e cada serviço pode ser usado
por mais de um componente [Afonso 2018]. Ou seja, para dados ou lógicas que não estão
associados a uma exibição, compartilhada entre componentes, optamos por criar uma
classe de serviço. O decorator da classe de serviço fornece os metadados necessários
para permitir que outros provedores sejam injetados como dependências na classe.
O serviço geralmente é uma classe com objetivo claro e definido. No Angular essa
distinção entre componentes e serviços permite aumentar a modularidade e reutilização.
Quando um componente delega tarefas aos serviços, como por exemplo, buscar
dados no servidor ou validar a entrada de um usuário, essas tarefas de processamento são
definidas em uma classe de serviço injetável, permitindo que você disponibilize essas tare-
fas para outros componentes. Ainda é possı́vel injetar diferentes provedores do mesmo
tipo de serviço tornando a aplicação mais adaptável. Esses princı́pios de funcionamento
não são forçados pelo Angular, ele apenas auxilia o desenvolvedor a segui-los tornando
mais fácil disponibilizar esses serviços para outros componentes com as injeções de de-
pendências.
Dessa forma os componentes podem focar em gerenciar partes da tela que o
usuário visualiza e os serviços podem focar em código com outros propósitos especı́ficos.
3.4.1. Injeção de dependências
Devido a injeção de dependencias os componentes apenas consomem os serviços quando
damos acesso ao componente para a classe de serviço necessária. Através do decorator
@injectable() indica-se que o componente ou classe tem uma dependência. Esse recurso
permite que as classes e componentes se mantenham curtos e eficientes.
Figure 7. Exemplo de um processo de injeção. Fonte: Site Oficial
O injector é o mecanismo principal e o Angular cria ele automaticamente para
toda a aplicação. Um injector cria dependências e mantém um contêiner de instancias de
dependência que reutiliza sempre que possı́vel. E ainda, um provedor é um objeto que
informa ao injector como obter ou criar uma dependência.
Para toda e qualquer dependência da sua aplicação, é necessário registrar um
provedor com injector, para que esse injetor possa usar o provedor para criar novas in-
stancias. Para um serviço, o provedor geralmente é a própria classe de serviço.
3.4.2. Routing
o NgModule permite definir um caminho de navegação entre os diferentes estados da
aplicação e exibir hierarquias. Podemoos observar a ação das rotas digitando uma URL
na barra de endereço o navegador redireciona para uma página correspondente, clicando
nos links da página e o navegador redirecionará para uma nova página ou clicando nos
botões como voltar e avançar do próprio navegador.
O routing interpreta um URL de link de acordo com as regras de navegação de
visualização e o estado dos dados da sua aplicação. Você pode navegar para novas Views
quando o usuário clicar em um botão ou selecionar em uma caixa suspensa ou em resposta
a algum outro estı́mulo de qualquer fonte. O routing registra a atividade no histórico do
navegador o que permite o funcionamento dos botões voltar e avançar.
Para definir as regras de navegação, você associa os caminhos de navegação aos
seus componentes. Um caminho usa uma sintaxe do tipo URL que integra os dados
do programa, da mesma maneira que a sintaxe do modelo integra suas visualizações
aos dados do programa. É possı́vel aplicar a lógica do programa para escolher quais
visualizações exibir ou ocultar, em resposta à entrada do usuário e suas próprias regras de
acesso [Google 2010a].
3.5. Bibliotecas de componentes
Existem diversas bibliotecas que auxiliam no desenvolvimento permitindo a importação
de componentes prontos e personalizáveis. As mais famosas são [Afonso 2018]:
- PrimeNG
É uma das maiores bibliotecas e possui inúmeros componentes, seu uso é recomendado
no desenvolvimento de projetos comerciais e corporativos. É desenvolvida e mantida pela
PrimeTek, uma empresa situada na Turquia.
- Angular Material
É uma biblioteca baseada no Material Design, criada pelo mesmo time de desenvolvi-
mento do Angular.
- ng-bootstrap
É uma biblioteca baseada no Bootstrap, um framework CSS muito popular na criação de
interfaces web.
4. Ambiente de desenvolvimento
O ambiente de desenvolvimento mais comum é composto pelo NodeJs, Angular CLI e
VSCode. O NodeJs é uma plataforma baseada na engine JavaScript do navegador Google
Chrome. Ele não é diretamente utilizado pelo Angular, mas ele se faz necessário devido
as ferramentas que oferece e que o Angular faz uso para funcionar.
O Angular CLI é uma interface de linha de comando que auxilia na construção de
aplicações em Angular. Essa ferramenta possibilita o uso do comando ng, que facilita os
processos e comandos para criar a estrutura para um novo projeto, bem como gerar novos
elementos na aplicação. Já o VSCode é uma IDE criada pela Microsoft, muito popular no
ecossistema de desenvolvimento de softwares. É gratuito, leve e possui funcionalidades
úteis como um terminal interno. Além disso é recomendável um conhecimento prévio de
HTML, CSS e JavaScript para que o desenvolvedor possa ter maior domı́nio dentro do
ambiente.
4.1. Iniciando
O primeiro passo após preparar o ambiente com as ferramentas necessárias é instalar o
Angular CLI. Podemos utilizar o npm, fazendo um bom uso dos recursos oferecidos pelo
NodeJs.
1 npm i n s t a l l −g @angular / c l i
Para criar a área de trabalho inicial da aplicação rodamos o comando ng new do
CLI passando também o nome da nossa aplicação.
1 ng new meu−p r i me i r o−p r o j e t o
Apenas com esse comando o CLI cria a área de trabalho com uma aplicação sim-
ples de inicialização, pronta para ser executada. Para executar a aplicação utilizamos os
seguintes comandos dentro da pasta do ”meu-primeiro-projeto”:
1 cd my−app
2 ng s e r v e −−open
O comando ng serve inicializa o servidor e remonta a aplicação conforme o desen-
volvedor realiza as mudanças dentro do projeto. O projeto agora em execução pode ser
acessado no link http://localhost:4200/ ou através do sufixo ”–open” ao lado do comando
de levantamento do servidor. A página deve ser similar a figura 9.
Figure 8. Página em produção. Fonte: Site Oficial
Ao acessar os códigos, é possı́vel navegar entre as pastas da aplicação. A pasta
”/e2e” comporta os testes automatizados, a pasta ”/ngModules” comporta as bibliote-
cas e dependencias e a pasta ”/src/apps” contém o arquivo de rotas, os módulos e os
componentes e é nela que criamos toda estrutura que posteriormente dará corpo a View,
adicionando componentes e serviços ao template planejado.
A Angular CLI, além de criar o espaço de trabalho e os alicerces da aplicação,
pode ser usada para gerar código Angular já que ela tem suporte para todo o ciclo de
desenvolvimento desde a construção até os testes e implantação.
É recomendável que para obter um conhecimento mais robusto sobre o framework
seja feita uma leitura completa dos conceitos, terminologias e arquitetura da aplicação,
bem como dos princı́pios de design. Além disso o site oficial conta com um tutorial
chamado Tour of Heroes onde é possı́vel praticar o processo completo de desenvolvimento
Figure 9. Esquema de pastas padrão da aplicação. Fonte: A autora
de aplicações.
5. Comparativos
Atualmente, o Angular é um dos frameworks JavaScript que dominam o mercado, man-
tendo sua popularidade por anos a fio, junto ao React e ao Vue.Js.
No Github os repositórios de React e Vue.js possuem mais estrelas, mostrando
uma disparidade na preferência.
Figure 10. Gráfico de popularidade. Fonte: A autora.
Essa disparidade vem crescendo ao longo dos anos como pode ser visto na figura
11, gerada pelo Google Trends, que mostra ao longo de 5 anos a ocorrência de buscas
sobre os frameworks. É possı́vel ver claramente um declı́nio de interesse pelo AngulaJs
conforme o Angular foi se popularizando mantendo uma estabilidade até 2017, e desde
então vem disputando com o React, que se tornou mais buscado, demonstrando o maior
interesse das pessoas atualmente pelo framework de bibliotecas JavaScript.
Figure 11. Gráfico de busca do termo. Fonte: A autora.
No mapa da figura 12 é possı́vel observar como o Angular ainda domina muitas
áreas do globo, tendo seu centro de popularidade na América do Sul e dividindo o espaço
no mapa com o React que é o framework dominante no ecossistema de desenvolvimento
de software global.
Figure 12. Gráfico de busca do termo mundial. Fonte: A autora.
6. Conclusão
É possı́vel notar que apesar de fortes concorrentes, o Angular ainda é um bom framework,
capaz de construir desde pequenas até grandes e robustas aplicações, além de ser prático,
rápido e organizado. Sua principal caracterı́stica positiva é poder visualizar as alterações
em tempo real, bem como sua modularidade que facilita e agiliza a escrita do código.
Apesar de outros frameworks terem se tornado mais populares no mercado, o
Angular ainda possui um lugar de destaque e no site https://www.madewithangular.com/
é possı́vel encontrar uma lista de projetos e aplicações feitas com Angular.
Em meio a diversos aspectos positivos, o que chama atenção negativamente no
Angular é seu tamanho, sua quantidade massiva de informação ao adentrar a primeira vez
no ambiente Angular tomando um tempo considerável do desenvolvedor para que haja
compreensão de todas as peças e conceitos. A integração pode ser considerada engessada
para alguns e ainda pode ser uma solução excessiva ao lidar com desenvolvimento de
aplicações muito pequenas.
Pode-se concluir que assim como diversas outras ferramentas do mundo do de-
senvolvimento de software, o Angular tem seus defeitos e vantagens e dependendo do
problema que o desenvolvedor tem nas mãos é importante levar em consideração não só
as caracterı́sticas do framework, mas também o resultado que se espera, o tempo de de-
senvolvimento, entre outros aspectos, para então ponderar se o investimento no Angular
será satisfatório na resolução do problema ou apenas será uma dor de cabeça ainda maior.
References
Afonso, A. (2018). O que é angular?
Calado, R. (2019). Um overview sobre o framework angular.
Devmedia (2019). Eu preciso aprender angularjs ou angular?
Fernandes, D. (2019). Typescript: Vantagens, mitos, dicas e conceitos fundamentais.
Gavigan, D. (2018). The history of angular.
Google (2010a). Angular.
Google (2010b). Angularjs.
Google (2010c). Introdução aos conceitos angulares.
Gudelli, A. (2019). History of angularjs.
Guedes, M. (2020). O que é o angular e para que serve?
Huszárik, M. (2018). Angularjs para angular - uma breve história com algumas dicas para
começar!
Nalesso, A. (2019). Construindo aplicações front-end com angular.
Netto, F. B. (2018). Angular, vuejs ou react — você já escolheu um framework js hoje?
Pereira, M. (2018). Angular 6 vs reactjs — a web sempre ganhando.
Preston-Werner, T. Versionamento semântico 2.0.0.
Vue.Js. Comparação com outros frameworks.