AngularJS: O que é e porquê utilizar

A web tem evoluído exponencialmente na última década. Passamos de brutamontes que utilizavam centenas de linhas de código e diversos page loads para fazer um bom formulário em etapas a seres iluminados que podem obter o mesmo efeito com apenas alguns comandos e sem recarregar a página uma vez sequer.

Em meio a toda essa revolução está o queridinho dos desenvolvedores web da atualidade: o AngularJS ou, Angular para os íntimos. Descrito por seus criadores como um framework JavaScript supereróico, ele trouxe um novo conceito de desenvolvimento front-end e deu início a nova era dos web apps.

Mas o que é AngularJS? É produtivo? É difícil aprender?

Continue lendo esse artigo, porque essas e outras perguntas serão respondidas agora.

O que é AngularJS?

A premissa do Angular é ser um Framework MV* (Model – View – Qualquer Coisa) para desenvolvimento do front-end de aplicações web, ou seja, que rodam dentro do navegador do cliente.

Sua filosofia parte de que uma programação declarativa é muito mais importante que uma programação imperativa quando se trata de desenvolvimento web. Ele atinge isso estendendo o HTML e fazendo uma linguagem para o desenvolvimento de interfaces web dinâmicas.

By Google with ♥

Muitos frameworks são desenvolvidos por pessoas talentosas apaixonadas pelo que fazem, o que nos dá sistemas maravilhosos e muito gostosos de usar. Agora, como deve ser um framework feito por um time inteiro de pessoas talentosas, apaixonadas pelo que fazem e que ainda recebem uma quantia considerável de dinheiro para evoluir o projeto?

O Angular foi desenvolvido por um analista do Google e adotado e incubado pela Gigante de Mountain View. Eles mesmos já o estão usando em mais de 1600 projetos internos.

Comunidade Sólida

As métricas do Angular são impressionantes e refletem a imensa aceitação dele pela comunidade.

O Repositório do Angular no GitHub tem 49 mil estrelas e mais de mil contribuintes, além de mais que 150 mil repositórios com scripts que utilizam a tecnologia.

No Stack Overflow, a maior comunidade de perguntas e respostas do mundo, temos quase 180 mil perguntas. Caso o interesse seja em vídeos sobre o assunto, o YouTube nos dá uma marca impressionante de 470 mil vídeos.

O interesse da comunidade tem subido exponencialmente nos últimos anos, como mostra este gráfico de pesquisas do Google:

Produtividade

O desenvolvimento nessa era das startups deixou de ser um projeto estático de escopo fechado e passou a uma metodologia dinâmica, que sempre se renova. Esse tipo de aproximação demanda uma velocidade muito grande no desenvolvimento.

Como foi concebido nessa era, o Angular segue muito bem o mantra da produtividade. Por ser orientado a componentes, é muito rápido e fácil programar com ele.

Praticamente qualquer coisa que se precisa já tem pronta por aí nos milhares de repositórios do GitHub. Existe inclusive um site que reúne mais de 2000 módulos open-source para facilitar a busca: o ngModules.

Como explicado no início, o sistema de template do Angular estende o HTML deixando a programação de interfaces muito mais fácil. Veja o que se pode fazer sem nem uma linha de JavaScript:

Começando com o AngularJS

No mundo front-end, o AngularJS é o queridinho do momento. As empresas finalmente acordaram e agora vemos uma chuva de vagas para desenvolvedores com conhecimentos em angular.

Para te ajudar a se inserir nesse mercado, preparei pra você uma introdução do AngularJS para que você dê seus primeiros passos nessa tecnologia.

Baixe o código-fonte do projeto dessa videoaula.

Estendendo o HTML com as directives do Angular

O HTML foi criado para ser uma linguagem de marcação onde poderíamos fornecer ao navegador um contexto em relação ao conteúdo apresentado numa página fazendo com que, assim, tudo fosse renderizado da melhor maneira.

Essa visão declarativa da programação inspirou os desenvolvedores do AngularJS que decidiram aplicar a filosofia do “o que é bom pode ficar ainda melhor”, estendendo o HTML para algo a mais.

Assim surgiram as diretivas, uma extensão do HTML que faz marcações que permitem ao Angular alterar a página dinamicamente de uma maneira declarativa.

Neste video você vai entender melhor sobre esse assunto e ainda aprender a fazer a sua própria diretiva.

Baixe o código-fonte do projeto dessa videoaula.

Angular 2: Vale a pena migrar agora?

ue o AngularJS é o queridinho do momento no mundo do desenvolvimento front-end, não tem como negar. Entretanto, vários desenvolvedores estão passando um por um dilema nos últimos dias: Migrar ou não migrar logo pro Angular 2?

Imagina que você está feliz em 2012 com o seu iPhone 4S que você acabou de comprar. Um belo de um smartphone. Você aproveita e compra também alguns mimos, como uma estação de som pra ouvir música em casa e um pro carro também.

Você passa alguns meses bem feliz até que chega o anúncio da Apple sobre o iPhone 5 com seu novo conector lightning dentre outras diversas melhorias.

O que fazer agora? Correr e entrar na fila de pré-venda do iPhone 5 e aproveitar tudo que ele tem de bom pra oferecer?

Mas e seus docks de casa e do carro que só servem com o conector antigo? Ainda nem tem tantos acessórios pro 5… e seu iPhone 4 vai demorar um bocado pra ficar defasado. O que fazer?

Quando se trata desse tipo de decisão, existem diversos motivos pelos dois lados. Neste artigo vou buscar apresentar os dois lados da migração pro Angular 2, e aí fica a seu critério decidir em qual dos motivos você mais se identifica.

Por que não migrar?

Os que preferem não migrar agora são aqueles que utilizam a tecnologia em ambientes empresariais onde agilidade e confiabilidade são fatores muito importantes. É preciso de um sistema sólido e fácil para desenvolver.

Sendo assim, seguem alguns motivos pelo qual não se deve migrar:

1. Ainda não está pronta

O Angular 2 ainda está em desenvolvimento. No momento da publicação deste artigo ele ainda estava em Release Candidate.

Isso quer dizer que o sistema precisa amadurecer um pouco mais. Ele precisa ser testado em casos reais e ainda tem bastante água pra correr. O próprio Angular 1.x só começou a ficar mais maduro a partir de sua versão 1.3.x.

2. Não é um update. É um novo sistema

No mundo “evergreen” em que estamos vivendo, queremos sempre ter a versão mais atualizada de tudo o que pudermos tocar as mãos.

Com o Angular não é diferente. Ao vermos o 2.0 sendo anunciado e percebermos que estamos usando uma versão 1.x, temos o instinto de correr atrás da “atualização”.

Acontece que essa não é uma atualização. Quase tudo mudou! Desde sua filosofia até como você inclui os componentes.

Algumas coisas até permaneceram, como a sintaxe do template HTML, que é bem parecida, e as diretivas/componentes para modificar a DOM.

Se você acredita que pode pegar seu app atual e passar pra Angular 2 com apenas algumas adaptações, se enganou. As adaptações necessárias são tantas que você, praticamente, estará reescrevendo sua aplicação.

3. A curva de aprendizado é ruim

Não é só aprender um sistema novo. Pra trabalhar com Angular 2 você precisa aprender uma nova “linguagem”: o TypeScript.

Sim, tem uma maneira de usar o Angular 2 só com JavaScript, mas não existe ainda nem uma documentação pra te ajudar nesse processo, nem mesmo no site oficial (ok, até tem, mas o máximo que elas te ensinam é como fazer um “Hello World”).

Cursos e palestras sobre Angular 2 sempre ensinam com TypeScript.

Isso faz com que o aprendizado seja mais lento, demandando mais investimento pra adotar a tecnologia.

4. A comunidade ainda está tímida

Como essa tecnologia ainda está chegando, você estará na vanguarda da tecnologia. Ou seja, se tiver algum problema, vai ter que torcer pra ele ter sido respondido em uma das apenas 9500 perguntas sobre o assunto no StackOverflow (contra 179k do Angular 1.x), ou você vai ter que perguntar e aguardar uma resposta.

Caso tenha alguma necessidade mais avançada, vai ter que torcer pra que um dos 15 módulos presentes no NgModules (ou um dos poucos espalhados aí pela internet) te atenda, ou terá que programar você mesmo.

5. O Mercado ainda não precisa dele

O mercado ainda não conhece o Angular 2. Na verdade, agora que as empresas estão começando a ver a grande vantagem que o AngularJS pode trazer pra elas, ou seja, estão só agora conhecendo a versão 1.x.

Numa pesquisa no Google por vagas que pedem conhecimento de Angular 2 como requisito, encontrei apenas um anúncio da própria AlgaWorks procurando por um professor de Front-end e que a pouco foi ocupada por este que lhe escreve.

Por que migrar?

Se você é um explorador de horizontes, se tem uma visão progressiva da programação e se busca estar sempre na vanguarda da sua área, então você se encaixa no perfil daqueles que acham que vale a pena migrar agora (até já tá passando da hora).

Segue o porquê:

1. Explorando terras desconhecidas

Um novo sistema, uma nova filosofia, uma nova linguagem. Isso realmente pode ser desencorajador. A curva de aprendizado pode ser comprometida com o TypeScript, mas você não estará perdendo o seu tempo.

O Angular 2 mudou sim, não tem como negar, mas não é só ele: o jQuery está mudando, o Bootstrap está mudando, o próprio JavaScript está mudando. Uma nova maneira de desenvolver aplicações front-end está chegando e você estará pronto.

2. Você pode ser a referência da comunidade

Sim, a comunidade está começando ainda, mas a cada dia ela aumenta e você pode fazer parte dessa história.

Quem não vai gostar do currículo de alguém com uma pontuação alta no StackOverflow, ou com um complemento no GitHub com mais de 2000 estrelas? Ou até o de alguém que escreveu diversos artigos sobre o assunto?

Dependendo do quanto você se dedicar em contribuir com a comunidade, talvez você nem vai mais precisar distribuir currículos outra vez na sua vida.

Uma videoaula vai ter muita visualização, um artigo vai ter bastante acesso, um complemento vai ter milhares de downloads e tudo isso pode se converter em dinheiro se você tomar o rumo correto.

3. O mercado em breve vai precisar dele

É verdade que o mercado está buscando o Angular 1.x agora. É verdade que uma plena aceitação da versão 2.0 vai precisar de mais alguns anos pra chegar.

A situação, entretanto, também não é desfavorável. Ter um domínio sobre Angular 2 é um ótimo “plus” no currículo e pode ser a diferença entre você e aquele acomodado que não quis dar um passo a mais.

Se preparando agora, você garante que sempre vai ter alguém precisando de você. Tanto hoje quanto amanhã.

4. O Angular 2 abre novos horizontes

O Angular 2 não está sendo feito só pra desenvolvimento web de SPA, ele está sendo projetado pra ser multiplataforma.

Isso quer dizer que ao se aperfeiçoar em Angular 2, você não só se insere no mercado de desenvolvimento front-end, mas também no crescente mercado mobile e desktop. É quase um “pague 1 leve 3”, o céu será o limite!

5. Ele vai vingar e não tem como negar

Realmente pode dar um frio na espinha adotar um sistema que ainda está em Release Candidate, mas vamos ser realistas: esse é um sistema garantido pelo Google!

É tão seguro usar um produto Release Candidate da Google quanto uma versão 1.5 de produtos de muitas empresas por aí.

Estamos falando de uma empresa conhecida por contratar os melhores analistas em suas sedes espalhadas pelo mundo. O time de desenvolvimento do Angular 2 é formado por nomes renomados e tem até gente da Microsoft lá dentro.

Além disso, quem dá a cara a tapa e começa a ver o Angular 2 fica facilmente impressionado com o sistema e se apaixona bem rápido por ele. É só procurar na internet pra comprovar o que eu estou dizendo.

Concluindo

Como toda boa decisão, o que pesa é o seu perfil e o ambiente em que você se encontra. As cartas estão na mesa, basta escolher qual o tipo de jogo você quer jogar.

Seja qual for a sua escolha, nós gostaríamos muito de saber. Deixe aí um comentário com a sua opinião e compartilhe este artigo com os seus amigos.

A mágica por trás do Angular: o $digest

De todas as funcionalidades que o Angular nos oferece, a que ganhou maior destaque e admiração do público foi a “mágica” do data binding (mais especificamente o two-way data binding), que atualiza as informações ao vivo na página.

Hoje nós vamos desvendar essa mágica e entender direitinho como o Angular consegue fazer essa proeza. Então, com o perdão do pleonasmo, vamos começar do começo.

Mas antes, veja o exemplo abaixo em funcionamento (digite um nome no campo):

Estendendo os eventos do navegador

Os navegadores estão sempre aguardando por eventos. É por isso que eles sabem quando clicamos em um botão, ou escrevemos numa caixa de texto.

Esses eventos executam funções que podemos registrar e assim chamar um script em resposta à ação do usuário. Vamos ver isso funcionando com JavaScript puro:

O Angular estende todos esses eventos, criando o seu próprio contexto, o “angular context”.

A Lista de Observação

Toda vez que você faz um data binding no Angular você, sem saber, coloca um $watch – uma observação – na lista lista de observação do Angular. Ou seja, o Angular faz uma lista das propriedades que ele tem que ficar observando se tem alguma mudança.

Então, quando fazemos algo assim:

1	<input type="text" ng-model="nome" />

Ou assim:

1	Olá, {{nome}}

Estamos colocando um $watch com essa variável “nome” na lista de observação.

Tá bom, então toda vez que fazemos um data bind estamos criando um $watch e colocando na lista de observação. E agora?

O ciclo digestivo do Angular

Ok, lembra daquele contexto próprio do Angular nos eventos do navegador?

Então, toda vez que o navegador dispara um evento que pode ser gerenciado pelo angular context, um loop chamado $digest é colocado pra rodar.

Este $digest é composto por dois loops menores, um pra rodar a lista de $evalAsync – que não vamos tratar neste post – e um outro pra processar a Lista de Observação.

E como seria esse processo? O loop vai passar por cada $watch e retirar duas informações:

• Houve alteração no valor da variável?
• Qual o novo valor da variável?

Quando terminar todos os $watch, ele vai passar mais uma vez pra conferir se está tudo do mesmo jeito, se tiver alguma alteração, ele roda de novo e de novo (até 10 vezes, depois disso ele solta uma exception) até ele ter certeza que está tudo certinho, então o loop acaba e ele faz as alterações na interface.

Isso é chamado de dirty-checking ou “conferência suja”, porque ele precisa conferir um por um de cada $watch, não apenas o que foi alterado. Isso normalmente demora uma fração de segundo, mas quanto mais $watch no projeto, menos rápido fica.

Aplicando o contexto

Isso quer dizer que CADA ação do usuário, cada tecla apertada, cada clique do mouse roda um $digest?

Ainda bem que não. Na verdade, o $digest só vai rodar se aquele evento estiver dentro do Angular Context.

E como saber se o evento está dentro do contexto do Angular? A resposta é o $apply.

Se você chamar o método $apply quando um evento é disparado, ele vai rodar dentro do Angular Context e vai disparar o $digest.

O Angular vem com um monte de diretivas e métodos personalizados que chamam o $apply pra gente automaticamente, como o ng-click, o $timeout, etc.

Vamos ver então como fica um bind sem o $apply:

Veja que a mensagem nunca aparece porque o $digest não é chamado. Agora com o $apply:

Quando o conteúdo do $apply é executado, ele chama automaticamente o $digest e o nosso bind é atualizado. Isso não quer dizer que sem o $apply o bind não vai atualizar nunca, um outro elemento que chamar o $digest vai fazer a atualização do conteúdo, olha só:

Ao usar a diretiva ng-click no botão, o Angular já colocou o evento click dele no Angular Context e o $digest vai ser chamado.

Então lembre-se: sempre que você fizer alguma alteração no escopo através de um evento que não está dentro do contexto do Angular, como um callback de algum componente do jQuery por exemplo, use o $apply pra levar essa alteração para o Angular Context.

Conclusão

Pronto! Agora que a “mágica” do data-binding do Angular foi desvendada você estará muito mais preparado para lidar com um dos “problemas” mais reportados com Angular na internet: “bindings que não funcionam”.

Legal, né? Para não perder dicas como essa e ficar por cima das últimas novidades de desenvolvimento Front-end do mercado, assine nossa Lista VIP de Front-end agora! Não se preocupe, não mandamos spam. :)

Faça parte também da nossa Comunidade Front-end no Facebook.

Um abraço e até mais!

Factory no Angular: Consumindo uma API

Se você está construindo uma aplicação web, é quase certeza que vai precisar consumir uma API.

As pessoas que estão iniciando com AngularJS acabam usando o controller para esse tipo de serviço, mas isso não é uma boa prática.

Então eu vou te apresentar a Factory, um tipo de serviço do Angular que vai ser uma mão na roda pra organizar a lógica da sua aplicação.

Você vai aprender nesse video como criar a sua própria factory e consumir uma API REST.

Baixe o código-fonte do projeto dessa videoaula.