3 motivos para você utilizar o AngularJS no seu próximo projeto

Neste post vamos apresentar três razões pelas quais você deve utilizar o AngularJS em seu próximo projeto de aplicação para web.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+. Todos os direitos reservados para Envato.

[su_table]

Link para artigo original: 3 Reasons to Choose AngularJS for Your Next Project
Autor do artigo original: Adam Conrad
Link da Envato para o artigo traduzido: 3 Razões Para Utilizar o AngularJS em seu Próximo Projeto

[/su_table]


O AngularJS é um framework JavaScript relativamente novo, desenvolvido pelo Google com a intenção de tornar o desenvolvimento front-end o mais simples possível. Existem diversos frameworks e plugins disponíveis. Isso pode dificultar a escolha entre ferramentas no meio de tantas.

p>Neste post vamos analisar os principais motivos para você adotar o uso do AngularJS em uma aplicação web.

1 – Ele foi desenvolvido pelo Google

O AngularJS foi criado e é mantido por dedicados engenheiros do Google.

Pode parecer óbvio, mas é importante lembrar que a maioria dos frameworks (não todos) são feitos por hobby de membros das comunidades de desenvolvimento. Enquanto a paixão e determinação cria frameworks como o Cappucino e o Knockout, o AngularJS foi construido e é mantido por dedicados (e muito talentosos) engenheiros do Google. Isso significa que você não tem apenas uma comunidade grande e ativa para aprender a utilizar a ferramenta, tem também engenheiros com conhecimento e dispostos a ajudar, respondendo questões e solucionando falhas no AngularJS.

Não é a primeira vez que o Google apresenta um framework JavaScript; eles primeiro desenvolveram o Web Toolkit, que compila Java para JavaScript, e era muito utilizado pela equipe do Google Wave. Com a evolução do HTML5, CSS3 e JavaScript, além do desenvolvimento front-end, o Google começou a perceber que a web não deve ser escrita apenas com Java.

O AngularJS veio para padronizar a estrutura de desenvolvimento de aplicações para web, fornecendo um template com base nos padrões client-side.

A Versão 1.0 foi lançada a 6 meses atrás (em dezembro de 2012) e era utilizada em algumas aplicações, por hobby ou por necessidade comercial. A adoção do AngularJS como um framework viável para desenvolvimento de aplicações client-side rapidamente ficou conhecida por toda comunidade de desenvolvimento web.

Por ter sido criado pelo Google, você pode ter certeza que vai estar utilizando uma ferramenta eficiente, e com recursos para acompanhar o crescimento de seus projetos. Se você busca um framework com bases sólidas, o AngularJS pode ser o que você procura!

2 – fácil de compreender

Se você já conhece projetos como o QUnit, Mocha ou o Jasmine, você não vai ter problemas para entender a unit-testing API do AngularJS.


O AngularJS, assim como o Backbone ou o JavaScriptMVC, é uma solução completa para um rápido desenvolvimento front-end. Nenhum outro framework ou plugin é necessário para criar aplicações que geram troca de informações. Fizemos uma breve análise dos principais recursos do AngularJS:

  • REST simples e fácil. Ações RESTful rapidamente se tornaram padrões para comunicação entre cliente e servidor. Em uma linha de JavaScript, você consegue de forma rápida se comunicar com o servidor e solicitar as informações necessárias para interagir com a sua página web. O AngularJS transforma o processo em um simples objeto JavaScript, com Modelos, seguindo os padrões MVVM (Model View View-Model).
  • MVVM por favor! Models se comunicam com objetos ViewModel (através do objeto $scope), que acompanham as mudanças nos Models. Essas informações são renderizadas através das Views, que basicamente é o HTML que representa seu código. A rota das views podem ser alteradas utilizando o objeto $routeProvider, você pode organizar suas views e controllers transformando-os em URLs navegáveis. O AngularJS também tem suporte a stateless controllers, que inicializa e controla o objeto $scope.
  • Data Binding e Dependency Injection. Tudo no padrão MVVM é comunicado automaticamente em toda a interface UI não importa a mudança. Isso elimina a necessidade de wrappers, getters/setters ou declaração de classes. O AngularJS suporta tudo isso, você pode apresentar suas informações com JavaScript simples, com arrays por exemplo, ou de forma customizada a gosto. Como tudo funciona automaticamente, você pode requisitar suas dependências como parâmetros através do serviço de funções do AngularJS, ao invés de utilizar uma chamada com o extenso código main().
  • Aprimorando o HTML. A maioria dos websites hoje é uma amontoado de elementos DIV com pouca ou nenhuma semântica. É necessário uma extensa lista de classes CSS para expressar cada objeto presente no DOM. Com o AngularJS você consegue trabalhar o HTML como se fosse um XML, com infinitas possibilidades de tags e atributos. O AngularJS executa essas tarefas através do seu compilador HTML e do uso de directives/diretivas para criar ações com base na sintaxe.
  • O HTML é seu Template. Se você conhece o Mustache ou o Hogan.js, então você já deve conhecer a sintaxe com chaves {{ }} que a template engine do AngularJS utiliza, não passa de HTML puro. O AngularJS atravessa o DOM para esses templates, até as diretivas mencionadas anteriormente. O template então passa pelo compilador do AngularJS como componentes do DOM, ao invés de strings, permitindo manipular e estender as ramificações do DOM.
  • Testes a nível empresarial. Como mencionado anteriormente, o AngularJS não precisa de frameworks ou plugins adicionais, inclusive para testes. Se você conhece ferramentas como o QUnit, o Mocha ou o Jasmine, então você não ter problemas para aprender a utilizar a API de testes do AngularJS (unit-testing API) e a Scenario Runner, que te guia nos testes permitindo simular um ambiente de produção real.

Esses são os principais pontos para criar aplicações eficientes, com performance e de fácil manutenção, utilizando o AngularJS. Se você tiver onde guardar as informações geradas em suas aplicações, o AngularJS pode executar todo processo no navegador do usuário (client-side), enquanto permite uma rica experiência para o usuário final.


3 – Comece a utilizar o AngularJS em minutos

Aprender a utilizar o AngularJS é incrivelmente fácil. Com alguns atributos adicionados ao seu HTML, você pode criar uma aplicação com o AngularJS em cerca de 5 minutos.

  1. Adicione a diretiva ng-app na tag <html> para que o AngularJS opere em toda página:
    <html lang="en" ng-app>
  2. Agora adicione o arquivo que permite a utilização do AngularJS com a tag <script> no fim da tag <head> da sua página:
    <head>
    ...meta tags e estilos...
     <script src="lib/angular/angular.js"></script>
  3. Adicione um pouco de HTML padrão na página. As diretivas do AngularJS são utilizadas através de atributos do código HTML, enquanto expressão são declaradas com chaves {{ }}:
    <body ng-controller="ActivitiesListCtrl">
      <h1>Today's activities</h1>
      <ul>
       <li ng-repeat="activity in activities">
     {{activity.name}}
       </li>
      </ul>
    </body>
    </html>

A diretiva ng-controller configura um nome, onde podemos colocar o framework do AngularJS para manipular informações e expressões no HTML. Ong-repeat é um objeto de repetição do AngularJS, que orienta o AngularJS a criar uma lista de elementos enquanto tem informações para tal, neste caso utilizamos o recurso na tag <li> que vai desempenhar o papel de um “template” para apresentar as informações.

  1. Quando você precisar efetuar requisições no AngularJS, você pode utilizar um arquivo JavaScript com uma função com nome ligado ao controller que você declarou no seu HTML:
function ActivitiesListCtrl($scope) {
  $scope.activities = [
{ "name": "Wake up" },
    { "name": "Brush teeth" },
    { "name": "Shower" },
    { "name": "Have breakfast" },
    { "name": "Go to work" },
    { "name": "Write a Nettuts article" },
    { "name": "Go to the gym" },
    { "name": "Meet friends" },
    { "name": "Go to bed" }
  ];
 }

Como mencionado anteriormente, criamos uma função com o mesmo nome da diretiva ng-controller, assim nossa página consegue encontrar a função correspondente do AngularJS e executar o código trazendo as informações solicitadas. Utilizamos o parâmetro $scope para criar as activities/atividades da lista que declaramos anteriormente no HTML. Em seguida criamos um conjuntos de atividades com a chave name, que corresponde a propriedade name que criamos com chaves duplas {{ }}, e uma valor, que é uma string que representa as atividades que precisamos cumprir.

  1. A aplicação está pronta, mas parece que algo está faltando. A maioria das aplicações para web salvam informações em banco de dados remoto. Se você utiliza um servidor remoto, você pode substituir o parâmetro no array/laço por uma chamada da AJAX API do AngularJS:
function ActivitiesListCtrl($scope) {
  $http.get('activities/list.json').success(function (data) {
$scope.activities = data;
  }
}

Nós simplesmente substituímos o objeto de um array/laço nativo no JavaScript por uma função HTTP GET, graças a API do AngularJS. Utilizamos o nome do arquivo que precisamos do servidor (neste caso, um arquivo JSON com activities/atividades) e retornamos uma promise através do AngularJS, parecido com a promise padrão do jQuery.

Mais informações sobre promise no jQuery no Nettuts+.

Essa promise executa com sucesso nossa função ao retornar a informação e tudo que você precisa fazer é vincular a informação com as atividades/activities, que analisamos anteriormente e funcionam com base em dependency injection, através do parametro $scope.

Uma lista do que fazer (to-do list) estática é bacana, mas o verdadeiro poder está na facilidade de manipular informações na página sem precisar utilizar um punhado de funções JavaScript para requisitar informações e interagir com o usuário. Imagine que precisamos apresentar a lista em ordem alfabética. Bom, neste caso adicionamos uma caixa de opções drop down para permitir que o usuário veja a lista:

<h3>Sort:</h3>
<select>
   <option value="name">Alphabetically</option>
 </select>

Adicione a diretiva model a caixa drop down:

<select ng-model="sortModel">

E então, modificamos a tag <li> adicionando o parâmetro orderBy para que ela reconheça o sortModel, como uma forma de ordenar os itens da lista:

<li ng-repeat="activity in activities | orderBy: sortModel">

Todo processamento é feito através do AngularJS.

É isso galera! O segrego é o filtro que declaramos na diretiva ng-repeat no elemento de lista. O filtro orderBy pega uma array/laço (lembra da lista de atividades?), copia, e reorganiza a copia de acordo com a propriedade declarada na tag select. Não é coincidência o valor do atributo da tag option ter o mesmo nome que declaramos no nosso arquivo JSON como propriedade de uma activity/atividade. É isso que permite que o AngularJS transforme um simples valor HTML em uma poderosa palavra chave para ordenar atividades no template.

Note que não utilizamos listener events para as interações do usuário. Nosso código não é divido entre callbacks e event handlers para interagir com objetos que clicamos, selecionamos, tocamos ou qualquer outra ação de interação do usuário. Todo levantamento é muito bem feito pelo AngularJS ao encontrar a função do controller, criar a dependência entre o template e o controller, e separar as informações para serem exibidas na tela.

O AngularJS fornece um tutorial bem completo junto a sua documentação, que cria uma aplicação bem similar e com mais recursos, em questão de minutos!


Conclusão

O AngularJS está rapidamente se tornando o principal framework JavaScript para desenvolvimento Web.

O AngularJS está rapidamente se tornando o principal framework JavaScript para desenvolvimento Web.

  • Nós analisamos com o Google se interessou em desenvolver um framework para aproveitar melhor o HTML.
  • Analisamos os principais recursos que tornam o AngularJS atraente.
  • E finalmente, desenvolvemos uma demonstração dinâmica e funcional em questão de minutos para demonstrar como é realmente fácil transformar quase nada em uma aplicação de verdade.

Se você procura por um framework parrudo, e em constante atualização, para qualquer tipo de projeto, recomendo que você de uma olhada no AngularJS. Ele pode ser baixado gratuitamente no site do framework AngularJS.org, que também conta com uma série de informações, incluindo documentação completa da API, com diversos tutoriais focados no desenvolvimento front-end. Boa sorte!