Os erros mais comuns de quem programa em AngularJS

1O AngularJS é um framework Javascript mantido por uma equipe da Google, que tem como uma das suas principais funções extender funcionalidades aplicadas ao HTML, fazendo com que possamos manipular elementos do DOM de forma simples e ao mesmo tempo deixando nossas aplicações com mais interatividade com os usuários.

A ideia do AngularJS é criar aplicações web usando o conceito SPA (Single Page Application), que fornece ao usuário a mesma sensação de aplicações desktop, pois o usuário não vê o famoso refresh da página quando executa alguma ação, isso graças ao Ajax que é fortemente usado no desenvolvimento de aplicações web com o AngularJS.

Aqui, você pode assistir ao livecoder brasileiro NadoNeves desenvolvendo um aplicativo para fazer listas de compras com Angular.JS e Node.JS:

ENJOYING THIS POST?

Get More Benefits With LiveEdu Pro

O AngularJS foi construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes.

Hoje, AngularJS é o framework de JavaScript mais popular disponíveis hoje. Um dos objetivos do AngularJS é simplificar o processo de desenvolvimento, o que faz deste framework uma ótima ferramenta para criar protótipos de aplicativos pequenos, mas sua potência também permite o desenvolvimento de aplicações comerciais completas. A combinação de facilidade de desenvolvimento, amplitude de recursos e desempenho levou a ampla adoção de desenvolvedores web. Entretanto, com esta ampla adoção também vem muitas armadilhas comuns.

Diego Eis, fundador do site Tableless, explica como o tradicional jQuery perdeu espaço para o Angular.JS e outros frameworks numa entrevista com o Bugginho Developer.

Aqui, vamos apresentar os erros mais comuns de quem programa em AngularJS, especialmente ao dimensionar um aplicativo.

Estrutura de diretórios MVC

AngularJS é, por falta de um termo melhor, um framework MVC. Os modelos não são tão claramente definidos como um framework como Backbone.js, mas o padrão arquitetônico ainda se encaixa bem. Ao trabalhar em um framework MVC, uma prática comum é agrupar arquivos em conjunto com base no tipo de arquivo.

Este layout parece óbvio, especialmente para quem está acostumado com Ruby on Rails. No entanto, uma vez que o aplicativo começar a escalar, esse layout fará com que muitas pastas se abram simultaneamente. Mesmo se estiver usando o Sublime, o Visual Studio ou o Vim com Nerd Tree, muito tempo será gasto navegando pela árvore de diretórios.

Em vez de manter os arquivos agrupados por tipo, agrupe-os baseando-se nos recursos.

Esta estrutura de diretório torna muito mais fácil encontrar todos os arquivos relacionados a um recurso específico, o que acelerará o desenvolvimento. Pode ser controverso manter arquivos .html com arquivos .js, mas a economia de tempo é mais valiosa.

Módulos (ou falta deles)

No início, é muito comum deixar tudo fora do módulo principal. Isso funciona bem ao iniciar um aplicativo pequeno, mas pode se tornar incontrolável.

Uma estratégia comum depois disso é agrupar tipos semelhantes de objetos:

Esta estratégia vai escalar tão mal quanto as estruturas de diretório da primeira parte. Seguir o mesmo conceito de agrupar recursos juntos permitirá a escalabilidade.

Ao trabalhar em grandes aplicativos, não dá para conter tudo em uma única página e, ao ter recursos contidos nos módulos, é muito mais simples reutilizar os módulos entre aplicativos.

Injeção de dependência

A injeção de dependência é um dos melhores padrões do AngularJS. Ele torna os testes muito mais simples, bem como torna mais claras as dependências de um objeto particular. AngularJS é bastante flexível em como injetar coisas. O jeito mais simples requer apenas passar o nome da dependência dentro a função para o módulo.

Aqui, está muito claro que MainCtrl depende de $scope e $timeout.

Isso funciona bem até que você esteja pronto para a produção e queira minificar seu código. Usando UglifyJS o exemplo torna-se o seguinte:

Agora, como o AngularJS sabe de que depende o MainCtrl? O AngularJS fornece uma solução muito simples para isso: passe as dependências como uma array de strings, com o último elemento da array sendo uma função que leva todas as dependências como parâmetros.

Isso minimiza o código com dependências claras que AngularJS saberá como interpretar.

Dependências globais

Muitas vezes, ao escrever aplicativos em AngularJS, haverá uma dependência em um objeto que se liga ao escopo global. Isso significa que ele está disponível em qualquer código AngularJS, mas isso quebra o modelo de injeção de dependência e leva a alguns problemas, especialmente nos testes.

No AngularJS, é bem simples encapsular esses globais em módulos para que possam ser injetados como módulos AngularJS padrão.

Underscore.js é uma ótima biblioteca para simplificar código em Javascript em um padrão funcional e pode ser transformado em um módulo fazendo o seguinte:

Isso permite que o aplicativo continue no modo de injeção de dependência do AngularJS, o que permitiria que o underscore seja trocado no momento do teste.

Isso pode parecer trivial, mas se o seu código estiver usando use strict (e deveria estar!), então isso se torna um requisito.

Inchaço no controlador

É muito comum, especialmente no início, colocar muita lógica no controlador. Os controladores nunca devem fazer manipulação do DOM ou manter os seletores do DOM. É aqui onde as diretivas e o ng-model devem entrar.

Dados devem ser armazenados em serviços, exceto quando estiver sendo vinculado ao $scope. Os serviços são singletons que persistem ao longo da vida útil da aplicação, enquanto os controladores são transitórios entre os estados de aplicação. Se os dados são armazenados no controlador, então será necessário buscá-los em algum lugar quando for restabelecido. Mesmo se os dados são armazenados em localStorage, é uma ordem de magnitude mais lenta para recuperar do que com uma variável Javascript.

O AngularJS funciona melhor quando se segue o Princípio de Responsabilidade Única (SRP). Se o controlador é um coordenador entre a vista e o modelo, então a quantidade de lógica no controlador tem que ser mínima. Isso também tornará o teste muito mais simples.

Não usar Batarang

Batarang é uma excelente extensão do Chrome para desenvolver e depurar aplicativos em AngularJS.

Batarang oferece navegação entre os modelos para que possamos ver melhor o que o Angular determinou ser os modelos vinculados a escopos. Isso pode ser útil ao trabalhar com diretivas e isolar escopos para ver onde os valores são vinculados.

Batarang também oferece um gráfico de dependências. Se você tiver que trabalhar com um código que ainda não foi testado, o Batarang é uma ferramenta útil para determinar quais serviços devem ter a maior atenção.

Finalmente, Batarang oferece análise de desempenho. Com a ferramenta de desempenho do Batarang, é muito simples ver quais funções estão tomando mais tempo no ciclo de compilação.

 Estes são os erros mais comuns. Se você for um programador Angular.JS e quiser aumentar a nossa lista, comente abaixo e deixe-nos saber a sua opinião.

Read previous post:
401
Как выучить программирование после 40

Изучение – это умение стойко переносить различные испытания в жизни. Если вы постоянно изучаете что-то новое, вы на правильном пути...

Close