As principais características para o desenvolvimento de um produto computacional em AngularJS

Transcrição

1 As principais características para o desenvolvimento de um produto computacional em AngularJS Jefferson Miranda Pires 1, Jaime Willian Dias 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil jeffersonmiranda0@gmail.com, jaime@unipar.br Resumo. Este artigo apresenta o resultado de uma investigação cientifica sobre a framework AngularJS, e tem como objetivo apresentar as principais caraterísticas da sua tecnologia. Para isso foi desenvolvida uma pesquisa que aborda clara e detalhadamente as características do Angular JS. 1. Introdução As tecnologias de informação crescem gradualmente, em ritmo acelerado. Com o crescimento acelerado das novas tecnologias, os desenvolvedores buscam sempre as que apresentam maior desempenho, qualidade e agilidade. O AngularJS é um framework que se destaca por conter as características necessárias para o desenvolvimento de uma aplicação com equilíbrio entre desempenho e agilidade. Segundo Branas(2014) o AngularJS é um framework que possibilita desenvolver aplicações web utilizando a linguagem Javascript. O AngularJS permite também desenvolver a estruturação da aplicação em camadas bem definidas e com um alto grau de reúso de código fazendo com que o framework seja produtivo. O objetivo deste artigo é apresentar as principais características do AngularJS, demonstrando seus padrões de desenvolvimento, carregamento de páginas, manipulação de elementos, dentre outras características. 2. Metodologia Para compor este artigo, foi realizada uma revisão bibliográfica em livros, artigos, teses e sites da internet. Em seguida, fez-se um estudo aprofundado para demonstrar as principais características do AngularJS de forma clara e sucinta. Os resultados obtidos foram utilizados no desenvolvimento de um produto computacional. 3. O que é, e como foi criado o AngularJS O AngularJS é um framework para desenvolvimento web, que utiliza a linguagem de programação JavaScript. Este framework permite estruturação de camadas, criação de componentes modulados e é excelente para o reúso de código, tendo toda uma infraestrutura preparada para integração com servidores back-end. O framework também traz maior facilidade em realização de testes para o desenvolvimento da web, evitando possíveis erros [Branas 2014]. Como o AngularJS é um framework front-end, ele permite utilizar diversas funcionalidades como a manipulação da DOM (Document Object Model), criação de componentes, validação de formulários e etc. Este framework atualmente está na versão 2.0 contudo, neste artigo será abordada a versão 1.5 que é mais utilizada no momento.

2 A Framework foi criado por Miško Hevery e Adam Abrons com o objetivo de facilitar a criação de aplicações web, utilizando menos códigos e otimizando o tempo de desenvolvimento. Atualmente o framework está em posse do Google, com código aberto para desenvolvedores [Branas 2014]. Como a framework possui código aberto, se torna simples o aprendizado, por possuir uma comunidade ativa e que está aberta a ajudar, a tecnologia se destaca na simplicidade para se encontrar materiais de estudo com baixa curva de aprendizado. 4. Principais características do framework O framework evidencia-se por seus excelentes padrões de desenvolvimento profissional e por ser altamente produtivo contendo uma grande variedade de ferramentas que possibilitam o desenvolvimento de um produto computacional Produtividade O AngularJS é conhecido por sua excelência em produtividade, já que utiliza menos códigos no desenvolvimento de uma aplicação permitindo ainda a reutilização deles. Com o AngularJS é possível utilizar componentes de maneira declarativa, porque faz uso do Two-way data Binding, que mantém a View e o Controller sincronizados evitando o uso de GET e SET a todo momento [Branas 2014] Desenvolvimento de aplicações em uma única página ou Single Page Application Dentre as melhores funções do AngularJS, está o recurso Single Page Application. Este faz com que todo o sistema trabalhe em uma única página, sem necessidade de carregamentos contínuos durante a navegação do usuário [Branas 2014]. O recurso Single Page Application possibilita carregar os principais componentes do sistema na memória, inicialmente onerando um pouco a performance, já que utiliza os recursos da maquina para renderizar a aplicação. Após o primeiro carregamento, a aplicação torna-se extremamente rápida, já que não precisa ser recarregada durante a sua utilização. A partir de então deverão ocorrer apenas requisições com o back-end trazendo as informações que o usuário solicitar utilizando o recurso AJAX. O back-end trará informações para o usuário em formato JSON, e este deverá ser devidamente trabalhado pelo usuário para poder ser exibido. Logo, o usuário é totalmente responsável em formatar as informações entregues pelo servidor Padrão de desenvolvimento MVC O AngularJS é um framework MVC(ou MVW) utilizado para o desenvolvimento de aplicações front-end em JavaScript. O framework AngularJS tem uma estrutura bem definida, que facilita a organização do código, fornece o controle de dependências e conta com o auxílio do Two-Way data Binding nas views do HTML, para o desenvolvimento da aplicação. O Angular traz consigo uma ampla documentação que permite entender as especificações para cada aplicação desenvolvida através da criação de novas tags ou novos atributos em HTML padrão. O ambiente resultante é extraordinariamente expressivo, legível e rápido. O framework é personalizável, permitindo seu uso da maneira mais adequada ao desenvolvimento de sua aplicação [Almendra 2014].

3 4.4. Renderização do lado do cliente (Client-Side Templates) O AngularJS renderiza a página diretamente do navegador do usuário. Enquanto a maioria das aplicações web processam as informações e geram o HTML para ser enviado ao cliente diretamente no servidor, o AngularJS recebe as informações em formato puro, utilizando JSON, onde estas informações vem originais do servidor. A partir de então, o usuário renderiza na tela da sua máquina, as informações que o servidor lhe enviou [Ivisson 2014]. A figura 1 demonstra um script JSON. Figura 1. Exemplo código JSON. A grande vantagem, em utilizar o AngularJS, é que o servidor usará menos recursos por não ser o responsável em processar e formatar as informações a serem exibidas na tela da máquina. Por outro lado o usuário fica encarregado de formatar toda informação, utilizando mais recursos da maquina, por exemplo, se o usuário carregar um JSON de 30 Mega de tamanho ou superior, o navegador do mesmo poderá travar resultando em uma performance indesejada, visto que a aplicação, não responderá Two-way data Binding Utilizando o Two-way data Binding, todas as alterações ocorridas na view(visão ou tela) serão refletidas. As informações e atualizações aparecerão ao cliente em tempo real como um espelho. Na prática, por exemplo, imaginando o campo de um formulário qualquer no qual será digitado o nome do usuário. Conforme a digitação, o Two-way data Binding faz com que a informação seja armazenada em um scope no controller, mostrando ao mesmo tempo para o usuário. O exemplo da figura 2, retrata o Two-way data Binding utilizando a diretiva ngmodel, onde em cada interação feita no elemento input, as informações de entrada são enviadas da view para o scope. Quando o cliente clica no botão Gravar as informações são enviadas para API e atribuídas a um objeto no scope palestrante para enfim limpar o formulário [Almeida 2014] API REST O AngularJS possibilita a utilização de API REST. Este garante que a aplicação poderá ser utilizada para fazer requisições com o servidor. Um exemplo clássico é o emprego do CRUD, onde a partir de um serviço, o AngularJS se comunicará com o back-end enviando as requisições do cliente para o servidor. Como Lycan(2014) afirma: O serviço sem dúvidas é importante em aplicações Angular, principalmente pelo simples fato de poder encadear promises e ser absurdamente simples de utilizar.

4 Figura 2. Exemplo código Two-way data Binding (Fonte: FlavioAlmeida [2014]) Diretivas Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos de forma declarativa [Branas 2014]. Tais extensões darão maior importância a linguagem declarativa elaborada diretamente no HTML. No decorrer deste capítulo, serão demostradas as principais diretivas na Tabela 1. Diretiva ng-app ng-bind ng-click ng-controller ng-disabled ng-hide ng-include ng-init ng-model ng-repeat ng-show ng-hide Tabela 1. Principais Diretivas AngularJS Descrição Define o elemento raiz de um aplicativo. Vincula o innerhtml de elementos HTML para os dados do aplicativo. Define o comportamento quando um elemento é clicado. Define o objeto de controlador para um aplicativo. Habilita ou desabilita um elemento HTML. Oculta ou mostra elementos HTML. Oculta ou mostra elementos HTML. Define os valores iniciais para um aplicativo. Vincula o valor de controles HTML para os dados do aplicativo. Define um modelo para cada dado em uma coleção. Mostra elementos HTML. Oculta elementos HTML. (Fonte: angularjs.org [2016])

5 5. Considerações Finais O AngularJS é um framework em constante atualização. Tem uma comunidade extremamente ativa com as mais variadas soluções para os mais diversos problemas. Atualmente a empresa que detém os direitos do framawork é a Google (empresa multinacional de serviços online e software norte americana) garantindo que dificilmente a tecnologia será descontinuada. O objetivo deste artigo foi destacar os principais aspectos relevantes da tecnologia AngularJS como por exemplo o seu desenvolvimento de aplicações em uma única página utilizando o padrão MVC e o Data Biding. E enfatizou a importância do profissional de informática ter conhecimento básico em JavaScript para melhor lidar com a tecnologia AngularJS. O conteúdo deste artigo foi utilizado ainda para o desenvolvimento de um produto computacional que facilite a venda de produtos na internet. Referências Almeida, F. (2014). Angular 2: o fim do two-way data binding? Caelum. Disponível em: Acessado em: 31/07/2016. Almendra, A. (2014). Arquitetura e desenvolvimento de uma aplicação web distribuída baseada em javascript. UNIVERSIDADE FEDERAL DO ESTADO DO RIO DE JA- NEIRO, (1): Disponível em: Acessado em: 31/07/2016. AngularJS.org (2016). Angularjs: Developer guide. AngularJS.org. Disponível em: Acessado em: 26/08/2016. Branas, R. (2014). AngularJS Essentials. Packt Publishing Ltd, Birmingham. Ivisson, D. e. J. (2014). Creatively parse json data to store it in a sql database. AngularJSuniJorge. Disponível em: Acessado em: 31/07/2016. Khanna, A. (2015). Are you riding the angularjs wave yet? edureka.co. Disponível em: Acessado em: 30/07/2016. Lycan, R. (2015). Angularjs: Consumindo serviços restful. rafaell-lycan.com. Disponível em: Acessado em: 01/08/2016. MindSumo. Creatively parse json data to store it in a sql database. mindsumo.com. Disponível em: Acessado em: 31/07/2016.