Mootools Vs JQuery

Quem desenvolve para web nos últimos anos, com certeza sentiu a necessidade de aprender algum framework javascript para agilizar seu trabalho ou mesmo possibilitar criar efeitos mais complexos com menos esforço. Nessa empreitada, o cidadão vai se deparar com uma série de opções das mais variadas, como ExtJs, Prototype, Dojo e outros.

Dentre esta gama de opções, escolhi como meu framework principal o Mootools que é bastante prático e poderoso. O problema é que, na minha região, esse não é lá um framework muito utilizado. O mercado costuma ser dominado por uma tecnologia ou outra, enquanto as "outras" convivem timidamente, em seu nicho. No meu caso, o framework que está "na boca do povo" aqui é o JQuery, outra opção muito popular, internet a fora.

Nisso, sempre ocorrem aquelas discussões sobre qual o seu framework predileto ou por que pessoa tal escolhe framework tal. Aqui, normalmente essas discussões envolvem o JQuery, e no meu caso, o barraco é mais ou menos no estilo Mootools Vs JQuery. Hoje, ocorreu algo assim, em pequenas proporções, quando comentei meu desgosto com a sintaxe do JQuery em relação à sintaxe do MooTools no twitter.

Disseram que a sintaxe do Mootools é "mais feia" que a do JQuery e que o primeiro era "javeiro". Tudo bem que sintaxe bonita e feia é questão de gosto, mas o adjetivo "javeiro" que foi definido pelo interlocutor como prolixo já não é. Ele faz referência a alguma coisa (Java, no caso) e representa uma característica teoricamente perjorativa.

Mediante tudo isso, me sinto compelido a contribuir com meus dois centavos. Vou justificar porque vejo a sintaxe do Mootools como sendo mais clara e "bonita" que a do JQuery, por fim, vou colocar alguns exemplos de código para ver se o adjetivo "javeiro" realmente procede.

Primeiro, quem já parou para ler a documentação do JQuery? Ver os métodos e classes disponíveis? Galera normalmente só olha o que vai precisar neh? Então vou fazer uma análise sobre trechos de código que se usa normalmente.

Vejamos alguns exemplos de como selecionar elementos com JQuery e Mootools:

Bem, não vou me estender muito neste artigo, mas acho que foi possível mostrar alguns pontos que mostram que o adjetivo javeiro, talvez tenha sido mal empregado pelo meu colega. De qualquer forma, quaisquer observações ou erros no código, favor, não deixem de informar. Abraço a todos!

Mootools for the masses!!!

Há! Finalmente! Meu primeiro post sobre o framework Javascript Mootools!

Como usuário assíduo do Mootools à quase 2 anos e meio, é quase vergonhoso que só agora minha pessoa tenha se dignificado a gastar alguns minutos de minha madrugada escrevendo sobre este estupendo framework. Bem, não mais! O ócio foi vencido, e agora, venho aqui, falar deste, que é um concorrente a altura de outros frameworks conhecidos como Dojo, Mochkit e JQuey.

Bem, tentando respeitar a didática de meus antepassados, vou começar falando primeiro o que o Mootools é: O Mootools é um conjunto de funções e funcionalidades que permitem, aliadas a um navegador web, extender a usabilidade do Javascript a níveis aceitáveis. Ou seja, o javascript com o Mootools passa a ser o que o Javascript devia ser, sem o Mootools. Não acredita? Exemplo simples:

Para pegar um elemento de uma página web, pelo seu atributo id, utilizando Javascript, o seguinte código seria necessário:

document.getElementById('id_do_elemento');

com Mootools, o mesmo resultado se pode ser obtido com o seguinte trecho:

$('id_do_elemento');

Iaí, grande diferença? Não? Tenta fazer o primeiro código 20 vezes em um arquivo js ou dentro de uma página, para você ver o tamanho do parto! Mas, o Mootools não se detem a isso. Ele também permite diversos outros truques, pois ele não apenas te fornece funções para trabalhar com js, ele cria novas funcionalidades e formas de se realizar tarefas comuns a páginas web.

Por exemplo, adicionar eventos a elementos de uma página como o evento de "click", onde uma função é disparada ao se clicar em um botão, texto ou imagem, pode ser feito através da função addEvent, que é automaticamente adicionada a todos os elementos do documento.

$('elemento').addEvent('click', function(event){ alert('fui chamado com um clique do mouse!') });

Outra: o Mootools também fornece uma série de funções prontinhas que permitem criar "efeitos" visuais legais, com movimento até, utilizando apenas Javascript. Para quem é da velha guarda, tais feitos somente poderiam ser alcançados com algum flash ou applet da vida. Com Mootools, é na lata! Não precisa adicionar plugin nem máquina virtual alguma, só o Mootools.
Vamos a um exemplo:

digamos que você queira que, após um evento de clique, um objeto suma, aos pouquinhos. Tipo, vá ficando mais claro até desaparecer(efeito também conhecido como "fade out"). No Mootools, tal feito seria obtido com o seguinte comando:

$('id_do_elemento').addEvent('click', function(e){ this.fade('out'); });

Prontinho! Elegante, rápido e conciso. Outra funcionalidade interessante, além de efeitos prontos e busca facilitada é que o mootools te permite modificar atributos e propriedades do estilo de elementos facilmente. Por exemplo:

Para alterar a cor do texto de um elemento, o seguinte código bastaria:

$("id_do_elemento").setStyle('color', "#abc");

Para alterar um atributo, fariamos assim:

$("id_do_elemento").set("atributo", "novo_valor");

Enquanto para adicionar uma classe ao elemento(ato bastante comum), fariamos:

$("id_do_elemento").addClass("nova_classe");

Existem ainda outras funções bastante úteis e muitos outros efeitos tentadores. Mas, para visualizá-los, você terá que visitar a documentação do projeto Mootools, disponível no site do mesmo.

Dica: Bem, nada como uma dica! Um erro muito comum de iniciantes no Javascript é colocar scripts que trabalham com elementos da página web para serem executados antes da página estar completamente carregada. Para evitar esse tipo de problema, coloque quaisquer scripts que devam ser executados apenas quando a página tiver sido carregada, dentro de um evento domready ligado ao objeto window do DOM. Algo assim:

window.addEvent("domready", function(e){ /* seu código aqui */ });

Dica valiosa, galera! Não esquecer.

Por que usar o Mootools e não o JQuery?

Bem, não sei como é aí na sua cidade, mas aqui na minha, a galera é meio "doente" pelo JQuery. Costumo achar que essas febres são sempre modinha, tipo ruby. Particularmente, já dei uma olhada no JQuery e não gostei. Achei o código bem feio, e, código feio para mim é o mesmo que café velho. Eu evito!

É verdade que o JQuery funciona melhor com outros frameworks e scripts Javascript que o Mootools, pois tem uma utilização de namespace mais sadia, mas, francamente, quem é que usaria vários frameworks JS em um mesmo aplicativo? Seria uma brutalidade com os mantenedores do código. Também é verdade que o JQuery é mais difundido, possui mais plugins e projetos baseados nele, entretanto, mesmo assim, eu não indicaria o JQuery para um novo projeto.

Semelhanças

• pequenos(menos de 60kb)
• permitem manipulação do DOM dos elementos da página
• permitem criar efeitos muito bonitos e interativos
• utilizam um sistema de "plugins"
  
• funcionam bem nos navegadores mais comuns
• comunidades bastante ativas
• trabalham com Ajax
  

Diferenças

• A comunidade do JQuery é maior
• O JQuery possui mais projetos baseados nele
• JQuery trabalha melhor com outros frameworks
• O Mootools muda sua sintaxe a cada milestone
  
• A sintaxe do Mootools é mais bonita

Bem, concluido meu pequeno review do Mootools. Se alguém quiser alguma postagem sobre um assunto específico do Mootools, favor avisar. Abraço a todos!

ps: uso o Mootools a muito tempo e nunca tive grandes problemas. Mesmo "não parecendo" uma boa escolha devido à lista de prós e contras, gostaria de aconselhá-lo, pois é um ótimo framework. Se você não tem preguiça de fazer buscas no fórum do Mootools, nem de ler documentação, a maioria das vantagens do JQuery sobre o Mootools passam desapercebidas.