AngularJS vs. jQuery

AngularJS e jQuery são muito diferentes no mundo das ferramentas javascript e é importante conhecer os diferentes recursos e funcionalidades de ambos. Este artigo passará por uma pequena comparação entre os dois para ajudá-lo a tomar uma decisão sobre qual sistema é adequado para você.

Nos últimos anos, o JavaScript tornou-se a base para uma paisagem em rápida evolução de Frameworks e bibliotecas. Parece haver um novo recurso a cada poucas semanas, e com este fluxo consistente de ferramentas novas e inovadoras, pode ser difícil saber o que vai ficar e o que não vai sobreviver ao primeiro aniversário. Alguns anos atrás, começamos a usar o AngularJS como a estrutura de escolha para alguns dos nossos aplicativos web maiores. Desde então, cemaçamos a colocar itens como jQuery fora de nossos projetos sempre que possível em favor de AngularJS ou JavaScript puro.

No decorrer deste artigo, vamos passar por uma pequena comparação entre jQuery e AngularJS e por que optamos por usar um ou outro. Começaremos por analisar algumas das diferenças funcionais entre os dois, depois a diferença de desempenho ao simplesmente carregar os dois e, finalmente, um pequeno exemplo de projeto.

Antes de começar, devemos dizer que comparar AngularJS com jQuery é um pouco como comparar maçãs com laranjas. Eles são semelhantes o suficiente para que a comparação valha a pena fazer, mas eles geralmente são usados ​​para duas coisas diferentes.

Comparação

Ajax / JSONP – Primeiro, o que eles são? Ajax significa JavaScript assíncrono + XML, embora o JSON seja usado muito mais frequentemente do que XML nos dias de hoje. JSONP é JSON com preenchimento. Ambos são uma maneira de transferir dados entre o cliente e outro servidor, sem atualizar a página. Tanto o AngularJS como o jQuery fornecem acesso fácil a este recurso, o AngularJS através do módulo ‘$http’ e jQuery através da função ‘$.ajax()’.

Suporte de Animação – Ambos os sistemas permitem o uso de animação. AngularJS requer uma biblioteca adicional (ngAnimate), onde, como jQuery, tem acesso direto à função .animate(). Meu conselho, use apenas CSS para sua animação. A animação é legal, mas quem se importa se não funcionar no IE9 ?

Suporte de modelos – É aqui que começamos a ver algumas diferenças entre os dois. Sem o uso de ES6 ou Babble, é difícil adicionar modelos no jQuery. Quantas vezes você escreveu algo assim?

$(‘.element’).click(function () {
  $(this).find(‘.child’).append(‘<div class=”form-row”> +
        ‘<input type=”text” name=”list[]” />’ +
    ‘</div>’
   );
});

Não há nada de errado com isso, e funciona, mas não destaca a sintaxe. E o que acontece se você estiver usando esse mesmo bit de HTML em vários locais? Isso torna muito difícil manter seu código DRY (Do not Repeat Yourself).

O AngularJS, por outro lado, permite que você configure diretrizes e modelos para controlar seu layout um pouco mais fácil, mesmo que seja mais um código. A principal diferença é que os modelos de AngularJS são chamados em uma mistura de HTML e JavaScript:

Page.html

<div template-name></div>

 Template-name.html

<div class=”template”>
  <div class=”form-row”>
    <input type=”text” name=”list[]” ng-model=”list[]”>
  </div>
</div>

Template-name.directive.js

‘use strict’;

angular.module(‘myDirective’, []).directive(‘templateName’, [function () {
  return {
    restrict: ‘A’,
    templateUrl: ‘template-name.html’
  }
}]);

Enquanto o AngularJS requer três arquivos para criar um modelo nesta instância, ele ajuda a manter seu código mais modular e organizado ao longo de um projeto inteiro. Tenha em mente que este não é o melhor exemplo de um modelo, geralmente eles são mais complicados do que um entrada única.

Injeção de dependência

Esta não é uma necessidade no jQuery. Enquanto você não tiver seus scripts chamados de funções anônimas, você geralmente pode acessar seus plugins sem problemas. Mas você nem sempre precisa carregar essa biblioteca em todas as páginas. A injeção de dependência é usada principalmente para modularidade em um projeto, (novamente mantendo-o seco) e você pode realizar algo semelhante com objetos JavaScript. É tudo sobre manter suas funções locais para que elas funcionem em um ambiente controlado.

AngularJS usa injeção de dependência pesada. Na verdade, tudo sobre AngularJS precisa ser injetado. Se você quiser usar a solicitação ‘$http’, você deve injetá-lo em seu controlador:

.controller('myController', ['$http', function($http) { 
  // Agora você pode usar $http 
}]);

Ligação de dados bidirecionais

Agora, entramos nas coisas boas com o AngularJS. A ligação bidirecional de dados é tanto uma benção quanto uma maldição potencial. Ele permite a modificação direta do DOM e na tela html à medida que o usuário digita e interage com seu site. jQuery pode tipo de fazer isso, mas requer que você escreva JavaScript para fazê-lo, ao contrário de AngularJS, onde é construído diretamente.

Por que isso é bom? Bem, o exemplo mais fácil é que, com o AngularJS, você pode fazer pesquisas e filtragem fuzzy conforme o usuário digita.

AngularJS:

.

Neste exemplo, temos uma entrada simples, e uma saída, para exibir o que faz a ligação de dados de duas vias. Então, um caso de uso do mundo real, onde você pode filtrar uma lista de usuários em uma tabela. Com angular, o único JavaScript que é necessário escrever é a matriz que contém a lista de usuários.

jQuery:

O exemplo jQuery, tem a mesma funcionalidade que a versão angular, com a principal diferença de que existem 50 linhas de javascript escritas para fazer a mesma funcionalidade. A filtragem e a ligação de dados devem ser escritas para serem mais modulares em todo o aplicativo se for algo que você realmente quis usar na produção.

Validação de formulário

Esta é outra das coisas que AngularJS vem com a caixa. Adicionar um elemento de formulário à sua página dá acesso a várias funções no DOM. Os seguintes são alguns dos mais úteis:

$scope.formName.$dirty: boolean

Verdadeiro se o usuário já interagiu com o formulário.

$scope.formName.$invalid: boolean

Verdadeiro se o uso estiver faltando os campos obrigatórios.

$scope.formName.$pristine: boolean

Verdadeiro se o usuário ainda não interagiu com o formulário.

jQuery, por outro lado, não oferece nenhum desses recursos. Você pode gravá-los, ou use um plug-in de terceiros, como o Plugin de Validação jQuery.

Existem muitas outras diferenças entre o AngularJS e o jQuery, mas essas são apenas algumas das coisas mais comuns que eu corro durante o trabalho em um projeto. (Muitas vezes, desejando que jQuery faria ligações de dados bidirecionais ou uma validação de formulário mais fácil).

Desempenho e tamanho do arquivo

Fora da diferença de recursos, desempenho e tamanho do arquivo são coisas muito importantes a serem consideradas ao escolher uma estrutura JavaScript ou biblioteca para usar. As pessoas tendem a se esquecer de telefones ou a obterem limites e uso de dados, então eu gosto de errar do lado do desempenho. Se o site carregar rapidamente, o tamanho geralmente não é um problema.

Para isso, vamos analisar o tamanho do projeto e os tempos de carregamento de um projeto AngularJS e um projeto jQuery que carrega suas respectivas bibliotecas a partir da pasta e um CDN (Content Delivery Network).

Tamanho do arquivo

No momento da leitura, a versão minificada do AngularJS é quase o dobro do jQuery.

Atuação

Para esses números, estamos olhando o tempo médio de carregamento de uma página muito simples que simplesmente inclui o arquivo AngularJS ou jQuery minificado e executa um ‘console.log‘ na janela. Estes números são calculados em média em 10 cargas cada.

A primeira coisa a notar sobre isso, é que quase nunca é uma boa idéia incluir bibliotecas diretamente da sua fonte, mas isso é para outra discussão sobre CDNs. No entanto, com base nesses números, podemos ver que mesmo com um tamanho de arquivo maior, o AngularJS teve um tempo de carregamento médio melhor, DOMLoad e terminou.

Em seguida, daremos uma olhada em carregar o mesmo projeto, apenas desta vez, incluindo a biblioteca do CDN fornecido diretamente dos sites onde você pode baixar cada um. Você pode, obviamente, incluir cada um de vários CDNs diferentes para encontrar um que seja mais rápido se você precisar.

Ao carregar a partir do CDN, vemos uma história ligeiramente diferente. AngularJS termina mais cedo, mas jQuery carrega o DOM mais rápido.

  • DOMContentLoaded (DOMLoad é um evento disparado quando o documento HTML inicial é completamente carregado e analisado sem planilhas, imagens e subtramas carregadas).
  • O Load é disparado quando um recurso e todas as suas dependências terminaram de carregar.
  • Finish, é o tempo necessário para carregar conteúdo assíncrono, ou requisitos mínimos para que algo apareça na página.

Exemplo de Projeto

Eu mencionei no início que existe uma nova estrutura de JavaScript a cada duas semanas, e o TODOMVC é um ótimo recurso para comparar e contrastar esses diferentes frameworks. É um aplicativo muito simples, que permite que um usuário adicione, edite, exclua e complete tarefas. Vamos usar isso como exemplo de comparação.

Em primeiro lugar, vejamos algumas estatísticas sobre os diferentes projetos.

Uma nota importante sobre o tamanho dos dois projetos é que o projeto AngularJS tem testes nele (Karma e Jasmine). O projeto angular também possui mais arquivos de trabalho para prestar atenção. Os tempos de carga também são muito parecidos.

Os projetos são muito pequenos, e não deve demorar muito para rever o estilo de código diferente entre o AngularJS e o jQuery.

Qual você deveria usar?

Como mencionado inicialmente, comparar AngularJS para jQuery é um pouco como comparar maçãs com laranjas. AngularJS é uma estrutura, e jQuery é uma biblioteca. Ambos oferecem uma boa quantidade de funcionalidade, o desempenho é semelhante e a diferença de tamanho é insignificante.

A distinção geral que tende a fazer envolve a quantidade de interação necessária do usuário. jQuery fica aquém da facilidade de uso e organização quando há uma grande quantidade de dados, formulários e mudanças rápidas no conteúdo. Isso não quer dizer que você não pode fazer tudo com o jQuery que você pode com o AngularJS, mas para mim, acho bastante revelador que a biblioteca jQuery é a metade do tamanho dos AngularJs e, no entanto, ele carrega mais devagar. Esta é apenas uma opinião pessoal, mas sinto que jQuery está bastante inchado e pode ser devido a alguma otimização.

Enquanto trabalho mais com o JavaScript, encontro-me descobrindo mais e mais razões para evitar jQuery em favor do JavaScript puro sempre que possível. No entanto, ainda é uma excelente escolha quando você precisa de uma interação JavaScript mínima.

AngularJS, por outro lado, é excelente para projetos de grande escala ou interativos. Ele oferece muitos recursos internos realmente úteis que eu não toquei, como o poder de `ng-repeat`, diretrizes e serviços que ajudam você a manter seu aplicativo ou website DRY. Tal como acontece com a maioria das ferramentas, tem suas próprias desvantagens e pode ser excessivo em algumas situações.

Então, o que você deve usar? Bem, um pouco disso é preferência pessoal. Eu, pessoalmente, não gosto de usar jQuery, para mim e os outros desenvolvedores aqui no Hinno é um último recurso. Estamos nos esforçando para melhorar a otimização de nossos sites e o jQuery tende a tornar isso mais difícil para nós. Para mim, então, a resposta é o AngularJS, mas isso depende de um gosto pessoal e claro, da estrutura do projeto.

Log in with your credentials

Forgot your details?