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.