ESTUDO E DESENVOLVIMENTO DE CASO DE USO COM FRAMEWORK ANGULARJS Rafael de Castro Zorzo1 Élder F. F. Bernardi2 RESUMO A evolução das técnicas de desenvolvimento de aplicações Web permite aos desenvolvedores melhorar constantemente suas aplicações e sistemas e fornecer melhor experiência ao usuário final. O AngularJS é um framework que fornece funções e uma arquitetura que atende praticamente todas as necessidades no ambiente de programação para a Internet e por isso está sendo aplicado frequentemente pelas empresas. Este artigo apresenta um estudo do framework em sua parte conceitual e posteriormente apresenta resultados obtidos através do desenvolvimento de um caso de uso que permite a avaliação do Angular. O protótipo desenvolvido para avaliação da ferramenta determinou diversos fatores que demonstram a qualidade e os resultados obtidos com a implementação do AngularJS em sistemas Web. O resultado final da avaliação apresentou o retorno esperado, pois a ferramenta trouxe efeitos positivos em todos os pontos avaliados dentro do contexto deste trabalho. Palavras-chave: Aplicação. Sistema. Desenvolvimento. Abstração. Facilidade. INTRODUÇÃO O desenvolvimento de aplicações Web é aprimorado constantemente em todos os aspectos, desde a arquitetura e as metodologias empregadas até as linguagens de programação que o compõe. A arquitetura de uma aplicação Web está deixando de ser composta por grandes quantidades de códigos server-side, onde todo o processamento é feito no servidor, os códigos são fechados e o consumo de banda é maior aos proprietários do sistema, e passando a ter maior utilização de códigos client-side, onde o processamento dos scripts da página ocorre na máquina do cliente e somente quando há necessidade de interação com o banco de dados são feitas requisições ao servidor. De forma a facilitar essa transição de códigos server-side para client-side, foi desenvolvido pela Google o framework AngularJS, cujo objetivo é trazer ao lado cliente as ferramentas e funcionalidades que são tradicionalmente implementadas em nível servidor, sem que haja risco à sensibilidade dos dados trafegados. Como consequência desse modo de 1 Rafael de Castro Zorzo, formando no curso de Tecnologia em Sistemas para Internet pelo Instituto Federal de Educação, Ciência e Tecnologia Sul-rio-grandense, câmpus Passo Fundo (IFSul - Passo Fundo - RS). E-mail: [email protected] 2 Orientador, professor do IFSul. E-mail: [email protected] 2 desenvolvimento, páginas mais rápidas, intuitivas e interativas melhoram a experiência do usuário na utilização do sistema. Ainda, o AngularJS proporciona aos desenvolvedores uma arquitetura facilmente escalável, reutilizável, testável e de fácil manutenção, aumentando a produtividade e a facilidade na depuração do sistema. Este aborda o uso de Single Page Application (SPA), técnica já difundida e aplicada na produção de sistemas para Internet. (ANGULARJS) O objetivo deste artigo é demonstrar o que é e como o AngularJS pode ser usado no auxílio ao desenvolvimento de novos sistemas que pretendem atender a essa evolução na forma de criação das aplicações, bem como sua capacidade de aumentar a produtividade dos desenvolvedores, reduzir a utilização de recursos dos servidores, promover o desenvolvimento ágil e a produzir melhor experiência ao usuário final. Para isto, será realizado um estudo da organização dos componentes que compõe a arquitetura do framework e será desenvolvido um protótipo baseado em um caso de uso para por em prática os conceitos levantados, sendo analisados ao final os resultados obtidos durante o desenvolvimento. De forma mais específica, os principais pontos abordados serão a organização da aplicação baseada no framework, a utilização de templates3 e abstrações nas requisições AJAX, o uso do Data Binding, a utilização do desenvolvimento em página única (SPA), os filtros built-in e personalizados e a experiência de desenvolvimento com o framework. 1 REFERENCIAL TEÓRICO Este referencial apresenta os conceitos estudados que são necessários para o entendimento deste artigo. Na seção 1.1, serão abordados os modelos básicos de desenvolvimento Web utilizadas atualmente. Na seção 1.2, serão descritos os conceitos que estão diretamente ligados ao Framework AngularJS, objeto de estudo do trabalho. 1.1 Aplicações e desenvolvimento Web Segundo Nations (s. d.), “Uma aplicação Web é qualquer aplicação que utiliza o navegador como cliente, seja uma aplicação simples como um quadro de mensagens ou um complexo processador de palavras”. As aplicações Web atuais se utilizam de ferramentas 3 Templates são trechos de código HTML separados do arquivo principal, com a finalidade de organizar a aplicação. 3 padrão de desenvolvimento, como a HyperText Markup Language (HTML) (ROBBINS, 2013, p.1), Cascading Style Sheet, (CSS) (OLSSON, p. XIX) e geralmente usam combinações de scripts server-side (como PHP e JSP) e client-side (como JavaScript), juntamente a uma tecnologia de banco de dados, como MySQL. (WELLING e THOMSON, 2009, p. 3) O desenvolvimento Web é a programação que permite a funcionalidade dos websites, conforme necessidade do proprietário. Normalmente, trabalha diretamente com a parte de codificação e marcação, não adentrando a parte de projeto do sistema. (JANSSEN, s. d.) A arquitetura de desenvolvimento para este ambiente mostra-se principalmente em dois amplos e distintos tipos: tradicional e moderno, que serão conceituados a seguir. 1.1.1 Modelo de desenvolvimento web tradicional As páginas se tornaram dinâmicas graças aos webservers4 e às linguagens server-side, que recebem as requisições e enviam o conteúdo requisitado junto a resposta para o cliente. (FINK; FLATOW, 2014, p. 3) O ciclo de vida destas aplicações está disposto na Figura 1: Figura 1: Ciclo de vida das aplicações web tradicionais Fonte: FINK; FLATOW, 2014 Quando o usuário abre a página, este faz uma requisição HTTP ao servidor (1), o qual a responde com páginas HTML (2). Através da submissão de um formulário ou link para outra página, o usuário submete uma nova requisição HTTP ao servidor (3), e este retorna um novo HTML, sendo necessária a recarga completa da página (4). Isso ocorre a toda interação 4 Webservers são computadores que provêm arquivos conforme requisições recebidas. Basicamente, recebem uma solicitação, decodificam essa solicitação e verificam qual arquivo está sendo solicitado. Caso esse arquivo esteja disponível, ele é então entregue em resposta à solicitação. Exemplos de webserver: Apache e NodeJS. 4 do usuário que faz uma chamada HTTP ao servidor, pois nesse tipo de aplicação, a maior parte do desenvolvimento é controlada pelo servidor. (FINK; FLATOW, 2014, p.7 e 8) Esta abordagem de desenvolvimento gera um overhead 5desnecessário de cabeçalhos e requisições ao servidor, pois a cada reload 6realizado na página, todos os arquivos HTML, CSS e JavaScript são baixados novamente, tornando a exibição do conteúdo mais lenta e levando à necessidade de um novo modelo de desenvolvimento, que é aqui chamado de modelo de desenvolvimento web moderno e será abordado na próxima seção. 1.1.2 Modelo de desenvolvimento web moderno Em contrapartida ao estilo de desenvolvimento tradicional, o modelo de desenvolvimento moderno busca trabalhar de forma assíncrona, sem bloqueio de uso do sistema durante as requisições, onde a manipulação do documento é realizada em linguagens client-side nativas e amplamente suportadas (como JavaScript) que não necessitam de instalação de plug-ins e são multiplataforma (no sentido de precisar de somente um navegador que interprete as linguagens client-side em qualquer tipo de dispositivo). Esse modelo é composto pela utilização de HTML ou HTML5 e Asynchronous JavaScript and XML (AJAX)(W3SCHOOLS), trabalhando de forma independente da linguagem server-side, sendo delegada a esta somente receber requisições geradas pelas chamadas AJAX e responder em formato JavaScript Object Notation. (JSON) Este modelo de desenvolvimento se tornou possível do ponto de vista de implementação quando o AJAX emergiu como um padrão de criação de aplicações Web e sua capacidade foi vista por grandes empresas como a Google, abrindo portas para a evolução da linguagem JavaScript. A habilidade do AJAX em fazer requisições assíncronas sem bloquear a interface do usuário e atualizar somente uma seção da página sem precisar recarregá-la revolucionou a experiência do usuário. Posteriormente, as bibliotecas JavaScript de manipulação do HTML como jQuery (JQUERY) trouxeram abstrações às chamadas AJAX, trazendo cada vez mais programadores a esse “novo mundo” das páginas Web. (FINK; FLATOW, 2014, p.4 e 5). A inserção do padrão HTML5 também contribuiu para o melhoramento e evolução do JavaScript. (FINK; FLATOW, 2014, p.5) 5 Overhead é o termo utilizado para descrever o custo excessivo na realização de uma atividade. Na situação apresentada no trabalho, significa o excesso de envio de requisições ao servidor web. 6 Reload é o termo utilizado para designar a recarga completa de uma página. 5 Nesse ambiente, as Single Page Applications (SPA) ganharam espaço. A SPA é uma técnica Web que utiliza uma única página HTML como base para todas as páginas da aplicação nas quais as interações do usuário final são implementadas. (FINK; FLATOW, 2014, p. 3). Seu ciclo de vida está ilustrado na Figura 2: Figura 2: Ciclo de vida da SPA Fonte: FINK; FLATOW, 2014 Nas aplicações de página única, uma requisição inicial HTTP de abertura da página é enviada ao servidor (1), que retorna um documento HTML (2). Este HTML inicial, que nunca é recarregado ou reposto, é exibido no navegador e as interações do usuário são guiadas por requisições AJAX. (FREEMAN, 2014, p. 46) Ao invés de recarregar a página a cada nova requisição, são feitas requisições AJAX ao servidor para solicitar os dados necessários (3), os quais são retornados em JSON ou partes de HTML pré-renderizadas, que serão atualizadas no Document Object Model (DOM) e mostradas ao usuário final (4). Outro diferencial das aplicações de página única é que a transição de páginas é realizada no lado cliente da aplicação. (FINK; FLATOW, 2014, p.12) Portanto, este modelo se difere do tradicional em relação ao overhead de requisições, tornando a aplicação mais leve e permite melhor usabilidade para o usuário final, devido ao AJAX não bloquear a manipulação da página durante sua execução. A grande maioria das SPA’s é desenvolvida no lado do cliente, em oposição às aplicações tradicionais que interagem com o lado servidor e demandam recargas constantes de páginas inteiras. (FINK; FLATOW, 2014, p. 3) Dentro deste contexto de desenvolvimento moderno, o AngularJS tem chamado a atenção por sua leveza e pela facilidade com a qual trabalha os conceitos e os paradigmas do modelo moderno. A próxima seção exibirá os conceitos básicos do framework, comentando inicialmente o que ele é e posteriormente suas dependências e sua arquitetura. 6 1.2 AngularJS O AngularJS é um framework estrutural para desenvolvimento de aplicativos Web dinâmicos. Ele permite a utilização do HTML como um template, possibilitando que a sintaxe HTML seja estendida para representar de forma mais clara e sucinta os componentes da aplicação. O AngularJS é um arquivo JavaScript, não necessitando procedimentos de instalação. (ANGULARJS) A construção do AngularJS enfatiza pontos importantes do desenvolvimento. São eles:  Expansão: facilidade no entendimento de complexos aplicativos desenvolvidos, uma vez que se entenda o básico do Angular. Isso permite que a aplicação cresça e seja incrementada conforme a necessidade do usuário;  Manutenção: a modularização da aplicação facilita o debug do sistema, simplificando a manutenção em longa data;  Testes: capacidade de encontrar falhas e corrigir estas falhas de maneira simples e rápida antes da implantação ao usuário. (FREEMAN, 2014, p. 3) O objetivo do AngularJS é trazer grande parte das ferramentas e capacidades que são codificadas no lado servidor para o lado cliente. Com isso, pretende-se facilitar o desenvolvimento, os testes e a manutenção dos sistemas. O Angular permite também a extensão do HTML expressando as funcionalidades através de elementos personalizados, atributos, classes e comentários. (FREEMAN, 2014, p. 45) O framework faz uso dos conceitos de Data Binding e de injeção de dependência, que são importantes para o entendimento da ferramenta. O Data Binding é uma técnica que se constitui em modificar algo no modelo (dados dos objetos) da aplicação e refletir no DOM as novas informações ou vice-versa. Bibliotecas como jQuery proveem maneiras de modificar parte do DOM separadamente, sem a necessidade de recarregar a página completamente. Neste caso, são adicionados somente dados no template, que são atualizados com a ajuda da função innerHtml. A execução desta função alcança o objetivo principal que é a atualização do template de maneira assíncrona, sem necessidade de novo carregamento da página, porém demanda cuidados não triviais para o controle tanto dos dados no HTML quanto dos dados nos objetos JavaScript. Com o uso do AngularJS, esse trabalho de verificação é geralmente automático, e a preocupação com essa vinculação é reduzida, além de que ele implementa um tipo de data binding chamado two-way data binding, que consiste em modificar o DOM e refletir nos objetos do modelo ou modificar o modelo e espelhar a modificação no DOM. (GREEN; SESHADRI, 2013, p. 4). Já a injeção de dependência é um conjunto de princípios e 7 padrões de software que permite o desenvolvimento de aplicações menos acopladas através da inclusão de bibliotecas/dependências a um módulo quando este for necessário. Segundo Jeremy (2013, p. 2), “Injeção de dependência é tudo relacionado à criação de códigos pouco acoplados”. Após apresentadas as técnicas essenciais ao entendimento dos conceitos usados pelo AngularJS, a próxima seção descreverá a arquitetura do framework, juntamente com os a descrição dos componentes que constituem o framework. 1.2.1 Arquitetura do AngularJS A arquitetura do AngularJS consiste na criação de módulos de sistema que podem trabalhar de forma separada ou conjunta. O Angular trabalha de forma a solicitar informações do lado servidor somente quando necessário, sendo todas as outras atividades da aplicação controladas por ele na camada de visão. (MARCO) A organização das aplicações criadas com o AngularJS geralmente apresenta a estrutura ilustrada na Figura 3: Figura 3: Organização de uma aplicação AngularJS Fonte: MARCO, 2013. A ideia principal é que cada módulo possa conter suas próprias configurações, rotas e sua própria lista de dependências. Quando o usuário acessa uma determinada URL dentro do sistema, a rota controlada pelo módulo carrega na tela o template e o controlador JavaScript 8 responsável pelo template. Feito isso, o usuário passa a manipular o template gerando troca de informações e requisições ao servidor. Esse fluxo de dados é representado na Figura 4: Figura 4: Fluxo de dados em aplicação AngularJS Fonte: STROPEK, 2013. Na Figura 4, o usuário interage com a view, que está vinculada ao controlador através de diretivas do AngularJS dentro do template carregado no momento do roteamento. Quando as interações do usuário resultam em chamadas ao servidor (como salvar dados de um formulário), essa ação é tratada pelo controller, que utiliza algum service do AngularJS (como o $http) para abstrair a interação com o server, que retorna os dados conforme a função chamada. Estes dados retornados em formato JSON são espelhados no model, que posteriormente são refletidos na view através da técnica de two-way data binding fornecida pelo Angular. (STROPEK, 2013) As subseções seguintes conceituam os componentes que possibilitam a organização da aplicação em módulos e o fluxo de dados descrito através da Figura 4. 1.2.1.1 Módulos Os módulos são basicamente containers para as demais partes do aplicativo (como controladores, serviços, filtros, diretivas, entre outros). Eles são fragmentos da aplicação, que se interligam com os demais módulos para formar o sistema. O objetivo da modularização é ter o menor acoplamento possível da aplicação, podendo estes serem utilizados em outros sistemas, caracterizando o reaproveitamento de código. (ANGULARJS) 9 1.2.1.2 Controladores Os controladores são funções JavaScript usadas para ampliar o escopo do AngularJS. Eles podem ser usados para iniciar o estado do objeto $scope e atribuir comportamento a este objeto. Quando um controlador é atrelado ao DOM através da diretiva ng-controller, o Angular vai instanciar um objeto de Controller, usando o nome especificado no construtor da função. Neste momento, um objeto $scope filho estará disponível como um parâmetro injetável para a função de construção do Controlador. (ANGULARJS) Segundo Freeman (2014, p. 22), “O controller fica entre o modelo e a visão e conecta- os. O controlador responde à interação do usuário, atualizando os dados do modelo e fornecendo à visão os dados de que ela necessita [...]”. Ele é responsável por definir como o aplicativo será iniciado. (GREEN; SESHADRI, 2013, p. 142) 1.2.1.3 Diretivas Segundo Branas (2014, p. 18), “Uma diretiva é uma extensão do vocabulário HTML que permite ao desenvolvedor a criação de novos comportamentos. Essa tecnologia permite a criação de componentes reutilizáveis para toda a aplicação”, em forma de atributos, elementos, classes e comentários. É através das diretivas que o controlador recebe as ações geradas pelo usuário, e também através destas que os dados modificados são espelhados na visão. 1.2.1.4 Expressões Segundo Branas (2014, p. 53), “Uma expressão é uma simples parte de código que será avaliada pelo Framework e pode ser escrita entre chaves duplas, como por exemplo {{teste}}. É conhecida como interpolação e permite a fácil interação com qualquer objeto dentro do scope.”. Ainda, a expressão permite a adição de cálculos, como {{2 + 2}}, e pode trabalhar em conjunto aos filtros para transformação da apresentação do conteúdo na tela. (BRANAS, 2014, p. 54). É através das expressões que o Angular mostra os dados presentes no modelo da aplicação. 10 1.2.1.5 Filtros Os filtros são usados nas views para formatar os dados apresentados ao usuário. Uma vez que o filtro é definido no módulo, ele pode ser utilizado por todos os controllers e visões daquele módulo. (FREEMAN, 2014, p. 221) O AngularJS traz filtros built-in (como “currency”, que recebe um número e formata-o para dólar ou “date”, que recebe um timestamp e transforma para uma data legível, segundo um formato), e também permite a criação de filtros personalizados. Basicamente, os filtros são funções JavaScript que recebem um dado e formatam este dado para ser mostrado na visão. (FREEMAN, 2014, p. 222) 1.2.1.6 Rotas As rotas do AngularJS permitem que, ao modificar a URL, seja possível o carregamento e a apresentação de páginas (templates), bem como a instanciação de um controller que trará o contexto a este template. (GREEN; SESHADRI, 2013, p. 38) A forma como o serviço $routeProvider trabalha é de fácil entendimento: quando as modificações no método $location.path atingem os mapeamentos realizados, a view correspondente é carregada e mostrada na tela. (FREEMAN, 2014, p. 583). O módulo ngRoute inclui uma diretiva chamada ng-view, que é o local onde o template carregado será renderizado. 1.2.1.7 Serviços Os serviços do AngularJS são objetos ou funções conectados através do uso de Injeção de dependência. Um exemplo simples de Serviço dentro do AngularJS é o $http, cuja finalidade é abstrair chamadas AJAX e facilitar a utilização dos métodos padrão do protocolo HTTP (GET, POST, PUT, DELETE). (ANGULAR) 2 ESTUDO DE CASO Esta seção apresenta a descrição do estudo de caso abordado juntamente com os pontos a serem avaliados com relação ao desenvolvimento do protótipo. Ainda, estão presentes os objetivos do estudo de caso de forma geral, a metodologia aplicada para