domingo, 3 de dezembro de 2017

Projetando aplicações angulares - AngularJS 1.x

Olá ! Meu nome é João Paulo Maida e bem-vindos ao blog Preciso Estudar Sempre.

Em um mundo de constante evolução e velocidade é necessário saber mudar e se adaptar. Tais características se tornaram decisivas nossas vidas profissionais, e assim como é o mercado de trabalho, também é a vida dos sistemas web. A vinte anos atrás o acesso a internet era raríssimo, era considerado privilégio e os sites eram escassos. Dez anos depois, a internet já era uma realidade assim como a banda larga, jogar e ver vídeos já era possível.

A construção de software voltado para a web também teve uma mudança absurda. A um tempo atrás desenvolver uma aplicação simples com algumas operações requeria uma certa quantidade de páginas HTML, alguns controladores implementados em uma linguagem de programação, usava alguns frameworks e um pouco de JavaScript para controlar o DOM. Se você fosse um cara bom, aprendia até JQuery e fazia a “roda rodar” mais rápida. Mas hoje, isso morreu e porque ?

Como eu disse no início do post, o mundo muda toda hora. Tudo o que tínhamos como idéia de desenvolvimento voltado para web era algo que levava muito tempo. Agora, queremos aplicações velozes, responsivas, fáceis de integrar com outros componentes, leves, multi-plataformas e testáveis. Como atingir tudo isso com velocidade ?

Eis que um novo tipo de aplicações surge: as Single Page Applications. Este novo tipo define que aplicações terão somente uma página aparente ao invés ao invés de várias, como as que conhecíamos até o momento usavam. Quando uso o termo aparente, me refiro a experiência do usuário. Ele terá a impressão de que está em uma única página, assim como são os aplicativos mobile e as aplicações desktop que possuem praticamente uma tela única. Obviamente sabemos que internamente existem várias páginas interagindo e manipulando conteúdo, e é aí que entra uma característica muito forte deste novo tipo, o uso em massa de requisições assíncronas.

Evidentemente estamos falando de AJAX e a esta altura do campeonato esta técnica não é mais uma surpresa. Através deste recurso é possível passar a ideia de que existe somente uma única página responsável por tudo, mas na verdade são várias requisições assíncronas sendo feitas, via JavaScript, para obter conteúdo, trabalhando em conjunto com outras páginas. A consequência disso é um não carregamento total da página, como já conhecido na requisições síncronas, provendo assim uma experiência melhor e uso mais fluido para o usuário. Agora não há mais necessidade de que o usuário tenha que pausar por completo o seu trabalho, pois enquanto um recurso é carregado ele pode executar outras tarefas.

Uma outra característica bem marcante das SPAs é o uso intenso de JavaScript, e isto pode ser justificado pela modernidade dos browsers lançados atualmente e pelo aumento da oportunidade de acesso à internet nos últimos anos. O primeiro fenômeno resulta em um maior poderio de processamento da linguagem, e com uma linguagem mais veloz o interesse em se apoiar mais nela para o desenvolvimento de sistemas aumenta, onde tudo isto é causado pela demanda crescente de acesso à internet. Lembre-se: a primeira porta de entrada para a rede mundial de computadores é um navegador.

Devemos considerar também que o cenário desta linguagem mudou bastante desde de sua concepção. Como já citado acima, antigamente era somente usada para validações de formulário e manipulações do DOM, mas hoje em dia o leque de opções foi expandido devido às inúmeras criações de toda uma comunidade de usuários interessados em recursos mais poderosos e à própria modernização da linguagem.

Uma dessas criações foi a concepção de frameworks, como o AngularJS, que mudam a forma de se construir aplicações para a web e dão vida às Single Page Applications. Este framework possui características bem marcantes como o uso do padrão de projeto MVC como pilar, a incorporação de diversos paradigmas e padrões de projeto, componentização, o alto foco em reuso de código, contextos e um data-binding espetacular. O projeto atualmente tem o suporte da Google, o que lhe dá uma ótima visibilidade para o mercado.


Abaixo temos um exemplo bem simples de uma aplicação AngularJS, que traz conceitos primordiais sobre o funcionamento do framework e analisaremos parte por parte dela para que não façamos confusão.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="pt" ng-app>
    <head>
        <meta charset="utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
        
        <!-- Angular v1.6.6 -->
        <script src="angular/angular.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Minha Primeira Aplicação em AngularJS</h2>
            <div class="form-group">
                <label for="nome">Seu nome aqui:</label>
                <input id="nome" ng-model="nome" type="text" class="form-control" />
            </div>
            <div class="form-group">
                Meu nome é: {{nome}}
            </div>
        </div>
    </body>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</html>

O primeiro ponto que deve causar um impacto ao ser visto é o ng-app na tag <html>, após o doctype. O que seria ? Um novo atributo do HTML5 ? Não, meus amigos. Isto é tão pouco pertence ao HTML5 quanto é um atributo, isto na verdade, é uma diretiva, ou em inglês directive, do AngularJS. Impressionante, não ?!

Uma diretiva é uma forma de demarcação de limites de um contexto. Pondo em palavras mais claras, o Angular precisa definir um contexto raiz para criar sua árvore de contextos. Entenda um contexto como uma área de memória. Então, a partir do momento que assinalamos nossa tag <html> com esta diretiva, estamos dizendo ao Angular para marcar esta tag como o elemento raiz da nossa aplicação. Isto nos dá a liberdade de marcar qualquer tag ou a página toda como raiz da aplicação.

Na linha 9 fazemos o import do AngularJS. No exemplo desta postagem estamos utilizando a versão 1.6, mas nada impede que você utilize uma versão mais antiga que esta para aprender os conceitos que estamos discutindo aqui. A partir do momento em que o arquivo é carregado, um callback é registrado para ser executado quando o HTML for carregado por completo. Quando executado, o AngularJS varre a árvore de elementos do DOM à procura da diretiva ng-app. Caso encontre, ele inicializará a aplicação definindo aquele elemento como a raiz.

Dê uma olhada mais abaixo e vá para a linha 16. Mais uma diretiva do AngularJS. Um dos conceitos principais que já vimos acima é o data-binding que o AngularJS realiza. Mas o que seria data-binding ? Traduzindo ao pé da letra, data-binding significaria ligação ou conexão de dados, e é realmente isso que o AngularJS faz. Quando você estabelece uma diretiva ngModel em algum campo HTML de entrada de dados (<input>, <select>, etc.), o AngularJS em tempo de carregamento da página conecta o valor do campo de entrada, no nosso caso um <input>, à uma variável de modelo com o nome especificado dentro da diretiva ngModel e assim mantém os dois em sincronia.

Mas, calma aí, não especificamos nenhuma variável de modelo via JavaScript, como ele realiza essa conexão e mantém essa sincronia ? Ele realiza isso de forma interna, sem que você explicite. Obviamente, que em postagens posteriores veremos como criar controladores via AngularJS e nossas variáveis de modelo, mas agora nos prenderemos ao simples. Essa sincronia é conhecida como two-way data-binding, pois ela é uma via de mão dupla, ou seja, possui dois sentidos. O primeiro sentido já vimos, está na linha 16 e a segunda via está na linha 19.

Imagino que nesse momento mais uma dúvida surja porque o que aquelas chaves estão fazendo lá ? Esta é mais uma característica do AngularJS, conhecida como double-curly binding, e é o segundo sentido de que havíamos conversado. Em suma, representam a outra ponta do two-way data-binding e tornam a sincronia possível. Também aceitam expressões nos moldes JavaScript, que são avaliadas pelo AngularJS e tem seu resultado inserido no DOM. Então, no nosso exemplo, a partir do momento que alterarmos o valor da caixa de texto, uma atualização será feita e exibida abaixo, sem a necessidade de que tenhamos que nos preocupar com isso.

Por último temos que entender como os escopos do AngularJS funcionam porque isso será de grande importância quando você estiver construindo suas próprias aplicações. Existem três coisas muito importantes que acontecem durante a inicialização do AngularJS, são elas:

  • O injetor ou injector usado para a injeção de dependências é criado.
  • O injector criará o escopo raiz da aplicação que se tornará o contexto para o modelo da sua aplicação.
  • O AngularJS irá então compilar o DOM começando no elemento raiz marcado com ngApp, processando quaisquer diretivas e conexão de dados (data-binding) encontradas no caminho.
Uma vez que a aplicação foi inicializada, ela irá então esperar por eventos inesperados do browser que podem mudar o modelo. Uma vez que o evento ocorra, o AngularJS detecta se ele causou alguma mudança no modelo e se alguma mudança for encontrada, o AngularJS irá refletir ela na camada de visão através da atualização de todas as conexões feitas.

De fato, utilizar este framework para o desenvolvimento de SPAs é um fator que torna o processo de construção de um sistema bem veloz, pois como vimos com este simples exemplo, é possível fazer bastante com pouco. Porém, sua curva de aprendizado é bem pesada pois além de trabalhar com diversos padrões de projeto, como factory, injeção de dependências, inversão de controle, MVC, e etc., ele lida com invocações de web services, componentização, entre outros. Então, meu conselho para você que não tem esses conhecimentos tão amadurecidos na sua cabeça é, estude primeiro a teoria para não sair por aí construindo Frankensteins que irão te perseguir até o seu túmulo.

Evidentemente que eu dei uma limpada nos detalhes do framework, mas se eu trouxesse todos eles, a leitura se tornaria impraticável. Por tal motivo recomendo, uma leitura no guia de desenvolvimento ou no roteiro da API.

Como vocês já sabem, todos os links de referências e de download do projeto estão abaixo. 

Até a próxima minha boa gente ! 😘


Dúvidas !? Sugestões ?! Críticas ou elogios ?!

Deixe aí nos comentários, envie um e-mail ou uma mensagem na nossa página do Facebook.

Download no GoogleDrive: clique aqui
Download no Dropbox:

E-mail: precisoestudarsempre@gmail.com
Facebook: https://www.facebook.com/precisoestudarsempre/

Referências:

Nenhum comentário: