Angular e Padrões de Projeto
Uma visão inicial
Recentemente, decidi escrever um pouco sobre os principais Padrões de Projeto (e também padrões em projeto) presentes em Angular. Para não virar algo longo, decidi falar apenas os principais padrões que possuem um uso bem destacado especial em Angular. Apesar de existir em diversos locais na internet algo parecido, dificilmente esse tipo de conteúdo está em português, o que pode trazer duas dificuldades para alguém que possa estar iniciando com essa plataforma: o Angular em si e uma barreira de linguagem.
Esse artigo não é um tutorial inicial para sair programando com a plataforma, não traz comandos de execução, não possui blocos de código e não é aprofundado, serve para um primeiro contato com boas práticas e pra se situar como funciona um projeto em Angular.
Angular é uma das principais plataformas utilizada para desenvolvimento de aplicações web, front-end. Possui código-fonte aberto, é mantido pelo Google e tem como linguagem base TypeScript. Por muitos anos (mais ou menos uns três) tive a oportunidade de desenvolver aplicações com Angular, mais especificamente nas suas versões 7 e 8. Vez ou outra ainda faço manutenções nesses sistemas.
Dentre os principais padrões de projeto encontrados no Angular, temos:
MVW
O Angular se apresenta como um padrão MVW (Model-View-Whatever). Models fazem referência a parte do sistema com dados em transição, como interfaces e classes sem lógicas. Views correspondem às partes voltadas a interface do usuário, como as visualizações em HTML. Whatever significa que o resto é livre. É livre para ser feito de acordo com sua aplicação. Isso não significa que você deve sair fazendo de qualquer jeito. É bom parar e pensar o que significará o Whatever para você. Conseguir dividir o projeto pensando nessa arquitetura pode ser de extrema utilidade para aplicações mais robustas.
Lazy Loading
Esse padrão é conhecido por adiar a inicialização de um objeto até que de fato ele vá ser utilizado. O sistema de rotas do Angular permite que o carregamento de informações só aconteça quando a rota é ativada, evitando problemas de demora de carregamento no sistema devido ao seu tamanho. Além disso, o sistema de roteamento ainda é feito de forma a possibilitar a verificação de permissões.
Adapter Pattern
Esse padrão de projeto é bastante utilizado quando é necessário criar algo que facilite uma ligação entre duas partes. Em Angular, isso pode acontecer durante tipagens, quando alguns elementos podem ter tipos um pouco diferentes entre API e o que vai ser utilizado no front-end, e também pode ser utilizado na criação de páginas e componentes. Nessa parte que envolve páginas, componentes, geralmente ocorre ao seguirmos padrões de projeto mais modularizados onde alguma parte exterior, mais genérica, pode receber mais de uma opção para ser integrada nela. Então é necessário que a parte mais externa fique mais genérica para receber a parte que é variável dependendo da situação.
Compartilhamento de dados entre pais e filhos
Esse padrão de projeto, como o nome sugere, permite compartilhar dados de um componente para outro. O compartilhamento de dados entre um componente pai (muitas vezes uma página) e um componente filho, é feito através da notação @Input e @Output.
Interceptor pattern
Um interceptador é um padrão comum quando queremos modificar algum fluxo padrão de uma aplicação. Em Angular, ele é comumente utilizado nas requisições HTTP. Com isso é possível modificar padrões em uma requisição HTTP para se adequar as características do sistema. Ao injetar isso na raiz do projeto, esse padrão pode funcionar em conjunto com os dois a seguir. Se for criado dentro de outros módulos, como alguns que estejam dentro de algum lazy loading, cada importação vai criar uma nova cópia, sobrepondo um interceptor da raiz do projeto.
Singleton
Esse padrão de projeto está ligado a existência de uma única instância de uma classe no projeto. Essa abordagem é bem útil para trabalhar com a camada de serviços no Angular. Com ela, os serviços criado na raiz só terão uma única instância dos mesmos. Esse comportamento pode ser bem útil nessa camada do projeto em que muitas vezes é necessário compartilhar dados por ela dentro do projeto.
Dependency Injection
A propriedade @Injectable() com providedIn está ligada também a outro padrão de projeto comum em Angular: dependency injection (DI). O motivo, em específico, desse padrão é manter a modularidade e reusabilidade. Isso é feito visando o padrão de projeto de arquitetura MVW, desacoplando componentes de serviços. Assim, quando um componente precisa de um serviço ele é injetado no construtor do componente.
Publish–subscribe
É um tipo de padrão de mensagem em que remetentes e receptores preparam mensagens de acordo com a natureza do que querem fazer, através de classes, e sem se importar com quem está do outro lado da mensagem. Em Angular, isso pode ser usado na forma com que os serviços podem sem comunicar com à API.
Observer Pattern
Nesse padrão de projeto, uma instância costuma ter vários observadores. Quando ocorre uma mudança na instância, todos os observadores recebem notificação de mudança de estado. Em Angular, esse padrão pode ser utilizando para partilhar informações na aplicação, eventos, programação assíncrona.
Isso é tudo?
Não. Esses são os principais padrões que a gente encontra de uma forma mais específica em Angular, mas não são os únicos, como falei incialmente. A maioria dos famosos padrões de projeto como MVC, padrões criacionais, estruturais, comportamentais, composite, state, SOLID, strategy, visitor, factory, command, decorator, prototype e iterator podem (e devem) ser utilizados na maioria das aplicações, principalmente nas mais robustas.
Nos links a seguir você poderá encontrar um aprofundamento maior dos padrões que foram apresentados aqui e também pode ver algo sobre esses últimos que são comuns a vários outros projetos e não tem uma especificidade única e diferente em Angular.
