Conheça o AngularJS, novo aliado do Fusion Platform - Neomind
Por Fábio Haertel13/07/2016 em Inovação & TI, Deixe um comentário
A introdução do framework AngularJS ao Fusion Platform oferece vantagens aos desenvolvedores e abre portas a novos mercados para este sistema que já vem apresentando resultados surpreendentes na gestão integrada de processos, documentos e indicadores para obtenção de soluções mais ágeis e assertivas para as empresas.
Um dos principais pontos melhorados foi o desenvolvimento da aplicação, que passou a ser mais elegante e estruturado, com menos linhas de código, passível de testes e compatível com outros frameworks emergentes, agregando também mais valor de mercado ao produto. Do ponto de vista comercial, a introdução do Angular JS foi responsável pela modernização do Fusion, trazendo o produto a um patamar mais elevado. Confira abaixo as cinco principais características do AngularJS que contribuem para a sua utilização no Fusion:
Organização dos componentes de forma hierárquica e independente
A organização hierárquica de uma aplicação AngularJS é prevista em documentação, e os desenvolvedores podem optar por seguir as boas práticas de programação. Foi escolhida uma configuração de pastas relacionada ao modelo de camadas do AngularJS, que é baseado no MVC e permite a separação de conceitos (separation of concerns) de uma aplicação web.
root/ # diretório raíz.
app.js # js do módulo principal da aplicação.
….assets/ # componentes javascript não relacionados à aplicação Angular (ex. jquery).
….common/….css/ # serviços e diretivas compartilhados por toda a aplicação Angular.# folhas de estilo
….controllers/….services/….directives/….filters/….tpl/
# controllers, serviços, diretivas, filtros e templates html.
Através desta configuração, cada conceito da aplicação Angular é disposto em pastas diferentes. Por exemplo, todos os arquivos HTML (interfaces) estão presentes na pasta tpl, enquanto todos os serviços (comunicação com o servidor) ficam na pasta services. Estes conceitos, quando separados, permitem o desenvolvimento independente dos componentes da aplicação.
Programação reativa através do conceito de Two way data-binding
O paradigma da programação reativa pode ser explicado da seguinte maneira: imagine um documento Excel contendo diversas células. A alteração no valor de uma célula pode refletir no valor de outra, sem que a pessoa a altere explicitamente. O AngularJS é um framework reativo. Qualquer alteração em tela, como por exemplo, o preenchimento de um campo texto, reflete no modelo javascript subjacente que contém as informações da tela, sem que o programador precise "codificar" esta alteração.
Figura1 – Reatividade no AngularJS
Qualquer alteração realizada no campo texto é refletida no modelo Javascript, e vice-versa (Two way data-binding). Esta característica proporciona ganhos de produtividade e redução do número de linhas de código, pois o AngularJS fica responsável pela sincronia dos dados da aplicação, assim como o Excel é responsável pela alteração automática do valor de uma célula.
No AngularJS, os templates HTML são arquivos que podem ser anexados a qualquer parte da aplicação e garantem o reuso de componentes. Um designer pode, por exemplo, definir um arquivo HTML contendo um formulário, e disponibilizá-lo para todos os pontos da aplicação que necessitem de um.
A grande vantagem desta abordagem é a criação de um trabalho conjunto envolvendo designers e desenvolvedores. Enquanto os designers criam os templates, os desenvolvedores podem utilizá-los de acordo com suas necessidades. O Fusion utiliza o framework Bootstrap como suporte ao desenvolvimento de componentes reutilizáveis.
O AngularJS utiliza o conceito de MVC (Model-View-Controller), que é caracterizado por:
MODEL: Camada de negócios, responsável pela lógica dos dados da aplicação.
VIEW: Responsável pela visualização dos dados da aplicação.
CONTROLLER: Controla a interação com o usuário. Comunica-se com a view e o model.
A arquitetura MVC permite que cada aspecto da aplicação web seja analisado separadamente. É permitido, por exemplo, desenvolver o layout da aplicação (view) sem ter conhecimento do modelo (dados) da aplicação. Isto torna possível, por exemplo, a separação entre desenvolvedores front e back-end. Enquanto os primeiros desenvolvem a interface (view), os últimos se preocupam com a lógica dos dados (model), sem ter conhecimento da interface. Isto gera um senso de independência entre os desenvolvedores e possibilita a contratação de pessoas especializadas em áreas específicas.
A comunicação entre o navegador web e o servidor da aplicação é realizada pelo AngularJS através do padrão REST. Esta arquitetura estabelece padrões na utilização do protocolo HTTP e define, por exemplo, que o comando PUT deve ser utilizado para enviar um recurso ao servidor e DELETE para removê-lo. Antes da utilização do AngularJS, o Fusion utilizava o conceito de servlets para realizar a comunicação cliente-servidor. Este conceito não enfatiza os mesmos padrões do REST e por isso torna-se inferior ao analisar-se a aplicação do ponto de vista organizacional. Outra característica do padrão REST é permitir que as interfaces sejam chamadas de forma isolada. Normalmente, um serviço REST é acessado através de uma URL, exemplo: http://192.168.1.25:80/app/rest/getusers. O retorno deste serviço – neste exemplo, uma listagem de usuários (getusers), pode ser anexado a qualquer parte da aplicação, basta chamar a URL.
Figura 2 – Chamada da interface pela URL
A facilidade que o AngularJS trouxe para o Fusion Platform é mais um dos vários motivos para você conhecer e implantar este sistema em sua empresa, levando mais praticidade e inteligência à gestão integrada de processos, documentos e indicadores.