AngularJS: Conceitos Principais

Tenho estudado e trabalhado com AngularJS nos últimos meses e, neste post, pretendo abordar os principais conceitos do framework e, também, qual o motivo que me fez utilizá-lo.

Minha trajetória desenvolvendo aplicações web é um pouco diferente da maioria dos desenvolvedores web. Quando comecei a trabalhar profissionalmente, embora conhecesse html, css e javascript razoavelmente, iniciei com projetos Flex. Ainda tenho que manter alguns sistemas legados em Flex, mas de um tempo pra cá ficou claro que desenvolver novas aplicações nesta tecnologia não é uma boa opção (aliás, acho que nem no passado era, embora este seja assunto para outro post).

Com Flex eu sempre procurei estruturar minhas aplicações de maneira adequada. Usando o framework Spring Actionscript eu conseguia utilizar Injeção de Dependências e, somado aos recursos de binding do Flex, era relativamente simples aplicar o padrão MVC. Ao migrar para a tríade html/css/javascript eu tive muita dificuldade para estruturar as aplicações baseadas em ajax adequadamente. Aí que conheci o AngularJS.

Os conceitos que eu considero chave no AngularJS são os seguintes: Data binding, Injeção de Dependências, MVC, diretivas e testabilidade. Segue uma breve descrição a respeito deles e de como o Angular os aplica.

Data binding: data-binding possibilita que os valores do modelo e da view sejam sincronizados. Ou seja, se eu tenho um objeto javascript, ao alterá-lo a minha view prontamente se atualiza, sem a necessidade de manipular o DOM e ajustar os valores. No AngularJS ocorre o chamado two-way data binding, onde tanto uma alteração no modelo atualiza a view quanto uma atualização na view atualiza o modelo (no Flex o binding passou a ser de duas vias - two-way -) somente na versão 4).

Além disto, a técnica utilizada pelo AngularJS não é baseada em eventos para realização do binding. Basicamente, o AngularJS compara a cada ciclo se os objetos foram alterados, caso sim, ele faz a sincronização. Este modelo pode ter algumas restrições de performance, mas nunca tive problemas com isto. A vantagem deste modelo é que não existe nada obscuro, qualquer objeto pode ser passível de ser utilizado no binding (mesmo que seja uma propriedade interna do objeto) ou uma função. Com Flex, fazer binding de propriedades internas dos objetos era eventualmente bem complicado.

Injeção de dependências: há muitos textos sobre Injeção de Dependências, mas de maneira breve, ao utilizar DI, ao invés de instanciar os objetos programaticamente, você simplesmente pede por um determinado objeto. O container (neste caso o AngularJS) decide como construi-lo e o fornece para você. A vantagem desta abordagem é a redução de acoplamento entre os objetos e, consequentemente, maior facilidade para testar os objetos. Os componentes do AngularJS estão disponíveis via DI e você também pode (e deve!) configurar seus objetos para serem injetados.

Um detalhe interessante: normalmente em Java ou em outras linguagens estaticamente tipadas, a DI é feita por padrão pelo tipo do objeto. No caso do AngularJS, como Javascript é uma linguagem dinamicamente tipada, a injeção é feita por meio do nome do objeto.

MVC (Model-View-Controller): aplicações AngularJS tipicamente são construídas usando o padrão MVC. Este padrão visa separar a view do modelo, de modo que caso seja necessário alterar a view (ou ter mais de uma view para o mesmo modelo) seja simples. Mais do que isto, utilizar um padrão como o MVC auxilia outros desenvolvedores a lerem o seu código, desde que eles conheçam o pattern.

O fato de possuir data binding e DI facilita muito a construção de aplicações MVC. Além disso há diretivas especificas para este fim, de modo que as aplicações ficam muito bem estruturadas.

Diretivas: As diretivas possibilitam estender o código HTML de maneira simples. É por meio destas que são criados componentes baseados em html. O AngularJS faz parsing do documento html, procura cada diretiva e inicializa ela de acordo com o código que você configura. As diretivas ainda possibilitam que você programe de maneira mais declarativa.

Dentro das diretivas é onde você manipula o DOM, se necessário. Nunca faça isto nos controladores. Para manipular, você pode utilizar a API do Angular que basicamente é um jquery simplificado. Se o jquery tiver sido adicionado, o AngularJS usa ele ao invés desta API simplificada.

Testabilidade: Escrever testes com o AngularJS é muito fácil. Primeiro porque a arquitetura dele tem baixo acoplamento (devido à DI) e, segundo, porque ele acompanha o Karma – uma excelente ferramenta para executar testes. O comum é utilizar o Karma associado ao Jasmine para escrever os testes. Após utilizar o AngularJS eu realmente passei a escrever muito mais testes e, atribuo principalmente a isto, a melhor qualidade dos meus códigos.

Pra não parecer um fanboy desesperado por conseguir novos adeptos, vou listar as duas principais desvantagens do AngularJS:

Falta de documentação: Refiro-me a documentação oficial, visto que ainda não li os livros disponíveis (estão na minha lista!). Como é um framework bastante novo, é natural que não tenha muita documentação. Apesar disto, quando precisei, pude ler o código do framework sem muita dificuldade.

Conceitos complexos: talvez falar em data-binding, DI, MVC e herança por protótipos (que vem do javascript na verdade) seja algo um pouco complexo para alguns devs. Entretanto eu acredito que buscar compreender estes conceitos valha a pena para quem deseja criar programas mais complexos.

Concluindo e terminando este post, tenho gostado muito do Angular. Certamente há muito mais a ser escrito a respeito dele, tratei apenas do que considero fundamental. Pretendo escrever mais para os milhões de leitores deste blog. :-D