DDD com ASP.NET MVC e AngularJS: Criando Single Page Applications

No período de ascensão das aplicações web, era comum que se buscasse nesse ambiente a mesma experiência de uso que se tinha em aplicativos desenvolvidos para desktop, o que levou ao surgimento do conceito de RIA (Rich Internet Application), uma aplicação web desenvolvida para entregar as mesmas funcionalidades que eram normalmente associadas com uma aplicação Win32, por exemplo.

Com o passar do tempo, porém, e ainda mais com o crescente número de usuários de dispositivos móveis, passou-se a entender as individualidades das aplicações web e a importância de oferecer uma experiência de uso otimizada para esse ambiente, considerando todas as suas particularidades. A tendência atual, então, é para o desaparecimento das aplicações RIA e o fortalecimento de aplicações web com uma liberdade de design maior, com tecnologias como HTML5, JavaScript e CSS garantindo maior poder tanto ao desenvolvedor front-end quanto ao back-end.

Nesse cenário, alguns frameworks vêm ganhando cada vez mais espaço, por oferecerem maior flexibilidade para a construção da interface e interação com serviços no back-end que proveem dados em formatos leves e compatíveis com diversas linguagens de programação. Entre esses frameworks destacam-se, por exemplo, o Knockout.js, Backbone.js, Ember.js e AngularJS, que será utilizado neste artigo.

AngularJS e o padrão MVW

Por bastante tempo, o AngularJS foi muito propenso a adotar o padrão MVC (Model-View-Controller), mas depois de muitas refatorações em suas APIs, esse framework hoje está mais próximo do padrão MVVM (Model-View-ViewModel), pois o objeto $scope pode ser considerado o ViewModel, que está sendo decorado por uma função através da qual chamamos o controller. Após tantas discussões e questionamentos sobre qual seria realmente o modelo implementado pelo AngularJS, hoje ele é considerado um framework MVW, de Model-View-Whatever, ou seja, não importa qual é o nome dado ao terceiro componente da arquitetura, o importante é a função que ele desempenha e como ele o faz com eficiência.

O AngularJS nos dá uma grande flexibilidade para separar a lógica de apresentação da lógica de negócios e o estado da apresentação. Com isso, esse framework dá uma potência maior à nossa produtividade e à manutenibilidade de nossa aplicação. Não vamos nos aprofundar muito em como o AngularJS funciona, nosso principal escopo é mostrar como ele pode ser facilmente acoplado ao ASP.NET MVC e como esses frameworks podem trabalhar em conjunto. Para melhor compreender essa integração, portanto, vamos desenvolver uma aplicação de exemplo onde teremos o AngularJS na camada View, fazendo o trabalho que geralmente é delegado ao Razor.

Projeto prático

Neste projeto desenvolveremos um controle bem simples de gastos com categoria, consumo e unidades valoradas. Na Figura 1 temos o Diagrama Entidade Relacionamento da aplicação, onde podemos observar as tabelas que serão utilizadas, com suas chaves primárias e relacionamentos.

Figura 1. DER da aplicação de exemplo

Frameworks envolvidos na solução

Em nossa aplicação de exemplo utilizaremos o ASP.NET MVC 5, o AngularJS, o Fluent NHibernate para o Mapeamento Objeto-Relacional e o Unity para controlar a injeção de dependências, mantendo assim uma estrutura desacoplada e flexível.

Utilizaremos o Domain-Driven Design como abordagem para desenvolvimento, mas nesse DDD não contaremos com módulos, raízes ag ...