Angular JS
Uma necessidade em constante mudança
O avanço da relevância das informações e processamento de dados na internet tem crescido exponencialmente na última década a ponto de hoje ser pouca a necessidade de instalações de softwares para desktop em computadores pessoais (e mesmo estes em sua maioria necessitam de acesso à internet).
O padrão atual é disponibilizar os serviços para serem acessados pelos navegadores de internet ou via aplicativos em dispositivos móveis, com grande parte do processamento em servidores remotos. E, ao longo destes últimos anos, tem se evoluído continuamente os meios de tornar o protocolo consolidado da internet mais amplamente utilizado baseado em envio de documentos estáticos para algo mais flexível e dinâmico.
O framework AngularJS
Entre as mais recentes implementações com este objetivo está o AngularJS. Este é um framework baseado em javascript que, através de pouca codificação, estende o formato estático HTML com opções mais ricas de interfaces encontradas em softwares desktop. A pouca codificação é pelo fato do framework implementar o padrão de design MVC e incluir comportamentos a mais ao arquivo HTML de forma declarativa. Ou seja, a adição de novos comportamentos aos elementos HTML é feito através de implementação de novos atributos, tags e classes de estilo.
Esta abordagem difere da tecnologia jQuery, com a qual costuma ser mais comparada, por esta adicionar comportamentos aos elementos da página de forma programática. Apesar do jQuery já possuir um conjunto de funções que simplificam implementação de ações dinâmicas, como chamadas AJAX e animações, ainda é necessário codificação considerável quando se necessita varrer elementos específicos da página.
jQuery vs AngularJS
Na verdade, não é uma questão de comparar qual tecnologia é melhor, mas qual é mais indicada de acordo com a natureza do projeto. De fato, o jQuery é uma biblioteca, enquanto que o AngularJS é um framework. Enquanto aquele é mais usado para incluir alguma funcionalidade específica na aplicação (e, de fato, já existe uma vasta disponibilidade de componentes prontos na internet pelo tempo de presença no mercado e na maioria das aplicações Web), este é útil para se basear todo o esqueleto de um novo projeto por ser um framework. Por isto, ele já define regras e padrões para a implementação como um todo. Apesar da abrangência do jQuery ser maior, o AngularJS tem a confiabilidade de ser uma iniciativa hoje pertencente à gigante Google e ainda contar com as vantagens do jQuery porque sua engine javascript é baseada em uma versão menor com as APIs mais comumente usadas desta, chamada JQLite. A documentação oficial do AngularJS o indica mais para aplicações CRUD. Para casos em que se necessita uma manipulação mais complexa de elementos DOM, mais dinâmica e com resposta mais rápida, jQuery ainda é uma melhor aposta.
Como dita o padrão MVC, o AngularJS propõe interferir o mínimo na parte de visualização além do padrão já utilizado para a apresentação. O modelo com os dados da apresentação é implementado através de objetos chamados scope. Um objeto scope internamente mapeia um ou mais elementos DOM da página HTML para que possam ser manipulados dentro da arquitetura MVC do AngularJS. Como sendo um objeto javascript, uma página pode ter mais de um scope representando seus elementos onde um scope tem acesso a outros através de prototipagem. A imagem abaixo ilustra o conceito:
Esta imagem também mostra uma das formas como é feita a ligação da apresentação com o modelo: através das chamadas diretivas. No caso a diretiva ng-controller indica o controle que gerencia o comportamento estendido do scope em questão. Cada scope é visível apenas ao seu respectivo controle, com exceção do scope que representa toda aplicação (o rootScope). ng-repeat aponta para um membro do modelo que é uma coleção que irá ser exibida como uma lista. Então, de uma forma declarativa são incluídas funcionalidades dinamicamente a ações do usuário na página. O AngularJS já disponibiliza diretivas que estendem ações padrões do javascript como ng-click, ng-change, etc.
As diretivas podem ser atributos HTML, como no exemplo, novas tags ou classes de estilo. Isto torna fácil para a equipe de design, pois retira a codificação da apresentação e a apresenta de uma forma à qual já estão habituados. A resposta dinâmica às ações é garantida pela propriedade do atribuição em duplo sentido do framework entre o modelo (scope) e sua respectiva apresentação na página. Isso significa que alterações feitas pelo usuário na apresentação se refletem instantaneamente no scope, assim como mudanças em valores do scope no controle, como um dado do banco de dados que é atribuído a um campo do modelo, são alterados na apresentação sem que esta seja carregada toda novamente. As alterações são gerenciadas de acordo com a arquitetura representada abaixo:
Um ciclo contínuo “observa” qualquer alteração na apresentação pertinente ao scope, sincroniza no controle para devido processamento e aplica de volta na apresentação o resultado que a alteração inicial tenha causado. Este ciclo é uma modificação do fluxo de eventos padrão do javascript. Aqui vale ressaltar a importância de se ter a apresentação dividida em vários scopes. Um HTML pode conter centenas de objetos DOM e o ciclo da arquitetura observando todos estes pode tornar o processo custoso.
Diretivas customizadas
Além das diretivas pré-definidas, é possível criar diretivas específicas para o projeto pela sintaxe:
angular.module('moduloExemplo', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myTag', function() {
return {
restrict: 'E',
transclude: false,
scope: {},
templateUrl: 'my-Tag.html',
link: function (scope) {
scope.name = 'Jeff';
}
};
});
A função de criar diretiva retorna um objeto com as propriedades restrict, que define que tipo de diretiva será (E = elemento, A = atributo, C = classe de estilo e M = comentário); transclude que diz se a diretiva enxergará o scope pai à qual pertence (cada diretiva é isolada em seu próprio scope por padrão); Scope onde se pode definir propriedades visíveis no scope desta; templateUrl que pode ser usado para definir uma página padrão que o navegador ou aplicação irá substituir cada vez que encontrar a diretiva na página; link define a função que implementa o comportamento que queremos estender na página. O exemplo acima permite que se construa um HTML assim:
<div ng-controller="Controller">
<my-tag>Check out the contents, {{name}}!</my-tag>
</div>
Um navegador ou aplicação que ler este HTML vai entender a nova tag e irá imprimir:
Check out the contents, Jeff!
O exemplo acima apresenta a outra forma de atribuição dinâmica do AngularJS que é através de expressões, que são delimitadas por chaves duplas ({{ }}). São expressões válidas avaliadas pela página: as matemáticas diretas, variáveis e funções do scope.
Controles e Serviços
Desenvolvedores também se beneficiam da adoção do padrão MVC pelo AngularJS ao se ter a codificação da camada de negócio nos objetos de controle. Isto facilita o teste do código ao desacoplar cada módulo da necessidade de requisições reais. Os controles são objetos javascript que são construídos e ligados ao respectivo scope. Nele é iniciado as propriedades do scope e funções que adicionam comportamento a este. Geralmente há pouco código nos controles. Apenas para iniciar o scope e funções de adicionar comportamentos a este. O framework oferece mais uma opção de modularização do código através de objetos de serviço. A implementação de um serviço específico pode então ser invocado de um controle através de injeção de dependência. Componentes como serviços, diretivas e filtros no AngularJS são referenciados por injeção de dependência e a sintaxe de invocação é a chamada destes via parâmetro do construtor do componente que irá utilizá-lo.
O construtor de um controle, por exemplo tem a sintaxe:
someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
...
}
...
}]);
Então, o construtor do controle tem como parâmetro um array dos componentes que irá utilizar e a função que o define, passando estes mesmo componentes como parâmetros, respeitando a ordem no array.
Através da injeção de dependência o AngularJS usufrui das propriedades de lazy loading dos componentes injetados e de estes serem singletons.
A clareza de implementação e o suporte que o AngularJS tem da Google e comunidade de desenvolvedores encorajaram novos frameworks para desenvolvimentos web mais modernos e específicos baseados em sua implementação surgissem.
Entre eles, estão frameworks voltados a desenvolvimento de aplicativos móveis como o Ionic, Supersonic (estes dois com o suporte de desenvolvimento híbrido compatível com os principais sistemas operacionais de dispositivos móveis) e Mobile Angular UI; iniciativas que oferecem componentes pré-definidos baseados em AngularJS como o Angular UI Bootstrap e o Angular UI Grid; e outros voltados para páginas Web como o Suave UI.
Angular 2
O acompanhamento do desenvolvimento Web com padrões e linguagens mais modernas levou à necessidade de uma relevante atualização do AngularJS que é o Angular 2. Este é, de fato, uma implementação de framework totalmente nova em relação ao 1.X. Apesar de todas as vantagens do AngularJS, a verdade é que este já possui 6 anos de estrada. E de lá muito mudou no ambiente Web e dispositivos móveis. Estes últimos estão presentes nos dias de hoje de uma forma como não estavam há 6 anos. Por isso, o AngularJS teve foco maior em páginas Web. Logo, este não leva em conta cache e roteamento de páginas para este ambiente de dispositivos móveis (algo que é complementado pelos frameworks para dispositivos móveis baseados citados acima).
O próprio ambiente de aplicações Web passou por profundas mudanças neste período. Novo padrão de script web que o javascript segue foi lançado no último (ES6) e os navegadores mais populares começam a implementar esta especificação. Estes também fizeram grande esforço para otimizar e padronizar a estruturação dos elementos DOM que permitem designs mais cross-browser.
Além disso, os navegadores começaram a dar suporte nativo a componentes customizados nativos a serem utilizados adicionalmente aos elementos padrões conhecidos HTML. A versão 1.X do AngularJS espera apenas pelos componentes padrões.
Logo, apesar de ser uma boa opção, o AngularJS estava correndo o risco de se tornar obsoleto por não reconhecer os novos padrões adotados.
Na verdade, o AngularJS 1.X é um framework pensado inicialmente para equipes de design, que poderiam criar novos componentes de visualização seguindo a mesma linguagem declarativa a que estavam habituados. A implementação do framework completo MVC veio depois. Isto significa que funcionalidades foram sendo adicionados a um projeto que tinha um escopo menor. O que causa problemas de performance. Por isso, no Angular 2 decidiu-se por um framework do zero, já baseado na mais recente especificação de javascript, com melhor performance e definição de componentes mais flexível.
Conclusão
Apesar de a maioria das páginas Web utilizarem jQuery, Angular tem ganhado cada vez mais adeptos por sua simplicidade, definição de um framework para todo o projeto e uma comunidade que, ao apostar em sua atualização, demonstra acreditar no seu crescimento com um suporte consolidado.
Comentários