Existe atualmente várias Frameworks Javascript e todas tem o mesmo objetivo: aumentar a simplicidade e a produtividade desta linguagem. Então qual seria a melhor? Qual alcança mais estes objetivos? Com certeza há muita discussão sobre isto e para alguns uma certa framework javascript é como um time de futebol ou até uma religião. Elas não vieram para disputar umas com as outras, mas sim para dar uma liberdade de escolha para os usuários.

Escolhi o Jquery de maneira intuitiva. Conheci primeiro o Mootools, achei bastante interessante, mas ao ler a documentação não me senti a vontade. Depois com o rails acabei encontrando o script.aculo.us e comecei a “brincar” com algumas funcionalidades, mas ainda faltava alguma coisa. Depois veio o Prototype quando fui trabalhar com o cakePHP. Com poucos dias pude perceber o poder desta framework. Então descobri que ela estava sendo muito usada e respeitada na comunindade de desenvolvedores. No entanto, no primeiro dia de encontro com o Jquery, já estava fazendo muita coisa, principalmente com o Ajax. É muito conciso o fato de que no final das contas nada de Javascript é inserido no HTML. Mas isto é minha opinião, mas ela não é válida quando o que vale no mundo do desenvolvimento web é a prátia e vivências de diferentes plataformas.

Procurando por várias comparações na Web vou mostrar neste post a diferença entre o Jquery e  Prototype, que julgo serem as mais sólidas da Web.

Acho que esta citação de Michael Futreal resume bem a diferença das duas:
Prototype torna o Javascript interessante, é uma ótima framework, é útil e boa de usar. O Jquery é divertido. Ele permite que você selecione os objetos DOM da página com seletores CSS3 mesmo que os browsers não o suportem. Por ele você navega pelo DOM como um livro muito bem escrito
Esta é uma boa diferença. Mas e isto em códigos?
Vou começar a ilustrar um Javascript comum que é utilizado no dia a dia: Tabela com cores alternadas. Assim ficará fácil perceber como é útil o uso de seletores CSS3.
Com o Prototype:

$$("table").each(function(table){
Selector.findChildElements(table, ["tr"])

.findAll(function(row,i){ return i % 2 == 1; })

.invoke("addClassName", "odd");

});

E agora com o Jquery:

$("tr:nth-child(odd)").addClass("odd");

Agora me pergunte qual seria mais simples e intuitivo? Qual você prefere ficar?

Vamos ilustrar mais uma funcionalidade das duas Frameworks: Adicionar Classes dinâmicamente em vários elementos.

Abaixo o código com o Prototype:

$$('.element').each(function(node) {

Element.addClassName(node, 'className');

}

Com o Jquery:

$('.element').addClass('className');

Como está descrito no Blog do Jquery , o último código é um exemplo claro da diferença de metodologias. Pelo fato do Jquery está passando mensagens para objetos Jquery, o código possui uma sutil mudança. O Jquery não importa se você está adicionando uma classe em um grupo de objetos ao invés de um objeto. O código para ambas as situações é o mesmo. Prototype, por outro lado, requer um iterador(No caso o each que percorre todos os objetos selecionados).

Na medida que seu código fica mais complexo, a escabilidade do Jquery se torna mais fácil, enquanto que loops aninhados se tornam normas em frameworks como Prototype.

A seleção de objetos utilizando o X-path e o CSS3 tornou-se algo tão útil, que a versão do Prototype depois da 1.5 já aceitava essa característica.

Há muitos rumores de que o Jquery seja bem mais lento que o prototype, mas testes foram realizados e pode-se contatar que não é bem assim. A diferença entra na parte da filosofia. Resumindo estes conceitos, para o Jquery:

  • Escabilidade: Pelo fato dos objetos Jquery ter funcionalidades “colado” nele, eles retornam outros objetos Jquery, e assim os desenvolvedores podem passar mensagens adicionais para eles.
  • Uso de seletores CSS e XPATH: Devido ao Jquery passar mensagens para objetos, ele pode implementar seletores adicionais no método $.
  • Desenvolvimento de Plugin: O próprio Jquery conduz ao desenvolvimento de Plugins. É fácil adicionar funcionalidades ao objeto Jquery.
  • Looping automático: Os métodos Jquery são requisitados para automaticamente iterarem através de todos os objetos DOM selecionados.

Bem, acho inevitável qualquer desenvolvedor Javascript fazer o uso de uma framework. Para quem ainda não sabe qual usar, vale a pena dar uma olhada no Jquery. Para quem usa o Prototype, nada contra, pois acho que cada Framework se encaixa para um certo desenvolvedor. Eu me dei bem com o Jquery, outros podem gostar do Prototype e achá-lo bem mais simples e intuitivo. Mas tentei mostrar aqui as diferenças e uma comparação entre as duas e o que me levou a fazer esta escolha. O desenvolvimento de Plugins e a seleção por CSS 3 é um diferencial.

14 Replies to “Jquery vs Prototype na prática”

  1. Eu mexo com jquery e nunca experimentei outro framework. Sempre tive vontade de ver outro tipo este mais famoso aí chamado prototype.
    Porém, agora depois deste artigo perdi a vontade. Nem compensa. É muuuito complicado com relação ao ótimo jquery.
    Valeus 🙂

  2. É, com certeza, a framework existe para aumentar a produtividade e precisa ser simples, porém concisa. O jQuery conseguiu unir as duas coisas e vem cada vez mais melhorando suas capacidades e funcionalidades.

    Aê micox, você me deu uma dica de como pegar os campos dos formulários no form usando o plugin para poder fazer o uso do Ajax com mais flexibilidade, andei aprofundando no plugin, ele realmente é a solução, perfeito. Obrigado cara e logo quero postar aqui por que muita gente tem essa dúvida!!!

  3. Você sabe se consigo trabalhar com os dois ao mesmo tempo ? digo isso por que o scrptaculous precisa da Prototype, mas gostaria de usar a JQuery nas outras partes de desenvolvimento.
    Abraço

  4. Boa tarde Fernando, nunca utilizei as duas, mas é uma boa pergunta, pois utilizo o cakpePHP que usa o scriptaculous e uso o jQuery, acho que o prototype tem uma variavel chamada $event que tem conflito com o jquery como o mootools, dá uma olhada no post e tente mudar o nome da variável se ela apresentar conflito, você fica sabendo pelo firebug. Se acontecer, use as instruções como coloquei no posto sobre o Mootools, de qualquer forma vou testar e ver se acontece o conflito. Abraços…

  5. Bom dia…
    Eu trabalho com o Prototype desde as versões mais antigas, e nunca tive vontade de trabalhar com outra. Pelo que eu conheco do jQuery eu acho que o Prototype é mais fácil de ser alterado. Aprendi muito utilizando e alterando o Prototype.

  6. Mas é isso aí Nagib, cada um se sente melhor com alguma framework, eu não tenho nada contra nenhuma delas, este post foi só para ilustrar algumas diferenças significativas… para quem quer aprender alguma e não sabe qual escolher, o que resta é experimentar… todas tem o mesmo objetivo, o que muda é como ele é atingido!!!

  7. Olá, para responder a dúvida dos colegas que perguntaram de como utilizar prototype jQuery juntos, vc pode utilizar o jQuery.noConflict(); e depois de chamar isso, vc tem as chamadas ao jquery utilizando o jQuery ao invés do $. exemplo:

    jQuery.noConflict();

    // Use jQuery via jQuery(…)
    jQuery(document).ready(function(){
    jQuery(“div”).hide();
    });

    // Use Prototype with $(…), etc.
    $(‘someid’).style.display = ‘none’;

    se quiser saber mais sobre o jQuery.noConflit() e compatibilidade entre o jQuery e outras bibliotecas: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

    http://docs.jquery.com/Core/jQuery.noConflict

    abraços

  8. OLá Alexandre!
    Muito bacana seu post; sou um entusista da prototype, mas já trabalhei com a jQuery muito também.
    No fundo, quem trabalha com uma consegue facilmente trabalhar com a outra.

    O que eu gosto na prototype é a clareza nas declarações: você sabe exatamente o que cada linha está fazendo.
    Por exemplo, ‘$(“tr:nth-child(odd)”).addClass(“odd”);’ para quem não está habituado é muito pouclo legível (me lembra o ?: no java para declarar um if).
    E hoje em dia melhorou, mas no começo da jQuery eram encontrados muitos problemas de compatibilidade entre browsers – nem todas as funções eram cross-browser.
    Mas, como disse, nesse aspecto ela melhorou.

    No mais, bem bacana seu blog. Parabéns!

  9. @Chris: Muito obrigado chris pelos comentários, as duas frameworks vem fazendo um grande avanço e o intuito aqui não é dizer que uma é melhor que a outra, para mim as declarações jQuery são mais claras, mas isto depende de cada um mesmo. As duas tem suporte para conseguir o objetivo, quem estiver começando, tem que tentar e descobrir com qual se familiariza mais fácil, por que apesar de serem escritas em javascript a arquitetura é bastante diferente. Abraços e sucesso….

  10. imho a grande diferenca entre os js.frwrks esta na filosofia e arquitetura. prototype e mootools procuram enriquecer a linguagem javascript e a enriquece por respeitar os principios desta linguagem, principalmente a heranca por prototipacao: prototypal inheritance e para a utilizacao destes 2 frwrks o desenvolvedor continua codificando em javascript em ultima instancia (por isso o codigo menos enxuto nos exemplos acima) … ja o jQuery nao compartilha deste espirito e o que vc codifica nem parece muito com javascript no final …

    prototype e mootools extendem a linguagem js e jquery a encapsula totalmente ou quase … este pode ser o motivo principal de sua grande adocao, pois conhecer bem oop js nao eh tao facil…

  11. jQuery: $(“tr:nth-child(odd)”).addClass(“odd”);
    Prototype: $$(“tr:nth-child(odd”).invoke(‘addClassName’, ‘odd’);

    jQuery: $(‘.class’).addClass(‘className’);
    Prototype: $$(‘.class’).invoke(‘addClassName’, ‘className’);

    Não precisa escrever aquele tanto de código para o Protoype.

    Prototype não tem o foco de jQuery de facilitar o uso de DOM ao extremo. Ele facilita mas da sua maneira. O foco dele é desenvolvimento JS e não DOM + Ajax + Efeitos 😉

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *