Angular, suas características e seu papel no desenvolvimento web e mobile.

Não é novidade que as ferramentas — de qualquer natureza — nos auxiliam a realizar o trabalho com mais eficiência e, em programação, não é diferente. Quem nunca se deparou com o livro Clean Code ou, ainda, métodos ágeis, em seus estudos?

Tais práticas possuem muito em comum, por exemplo, a busca por legibilidade, manutenibilidade e eficiência estão entre seus objetivos. O Angular, enquanto ferramenta, consegue empenhar muito bem esse papel. Por isso, neste artigo vamos entender o que é o Angular, as suas características e a sua implementação no desenvolvimento tanto web quanto mobile.

Veja os assuntos que serão abordados neste artigo:

Introdução
O que é o Angular
Os elementos do Angular
Componente
Dependências
As características do Angular
Componentização
Escalabilidade
Injeção de Dependências
Roteamento
Angular no desenvolvimento mobile
Empresas que utilizam Angular
Conclusão
Referências

Introdução

O desenvolvimento de uma aplicação, seja ela de qualquer plataforma, evoluiu com o passar do tempo. Hoje em dia, há alguns fatores que precisam ser levados em conta ao criar uma aplicação, entre eles estão: escalabilidade, legibilidade e manutenibilidade.

Escalabilidade é a característica de um software em se adaptar a um aumento repentino na demanda de requisições, ou seja, a capacidade do software lidar com um pico anormal de requisições.

A prática de escrever um código legível é essencial na criação de um software para evitar confusão no entendimento do código, dificuldade na manutenção e colaboração. A falta de legibilidade faz com que o projeto acabe sendo prejudicado. Veja o exemplo a seguir:

function m(n: number[]): number {
if (n.length === 0) { throw new Error("Lista vazia."); }
let s = 0; for (let i = 0; i < n.length; i++) { s += n[i]; }
return s / n.length;
}

const a = [5, 10, 15, 20];
const b = m(a);
console.log(`Média: ${b}`);

É possível, mas pouco provável, que você tenha entendido o código acima. Agora dê uma olhada em outro código:

function calcularMedia(numeros: number[]): number {
if (numeros.length === 0) {
  throw new Error("A lista de números está vazia.");
}

const soma = numeros.reduce((acc, num) => acc + num, 0);
const media = soma / numeros.length;

return media;
}

const numeros = [5, 10, 15, 20];
const media = calcularMedia(numeros);
console.log(`A média dos números é: ${media}`);

A compreensão é bem mais intuitiva, não é mesmo? O segundo código faz uso de nomes completos, identação e espaçamento tornando-o mais legível. A legibilidade somada à escalabilidade nos leva ao conceito de manutenibilidade.

Segundo a Norma Brasileira 5462, da ABNT, a manutenibilidade pode ser descrita como: “a capacidade de um item ser mantido ou recolocado em condições de executar suas funções requeridas, sob condições de uso especificadas, quando a manutenção é executada sob condições determinadas e mediante procedimentos e meios prescritos”, [1] trazendo para o contexto de programação, é a facilidade de realizar manutenção no código.

No cenário da programação, as vezes nos deparamos com projetos semelhantes onde acabamos reutilizando um trecho de código. Alinhar essa reutilização com os fatores citados acima é extremamente importante para uma boa aplicação, dito isso, conheceremos outro conceito, o framework.

Um framework é uma ferramenta que permite abstrair códigos, proporcionando seu uso em diversos projetos. Isso também possibilita uma alta manutenibilidade.

O que é o Angular

De acordo com a sua documentação, o Angular é uma plataforma e um framework de desenvolvimento de aplicativos — web — de página única (da sigla em inglês SPA — ou Single-Page Application), desenvolvido por Misko Hevery e mantido pelo Google.

Inicialmente, o projeto do Angular era baseado na linguagem JavaScript, daí a sua primeira versão: AngularJS. Posteriormente, o AngularJS teve seu suporte descontinuado pelo Google (apesar de ainda existirem projetos com AngularJS)[2], permanecendo apenas o Angular que é baseado em Typescript — uma espécie de “super” JavaScript —, mas também é possível desenvolver em Angular utilizando somente JavaScript.

Os elementos do Angular

Para um melhor entendimento do Angular, inicialmente precisamos compreender seus elementos. Primeiramente, vamos adotar elemento como um recurso do Angular, e característica como uma função que faz uso de um elemento. Vejamos um exemplo do primeiro elemento, o componente:

import { Component } from '@angular/core';

@Component({
selector: 'hello-world',
template: `
  <h2>Hello World</h2>
  <p>This is my first component!</p>
`
})
export class HelloWorldComponent {
}

Componente

Esse elemento consiste em um bloco menor que faz parte da aplicação como um todo. Dentro do componente podemos encontrar o Selector e o Template.

Selector: Um seletor consiste basicamente no nome que você utilizará para chamar o componente, dentro do HTML. Como no exemplo acima, no arquivo de HTML podemos chamar o bloco apenas como <hello-world></hello-world>.
Template: O template é a estrutura do código que será chamada, o título e o parágrafo são exemplos do template.

Então, após o Angular renderizar o componenente, o resultado é:

<hello-world>
  <h2>Hello World</h2>
  <p>This is my first component!</p>
</hello-world>

Caso seja necessário repetir esse código, ao invés de escrevê-lo novamente, basta chamar pelo seletor (<hello-world></hello-world>).

Também é possível inserir o texto dinamicamente, o texto vem da classe do componente. Essa implementação é bastante útil quando se trabalha com APIs (do inglês Application Programming Interface, ou interface de programação de aplicações). Veja a seguir:

<p>{{ message }}</p>

import { Component } from '@angular/core';

@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
  message = 'Hello, World!';
}

O resultado será:

<p>Hello, World!</p>

A criação de um componente se dá de duas maneiras, a primeira é criar o componente manualmente, a segunda é utilizar uma outra ferramenta fornecida pelo Angular, o CLI (Command-Line Interface).

Neste artigo comentarei mais sobre a segunda maneira, já que é produtiva e prática. Primeiramente, é necessário instalar o Angular CLI, é possível instalá-lo utilizando gerenciador de pacotes npm, para isso basta escrever o seguinte comando, em uma interface shell:

npm install -g @angular/cli

A própria ferramenta possui uma lista de comando explicados, para acessá-la basta digitar ng --help. Para criar um novo projeto é preciso digitar ng new <nome-do-projeto>, então vá para o diretório do novo projeto com ng cd <nome-do-projeto> e por fim ng serve para a criação de um servidor local do projeto, para que você possa acompanhar o desenvolvimento do projeto em tempo real.

Dependências

Com a divisão da aplicação em componentes, talvez seja necessário utilizar um recurso de um componente em outro. Por exemplo, na aplicação existe o componente A e o B, mas o B precisa de informações do componente A, portanto, é estabelecida uma relação de dependência onde o componente B depende de A.

E como o componente recebe essa dependência? Simples, pode ser feita de duas maneiras, a primeira consiste na criação interna da dependência e a segunda, que é mais recomendável, consiste na passagem — ou injeção — externa. O segundo método dá origem a uma das características do Angular, a injeção de dependências, que veremos mais a frente no artigo.

As características do Angular

Componentização

Agora que sabemos o que é um componente, vamos ver a característica do Angular que faz uso dele, a componentização. Ao fragmentar a aplicação em partes menores de código, cada uma com sua funcionalidade específica, caso seja necessário, o reuso se torna mais prático.

Ainda ficou confuso? Vamos exemplificar. Imagine que você está pensando em criar um site de portfólio pessoal, e nesse site os seus projetos estarão exibidos em um formato de carrossel, como na imagem a seguir:

Podemos pressupor que cada elemento desse carrossel é padronizado, que possui as mesmas altura e largura e os mesmos tamanho e cor para a fonte. Já entendemos que reescrever o código diversas vezes não é desejável nem considerado uma boa prática. Portanto, podemos criar um elemento do carrossel, com os padrões de estrutura e estilização, como um componente e chamá-lo sempre que necessário.

Caso seja preciso alterar alguma característica, como por exemplo, o estilo da fonte, ao invés de alterar elemento por elemento, basta alterar no componente uma única vez. Também é possível alterar apenas um componente sem que afete o outro. Com essa implementação é possível identificar o benefício do aumento da eficiência e da produtividade do código.

Escalabilidade

Para entender como o Angular trabalha com escalabilidade, primeiro precisamos entender as SPAs. Em uma página ou aplicativo web tradicional, a cada clique o servidor renderiza a página inteira novamente, já em uma SPA somente a nova informação será renderizada e processada pelo navegador. [3]

Por exemplo, o serviço de e-mail do Google, o Gmail, utiliza desse conceito de SPA. Independentemente se você está na aba Caixa de Entrada, ou na aba Rascunhos, a coluna de navegação permanece ali assim como a barra de pesquisa, e outros elementos.

Sabendo desse conceito, podemos dizer que o Angular é um framework desenvolvido para criar SPAs de forma eficiente.

Injeção de Dependências

A injeção de dependências é uma maneira de fazer com que os componentes recebam suas dependências de maneira externa. Essa característica do Angular está diretamente ligada à componentização, uma vez que ela atribui as conexões entre os componentes. Isso garante um código mais limpo, coeso testável e, principalmente, reutilizável.

Dentro da injeção de dependências, podemos destacar a hierarquia de injeção, que consiste na forma que o Angular procura as dependências, seguindo uma hierarquia de componentes até encontrar uma instância disponível ou a raiz da aplicação.

Roteamento

Como sabemos, as SPAs são páginas que carregam dinamicamente somente quando é necessário. Outra característica do Angular que auxilia nesse recurso é a característica chamada roteamento, que consiste nas regras de navegação entre as “páginas”.

Vamos retomar o exemplo de seu portfólio, imagine que dentro de seu site haja diferentes seções, por exemplo, a seção dos projetos, seção sobre mim, entre outras. Supondo que seu portfólio possua elementos repetidos como o header e footer, e cada seção altere apenas o conteúdo principal. Então, como fazer a navegação entre seções?

Simples, ao utilizar o Angular em seu sistema de roteamento você consegue controlar a navegação de forma muito mais prática. Primeiramente, vamos decompor uma rota, ela possui dois elementos principais o Path — que é a URL — e o Componente — que é o componente que será carregado —. Para fazer uso desse recurso, basta criar um componente com uma constante “routes”, e indicar os dois elementos citados acima. Veja a seguir:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SobremimComponent } from './pages/sobremim/sobremim.component';
import { ProjetosComponent } from './pages/projetos/projetos.component';
import { ContatosComponent } from './pages/contatos/contatos.component';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: 'sobremim', component: SobremimComponent },
  { path: 'projetos', component: ProjetosComponent },
  { path: 'contatos', component: ContatosComponent },
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Inicialmente, importamos as palavras chaves, e então passamos os parâmetros para a constante routes. Quando uma rota é configurada e acessada, o Angular recupera a URL, verifica no arquivo de rotas e então tenta carregar o componente na tela. É importante lembrar, que para a renderização ocorrer corretamente, é necessário passar a tag <router-outlet></router-outlet> dentro do arquivo app.componente.html.

Angular no desenvolvimento mobile

Ao integrar o Angular com o Ionic — um framework para o desenvolvimento mobile — é possível criar projetos para plataformas tanto web quanto mobile. Ao criar a sua aplicação, você ainda pode utilizar a mesma base de código independente da plataforma, seja ela IOS, Android ou Web, ou seja, ele pode ser nativo em uma plataforma e posteriormente se tornar compatível com outra ou ainda já ser desenvolvido de forma responsiva. [4]

Inicialmente o Ionic era baseado totalmente no Angular, mas a partir da sua versão 4.x, ele foi reestruturado para funcionar como um framework independente, mas passível de integração com outros frameworks do JavaScript, tal como o Angular. Apesar de ser um framework independente, como o Ionic era baseado em Angular, ao juntá-los novamente é possível obter o melhor de ambos.

Empresas que utilizam Angular

Diante de todos esses benefícios e características, é de se imaginar que o Angular possua uma recepção positiva frente à comunidade front-end e fullstack. Além do Google, há diversas outras empresas que utilizam o Angular, dentre elas podemos destacar:

Microsoft;
IBM;
PayPal;
Upwork;
Samsung;
Forbes;
Rockstar Games.

Conclusão

Se você busca uma ferramenta prática para estruturação, reutilização, manutenibilidade e outros benefícios vistos acima, com certeza o Angular é uma excelente opção. Além de fornecer um ambiente pré-configurado, o Angular auxilia na criação de novos projetos, por meio de seu CLI. Também podemos destacar o ganho de produtividade e organização, com o uso desse framework.

A possibilidade de criar uma aplicação multiplataforma que o Angular e o Typescript oferecem, fortalece a sua popularidade no desenvolvimento mobile. Essa característica os tornam uma alternativa à outras linguagens como Swift para IOS e Java — ou ainda Kotlin, outra linguagem que vem se destacando no cenário — para Android.

Referências

[1] O que é manutenibilidade e quais seus benefícios? Site Produttivo. Disponível em: < https://www.produttivo.com.br/blog/o-que-e-manutenibilidade-beneficios >. Acesso em: 27 jul. 2023.

[2] Angular vs AngularJS: Differences Between Angular and AngularJS. Site Stackify. Disponível em: < https://stackify.com/angular-vs-angularjs-differences-between-angular-and-angularjs/ >. Acesso em: 27 jul. 2023.

[3] What Are Single Page Applications and Why Do People Like Them So Much?. Site Bloomreach. Disponível em: < https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application >. Acesso em: 27 jul. 2023.

[4] Introduction to Ionic. Site Ionic Framework. Disponível em: < https://ionicframework.com/docs/ >. Acesso em: 28 jul. 2023.

Angular: Rotas, Guardas e Navegação. Site Balta. Disponível em: < https://balta.io/blog/angular-rotas-guardas-navegacao >. Acesso em: 28. jul. 2023.

Angular vs React: Uma Comparação Detalhada. Site Kinsta. Disponível em: < https://kinsta.com/pt/blog/angular-vs-react/ > Acesso em: 28. jul. 2023.