O QUE É O ANGULAR E 4 RAZÕES PARA SEU USO

Introdução

Para um desenvolvedor front-end subir de nível é de extrema importância utilizar recursos que melhorem a estrutura de seus códigos e que possibilitem projetos mais limpos, de fácil manutenção e que sejam escaláveis. Tendo isso em mente o uso de framework torna-se indispensável. Nesse assunto o Angular é uma ferramenta que tem diversas funcionalidades que a tornam uma das melhores opções para ser utilizada. Conheça sobre a esse importante framework, quando surgiu, qual problema se dispõe a resolver, principais características e as 4 razões que entendo reforçarem sua relevância e vantagens para utilizar nos projetos front-end.

O que é o Angular?

O Angular é um framework mantido e desenvolvido pelo Google, e serve para desenvolver aplicações em diversas plataformas. Lançado em 2016 baseado na linguagem de Typescript, construído considerando suporte mobile, de maneira simples e rápida, diferentemente do seu antecessor AngularJS, que é baseado na linguagem de Javascript. Seu modelo de desenvolvimento de aplicações é através do SPA, sigla em inglês para Single Page Application (Aplicativo de Página Única), que consiste em apresentar o conteúdo em uma única página, diferente do formato tradicional, que utiliza múltiplas páginas.

Quando se inicia no uso de frameworks é comum se deparar com referências ao Angular e ao AngularJS e acabar por erroneamente acreditar se tratar de uma mesma ferramenta, já que ambas são do mantidas pelo Google e possuem basicamente o mesmo nome. No entanto elas funcionam de maneira bem diferentes.

O AngularJS, lançado em 2010, possui sua estrutura em código Javascript e veio com objetivo de desenvolver aplicativos de clientes complexos. Porém as ferramentas que ele busca dar suporte evoluíram rápido e diante disso apenas seguir atualizando o AngularJS não se mostrava eficiente e suficiente naquele momento. Foi então que em 2014 o Google declarou em uma conferência que iria lançar o Angular, e que este seria uma reescrita deste framework e não uma atualização. Além disso também foi divulgado que a partir de 2018 iria parar de dar suporte ao AngularJS.

O Angular foi oficialmente lançado em 2016, inicialmente nomeado por Angular 2, com intuito de fazer referência a ser diferente do AngularJS e fazendo menção a ser o programa da versão 2 em diante. O fato foi que incluir o numeral 2 após o nome gerou mais confusão e por fim o Google optou por manter apenas o nome Angular. Esse framework foi construído em Typescript, o que já trouxe diversas melhorias, uma vez que além de dar suporte a todos os recursos do Javascript possui uma camada adicional. Por entender como a linguagem Javascript funciona o Typescript cria um sistema de tipos, sem a necessidade de adicionar caracteres extras para tornar os tipos explícitos em seu código. Outra vantagem do Typescript é o fato dele apresentar erros no código durante a compilação, enquanto com o Javascript o erro seria percebido quando o código rodar no navegador.

O Angular tem por objetivo ajudar o desenvolvedor a criar aplicativos web de alta qualidade com muito mais facilidade. Um problema importante que o Angular se propõe a resolver é quando a escalabilidade do projeto, possibilitando seu crescimento e o trabalho em conjunto a outros desenvolvedores e até diferentes times atuando simultaneamente. Atualizações do projeto é outro ponto de grande importância e que o Angular facilitou bastante, através do uso de componentes. Que possibilitam além dessa atualização simplificada, códigos reaproveitáveis de maneira otimizada, permitindo que seu código fique menor e mais limpo.

Inclusive a arquitetura do Angular é justamente baseada sobre esse conceito de componentes, que são blocos de construção para serem reutilizados e combinados, possibilitando desse modo criar aplicativos complexos. Com cada componente contendo uma lógica de visualização e de controle próprio, o código fica de fácil entendimento e mais simples de ser mantido e de receber suporte. Além do mais o Angular utiliza sistema de injeção de dependência, um padrão de designe que permite que os componentes sejam facilmente compartilhados entre si.

Possui estrutura de aplicativo e uma coleção de bibliotecas bem integradas, que cobre uma ampla variedade de recursos, chamado Angular Material. Além disso, através do sistema de módulos, o Angular permite que o código seja organizado de maneira clara e eficiente pelos desenvolvedores. Também está disponível um conjunto de ferramentas de desenvolvedor para auxiliar na criação, teste e atualização de códigos.

Para aproveitar melhor os recursos do Angular e ter maior produtividade é necessário instalar também o Angular CLI. Sendo assim os códigos que virão a ser informados pressupõe que esta ferramenta esteja instalada. Vale ressaltar que os mesmos resultados são possíveis de serem alcançados, com a necessidade de escrever manualmente o que esta ferramenta faz com pequenos comandos. 

Fundamentos do Angular

O Angular possui uma gama de recursos e para compreendê-las é necessário conhecer seus fundamentos. Através destes passa a ser possível vislumbrar o enorme potencial do Angular e começar a pensar na aplicabilidade dele.

O uso de seus recursos passa a ser mais simples, uma vez que é entendido como a ferramenta trabalha e a lógica envolvida. Para tal, vejamos os seguintes tópicos:

• Componentes
• Modelos
• Diretivas
• Injeção de dependências

Componentes

O bloco de construção principal do Angular, são os componentes. E cada consiste em:

• Modelo de HTML que declara o que é renderizado na página
• Seletor CSS que define como o componente é usado em um modelo
• Classe TypeScript que define o comportamento

A criação de um componente se dá numa janela de terminal, onde deve navegar até o diretório do projeto e executar o seguinte comando:

ng generate componente <component-name>

Sendo que o <componente-name> é o nome que desejar atribuir a esse novo comando. Não deve ser utilizado espaço e nesse caso de nome composto é uma boa prática separar por um traço. Por padrão esse comando cria um diretório com o nome do componente, um arquivo .ts, .html, .css e uma especificação de teste.

Modelos

Modelo é um pedaço de HTML. Para criar muitos dos recursos do Angular é usado a sintaxe especial em um modelo.

Através do Angular é possível criar diversos modelos e chamá-los em qualquer parte do HTML, que permite inclusive que este receba conteúdos dinâmicos. Sua aplicação deixa o código mais enxuto e sua manutenção simplificada, já que fazendo alteração em um modelo todos os locais que este é chamado serem automaticamente alterados.

Diretivas

As diretivas são classes que adicionam comportamentos aos elementos, podendo ser usadas para gerenciar formulários, listas, estilos e o que os usuários veem. No Angular temos diretivas de atributos, diretivas estruturais e componentes, sendo este o tipo de diretiva mais comum.

Injeção de dependências

Um dos conceitos fundamentais do Angular é a injeção de dependências. Existem duas funções principais neste sistema, que são consumidor de dependência e provedor de dependência. O Angular facilita a interação entre eles, verificando se já existe uma instância disponível e caso contrário é criado uma nova e armazenada no registro.

4 Razões para usar o Angular

Razão 1 – Organização

Essa é a 1ª razão citada para seu uso, pois pode ser a mesma de alguns desenvolvedores para não querem utilizá-la.

Uma das características do Angular é justamente organizar os projetos em diversas pastas e as agrupar de maneira bem específica, separando onde ficam códigos, configurações, imagens e outros. Esse modo de organização possibilita que mais desenvolvedores trabalhem no mesmo projeto e que a estrutura se mantenha. Facilitando sua manutenção e o entendimento do código.

Através do comando ng é possível uma série de recursos de maneira simplificada. Podendo ser para iniciar um novo projeto, adicionar suporte a biblioteca externa, na construção do projeto, execução de testes e outros.

No terminal, basta digitar o seguinte comando para que a lista de comandos seja apresentada.

ng --help

Print tela resultado do comando no VS Code. Fonte: autor

A estruturação do projeto e pastas necessárias para organizar e separar sistematicamente os componentes é basicamente montado apenas com um simples comando ng.

ng new [name]

Print tela resultado do comando no VS Code. Fonte: autor

Outro recurso muito vantajoso no Angular, que facilita muito a manutenção e permite que seu código esteja muito mais limpo e organizado é a componentização. Peça fundamental no melhor aproveitamento desta ferramenta, pois permite a reutilização de trechos de código.

Razão 2 – Escalável

O Angular foi projetado justamente para criação de aplicativos robustos, visando suporte em versão desktop e mobile, de maneira web e nativa. Sua complexidade em projetos muito pequenos pode fazer parecer que seu uso não é prático, pois acaba por criar uma demanda extra, mas quando o interesse é crescer ou isso possa vir a ocorrer, iniciar o projeto já com o Angular trará muitos benefícios.

Aplicativos que utilizam o Angular conseguem receber desenvolvedores de modo que estes entendam de imediato o código, sabendo onde irá encontrar cada parte e através de seu comportamento forçar que os códigos sejam organizados de modo padronizado.

Tais recursos mostram-se importantíssimos diante do atual cenário, onde temos equipes sendo formadas para tratar especificidades do aplicativo, com desenvolvedores entrando e saindo do projeto. Ter um recurso otimizado, que facilite a inserção desses profissionais é essencial para melhorar o rendimento, diminuindo o tempo gasto no entendimento da estrutura do código e focando energia onde realmente irá trazer resultado.

Razão 3 – Suporte

O Angular é um dos frameworks mais utilizados e queridos pelos desenvolvedores front-end, contando com uma enorme comunidade que oferece suporte a própria ferramenta, corrigindo falhas e levando melhorias contínuas e atualizações frequentes, como aos próprios desenvolvedores, que pode contar com auxilio nas mais variadas adversidades.

Outro ponto importantíssimo a ser considerado é o fato do Angular ser mantido pelo Google, o que garante confiança na ferramenta através de constantes atualizações e investimentos de recursos e pessoas em sua manutenção.

Razão 4 – Velocidade

O Angular passou por diversas atualizações e hoje tem uma excelente performance. Após modificações do código a ferramenta recarrega extremamente rápido. As páginas com desenvolvimento em Angular também carrega muito rápido, devido as rotas serem gerenciadas internamente, de modo que o processamento das views seja executado no navegador, sem necessidade de precisar recorrer sempre ao servidor, proporcionando uma percepção de velocidade maior.

Conclusão

O Angular possui diversas características que o tornam uma excelente opção de framework. Mantido pelo Google, tem grande suporte e com isso atualizações frequentes, que seguem dando suporte as versões anteriores e trazendo cada vez mais melhorias para que os desenvolvedores possam ter mais e melhores recursos em seus projetos.

As 4 razões aqui citadas são apenas um resumo de todo potencial dessa ferramenta. A organização de sua estrutura possibilita que o projeto cresça e tenha diversos desenvolvedores e times atuando simultaneamente, mantendo sua padronização e facilitando entendimento do código e sua estrutura. Sua escalabilidade é um ponto fundamental para que se faça uso do Angular. Sua estrutura central, baseada em componentes, permite que o aplicativo cresça em larga escala, suportando frequentes atualização e absorção de novos desenvolvedores, sem que o ritmo da programação seja prejudicado.  O suporte oferecido trás segurança, garantindo um programa sempre atualizado e com profissionais capacitados e familiarizados com sua estrutura. E a velocidade de codificação e de execução no navegador são diferenciais que o deixam ainda mais atrativo, quesito sempre avaliado e que possui grande impacto ao desenvolvedor e no usuário final.

Gostaria de citar a facilidade do uso dessa ferramenta e como sua estrutura deixa o projeto intuitivo e fácil de manipular. Mas de fato existe uma certa complexidade e a percepção de dificuldade fica subjetiva, variando conforme modo em que se conhece o Angular. Acredito que compreender como ele funciona, qual a lógica por trás das distribuições das pastas e outros, deve ser o primeiro passo em seu estudo, visto que seus comandos passam a fazer muito mais sentido. E claro, seu uso depende de um conhecimento prévio em HTML, CSS e Javascript.

 Durante seu uso e conhecimento da ferramenta outras razões fortes para aplicação serão notadas e sem dúvida os projetos que utilizam o Angular tem vantagens em comparação aos que não utilizam nenhum framework, principalmente quando falamos de aplicações robustas, mas também sobre aqueles que usam outros frameworks, que ofereceram parte do que é encontrado no Angular e outros recursos interessantes, mas que na minha percepção não possuem a mesma experiência que o Angular.

Bibliografia

Angular. Angular Docs. Disponível em: https://angular.io/docs. Acesso em 30 jul. 2023.

Calado, Ricardo. Um overview sobre o framework Angular 2022. Disponível em: https://blog.geekhunter.com.br/um-overview-sobre-o-framework-angular/. Acesso em: 30 jul. 2023.

Handa, Udit. 7 razões para usar Angular para seus aplicativos da web em 2022 27 out. 2021. Disponível em: https://cynoteck.com/pt/blog-post/reasons-to-use-angular-for-your-web-app/#:~:text=O%20principal%20benef%C3%ADcio%20de%20AngularJS,para%20aplicativos%20de%20p%C3%A1gina%20%C3%BAnica. Acesso em: 31 jul. 2023.

Nascimento, Felipe. Javascript ou Typescript? 24 jun. 2021. Disponível em: https://www.alura.com.br/artigos/javascript-ou-typescript?utm_term=&utm_campaign=%5BSearch%5D+%5BPerformance%5D+-+Dynamic+Search+Ads+-+Artigos+e+Conte%C3%BAdos&utm_source=adwords&utm_medium=ppc&hsa_acc=7964138385&hsa_cam=11384329873&hsa_grp=111087461203&hsa_ad=645853715422&hsa_src=g&hsa_tgt=aud-456779235794:dsa-843358956400&hsa_kw=&hsa_mt=&hsa_net=adwords&hsa_ver=3&gclid=EAIaIQobChMIyKq49Mm7gAMVECvUAR1NRQskEAAYASAAEgKB6fD_BwE. Acesso em: 01 ago. 2023.

Rocha, Wellysson. Descubra as vantagens do Framework Angular para o desenvolvimento web! 30 mar. 2023. Disponível em: https://www.dio.me/articles/descubra-as-vantagens-do-framework-angular-para-o-desenvolvimento-web. Acesso em: 01 ago. 2023.

Rosario, Andrew. Padrões e Boas Práticas em Angular (Que te ajudarão a escalar) 8 fev. 2020. Disponível em: https://andrewrosario.medium.com/padr%C3%B5es-e-boas-pr%C3%A1ticas-em-angular-que-te-ajudar%C3%A3o-a-escalar-5001e544e7de. Acesso em: 01 ago. 2023.

Sa, Luana. Angular: o que é, para que serve e vantagens 01 jan. 2021. Disponível em: https://www.hostgator.com.br/blog/o-que-e-o-angular/. Acesso em: 31 jul. 2023.

Schumacher, Mateus Schafer. As melhores razões para utilizar Angular como tecnologia front-end 03 fev. 2022. Disponível em: https://pt.linkedin.com/pulse/melhores-raz%C3%B5es-para-utilizar-angular-como-tecnologia-matheus. Acesso em 31 jul. 2023.

Typescript. Typescript Docs. Disponível em: https://www.typescriptlang.org/docs/. Acesso em: 01 ago. 2023.