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.
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.
- Single Page Applications e outras maravilhas da web moderna - https://imasters.com.br/desenvolvimento/single-page-applications-e-outras-maravilhas-da-web-moderna/?trace=1519021197
- Single Page Applications - https://www.codeschool.com/beginners-guide-to-web-development/single-page-applications
- Tutorial AngularJS - https://docs.angularjs.org/tutorial/
- Guia de desenvolvimento AngularJS - https://docs.angularjs.org/guide
- Documentação AngularJS - https://docs.angularjs.org/api
Nenhum comentário:
Postar um comentário